Chrome Dev Summit 2014: Crea algunas apps con Polymer

Durante el año anterior, el equipo de Polymer pasó mucho tiempo enseñando a los desarrolladores a crear sus propios elementos. Esto ha dado lugar a un ecosistema de rápido crecimiento, en gran parte gracias a los elementos Core y Paper de Polymer y a los elementos de ladrillo creados por el equipo de Mozilla.

A medida que los desarrolladores se familiarizan con la creación de sus propios elementos y comienzan a pensar en la compilación de aplicaciones, se plantean algunas preguntas:

  • ¿Cómo debes estructurar la IU de tu aplicación?
  • ¿Cómo se realiza la transición entre los diferentes estados?
  • ¿Cuáles son algunas estrategias para mejorar el rendimiento?
  • ¿Y cómo deberías brindar una experiencia sin conexión?

Para la Chrome Dev Summit, intenté responder estas preguntas creando una pequeña aplicación de contactos y analizando el proceso que pasé para crearla. Esto es lo que se me ocurrió:

Estructuración

Dividir una aplicación en partes modulares que se pueden combinar y reutilizar es un usuario central de los componentes web. Los elementos de núcleo* y papel* de Polymer facilitan el inicio con piezas pequeñas, como la barra de herramientas de papel y el botón del ícono de papel.

Polymer ayuda a los desarrolladores a compilar aplicaciones más rápido

Y, a través del poder de la composición, combínalos con cualquier cantidad de elementos para crear una estructura de aplicación.

Polymer mejora los componentes web

Una vez que hayas establecido un andamiaje genérico, puedes aplicar tus propios estilos de CSS para transformarlo en una experiencia única para tu marca. Lo bueno de hacer esto con componentes es que te permite crear experiencias muy diferentes y, al mismo tiempo, aprovechar las mismas primitivas de compilación de apps. Con un andamiaje preparado, puedes pasar a pensar en el contenido.

Un elemento que resulta particularmente adecuado para trabajar con mucho contenido es el core-list.

Polymer mejora los componentes web

El core-list se puede conectar a una fuente de datos (básicamente un array de objetos) y, para cada elemento del array, marcará una instancia de plantilla. En la plantilla, puedes aprovechar el poder del sistema de vinculación de datos de Polymer para conectar rápidamente tu contenido.

Transiciones

Con las distintas secciones de tu app diseñadas e implementadas, la siguiente tarea es descubrir cómo navegar entre ellas.

Aunque todavía es un elemento experimental, core-animated-pages proporciona un sistema de animación conectable que se puede usar para hacer la transición entre diferentes estados de tu aplicación.

La tarjeta de informe de Polymer debe mejorarse

Pero la animación es solo la mitad del rompecabezas: una aplicación necesita combinar esas animaciones con un router para administrar correctamente sus URL.

En el mundo de los componentes web, el enrutamiento tiene dos variantes: imperativo y declarativo. Combinar core-animated-pages con cualquiera de los enfoques puede ser válido según las necesidades de tu proyecto.

Un router imperativo (como Flatiron's Director) puede escuchar una ruta coincidente y, luego, indicar a core-animated-pages que actualice el elemento seleccionado.

La tarjeta de informe de Polymer debe mejorarse

Esto puede ser útil si necesitas realizar un trabajo después de que una ruta coincida y antes de que la siguiente sección haya hecho la transición.

Por otro lado, un router declarativo (como app-router) puede combinar enrutamiento y core-animated-pages en un solo elemento, de modo que se simplifica la administración de ambos.

La tarjeta de informe de Polymer debe mejorarse.

Si quieres tener un control más detallado, puedes ver una biblioteca como más enrutamiento, que se puede combinar con core-animated-pages mediante la vinculación de datos y, posiblemente, brindarte lo mejor de ambos mundos.

Rendimiento

A medida que tu aplicación toma forma, debes estar atento a los cuellos de botella de rendimiento, especialmente a todo lo asociado con la red, ya que esta suele ser la parte más lenta de una aplicación web móvil.

Una ventaja en el rendimiento es la carga condicional de los polyfills de los componentes web.

La tarjeta de informe de Polymer debe mejorarse

No hay motivo para incurrir en todos esos costos si la plataforma ya cuenta con compatibilidad total. En cada versión del nuevo repositorio webcomponents.js, los polyfills también se dividieron en archivos independientes. Esto es útil si quieres cargar condicionalmente un subconjunto de polyfills.

<script>
    if ('import' in document.createElement('link')) {
    // HTML Imports are supported
    } else {
    document.write(
        '<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
    );
    }
</script>

También se pueden obtener importantes ganancias de red al ejecutar todas tus importaciones HTML a través de una herramienta como Vulcanize.

La tarjeta de informe de Polymer debe mejorarse.

Vulcanize concatenará tus importaciones en un solo paquete, lo que reducirá significativamente la cantidad de solicitudes HTTP que realiza tu app.

Sin conexión

Sin embargo, compilar una app con buen rendimiento no resuelve el dilema de un usuario con poca o ninguna conectividad. En otras palabras, si tu app no funciona sin conexión, no es realmente una app para dispositivos móviles. Hoy en día, puedes usar la caché de aplicaciones tan dirigida para desconectar tus recursos, pero en el futuro, Service Worker pronto debería hacer que la experiencia de desarrollo sin conexión sea mucho más agradable.

Jake Archibald publicó hace poco una increíble guía de recetas sobre patrones de service worker, pero les daré una guía de inicio rápido para que puedan comenzar:

La instalación de un service worker es fácil. Crea un archivo worker.js y regístralo cuando se inicie tu aplicación.

La tarjeta de informe de Polymer debe mejorarse

Es importante que ubiques el worker.js en la raíz de tu aplicación, ya que le permitirá interceptar solicitudes de cualquier ruta de acceso de tu app.

En el controlador de instalación del trabajador, almaceno en caché una gran cantidad de recursos (incluidos los datos que potencian la app).

La tarjeta de informe de Polymer debe mejorarse

Esto permite que mi app le proporcione al usuario al menos una experiencia de resguardo si accede a ella sin conexión.

¡Adelante!

Los componentes web son una gran adición a la plataforma web y aún están en su etapa inicial. A medida que se instalen en más navegadores, depende de nosotros, la comunidad de desarrolladores, determinar las prácticas recomendadas para estructurar nuestras aplicaciones. Las soluciones anteriores nos proporcionan un punto de partida, pero aún queda mucho por aprender. ¡Vamos a crear mejores apps!