Durante el año anterior, el equipo de Polymer dedicó mucho tiempo a enseñar a los desarrolladores a crear sus propios elementos. Esto generó un ecosistema en rápido crecimiento, impulsado en gran parte por los elementos Core y Paper de Polymer, y los elementos Brick 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 compilar aplicaciones, surgen varias preguntas:
- ¿Cómo deberías estructurar la IU de tu aplicación?
- ¿Cómo realizas la transición entre los diferentes estados?
- ¿Cuáles son algunas estrategias para mejorar el rendimiento?
- ¿Y cómo deberías proporcionar una experiencia sin conexión?
Para Chrome Dev Summit, intenté responder estas preguntas compilando una pequeña aplicación de contactos y analizando el proceso que seguí para compilarla. Esto es lo que encontré:
Estructura
Dividir una aplicación en partes modulares que se pueden combinar y reutilizar es un principio fundamental de los componentes web. Los elementos core-* y paper-* de Polymer facilitan el inicio con elementos pequeños, como paper-toolbar y paper-icon-button.
Y, a través del poder de la composición, combínalos con cualquier cantidad de elementos para crear un andamiaje de la aplicación.
Una vez que tengas un andamiaje genérico, puedes aplicar tus propios diseños de CSS para transformarlo en una experiencia única para tu marca. La ventaja de hacerlo 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 en su lugar, puedes pasar a pensar en el contenido.
Un elemento que es especialmente adecuado para manejar mucho contenido es core-list.
El core-list se puede conectar a una fuente de datos (básicamente, un array de objetos) y, para cada elemento del array, estampará una instancia de plantilla. Dentro de la plantilla, puedes aprovechar la potencia del sistema de vinculación de datos de Polymer para conectar tu contenido rápidamente.
Transiciones
Con las distintas secciones de tu app diseñadas e implementadas, la siguiente tarea es descubrir cómo navegar entre ellas.
Aunque aún es un elemento experimental, core-animated-pages proporciona un sistema de animación conectable que se puede usar para realizar transiciones entre diferentes estados de tu aplicación.
Sin embargo, la animación es solo la mitad del rompecabezas, ya que una aplicación debe combinar esas animaciones con un router para administrar correctamente sus URLs.
En el mundo de los componentes web, el enrutamiento se presenta en dos versiones: imperativa y declarativa. Combinar core-animated-pages con cualquiera de los enfoques puede ser válido según las necesidades de tu proyecto.
Un router imperativo (como Director de Flatiron) puede detectar una ruta coincidente y, luego, ordenarle a core-animated-pages que actualice el elemento seleccionado.
Esto puede ser útil si necesitas realizar alguna tarea después de que una ruta coincida y antes de que se realice la transición a la siguiente sección.
Por otro lado, un router declarativo (como app-router) puede combinar el enrutamiento y core-animated-pages en un solo elemento, por lo que la administración de ambos se vuelve más eficiente.
Si deseas tener un control más detallado, puedes consultar una biblioteca como more-routing, que se puede combinar con core-animated-pages mediante la vinculación de datos y, posiblemente, te brinde lo mejor de ambos mundos.
Rendimiento
A medida que tu aplicación toma forma, debes estar atento a los cuellos de botella de rendimiento, en especial, 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 mejora de rendimiento sencilla se obtiene cuando se cargan condicionalmente los polyfills de Web Components.
No hay razón para incurrir en todo ese costo si la plataforma ya tiene compatibilidad total. En cada versión del nuevo repositorio webcomponents.js, los polyfills también se dividieron en archivos independientes. Esto es útil si deseas cargar condicionalmente un subconjunto de los 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 obtienen ganancias de red significativas cuando se ejecutan todas tus importaciones de HTML a través de una herramienta como Vulcanize.
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, crear una app con un 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, en realidad no es una app para dispositivos móviles. Actualmente, puedes usar la muy criticada caché de aplicaciones para que tus recursos funcionen sin conexión, pero, en el futuro, el service worker debería mejorar mucho la experiencia de desarrollo sin conexión.
Jake Archibald publicó recientemente un increíble libro de recetas de patrones de service worker, pero te daré una guía de inicio rápido para que comiences:
Instalar un trabajador de servicio es muy fácil. Crea un archivo worker.js y regístralo cuando se inicie la aplicación.
Es importante que ubiques tu worker.js en la raíz de la aplicación. Esto le permite interceptar solicitudes de cualquier ruta de acceso de la app.
En el controlador de instalación del trabajador, almaceno en caché una gran cantidad de recursos (incluidos los datos que potencian la app).
Esto permite que mi app proporcione al menos una experiencia de resguardo al usuario si accede a ella sin conexión.
¡Adelante!
Los componentes web son una gran incorporación a la plataforma web y aún están en pañales. A medida que se lancen en más navegadores, dependerá de nosotros, la comunidad de desarrolladores, descubrir las prácticas recomendadas para estructurar nuestras aplicaciones. Las soluciones anteriores nos brindan un punto de partida, pero aún queda mucho por aprender. ¡Adelante, a crear mejores apps!