Durante el año anterior, el equipo de Polymer dedicó mucho tiempo a enseñar a los desarrolladores a crear sus propios elementos. Esto ha conducido a un ecosistema de rápido crecimiento, impulsado en gran parte por los elementos Core y Paper de Polymer, así como por 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 la creación de 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?
En Chrome Dev Summit, intenté responder estas preguntas creando una pequeña aplicación de contactos y analizando el proceso que realicé para compilarla. Esto es lo que se me ocurrió:
Estructura
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 central y el botón de ícono de papel...
A través del poder de la composición, combínalas con cualquier cantidad de elementos para crear un andamiaje de aplicaciones.
Una vez que tengas un andamiaje genérico implementado, 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 permiten crear experiencias muy diferentes y, al mismo tiempo, aprovechar las mismas primitivas de compilación de apps. Con una estructura básica, puedes pasar a pensar en el contenido.
Un elemento que es especialmente adecuado para tratar con mucho contenido es el core-list.
core-list se puede conectar a una fuente de datos (básicamente un array de objetos) y, por cada elemento del array, marcará una instancia de plantilla. Dentro de 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.
Si bien aún 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.
Pero la animación es solo la mitad del rompecabezas: una aplicación necesita combinar esas animaciones con un router para administrar sus URL de forma correcta.
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álida según las necesidades de tu proyecto.
Un router imperativo (como Flatiron's Director) puede escuchar una ruta coincidente y, luego, indicarle a core-animated-pages que actualice el elemento seleccionado.
Esto puede ser útil si necesitas realizar algunas tareas después de que coincida una ruta y antes de que se realice la transición de 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 optimizada.
Si deseas un control más detallado, puedes consultar 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 vigilar los cuellos de botella de rendimiento, en especial, cualquier elemento asociado con la red, ya que suele ser la parte más lenta de una aplicación web móvil.
Una forma sencilla de mejorar el rendimiento es cargar condicionalmente los polyfills de los componentes web.
No hay razón para incurrir en todos esos costos si la plataforma ya cuenta con asistencia completa. En cada lanzamiento 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 ganancias de red significativas al ejecutar todas tus importaciones HTML a través de una herramienta como Vulcanize.
Vulcanize concatenará tus importaciones en un solo paquete, lo que reducirá de manera significativa la cantidad de solicitudes HTTP que realiza tu app.
Sin conexión
Pero el simple hecho de compilar una app de 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, entonces no es realmente una app para dispositivos móviles. En la actualidad, puedes usar la caché de aplicaciones altamente mal alineada para desconectar tus recursos sin conexión, pero, de cara al futuro, el service worker pronto debería hacer que la experiencia de desarrollo sin conexión sea mucho mejor.
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:
Instalar un service worker 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 tu aplicación, ya que esto le permitirá interceptar solicitudes de cualquier ruta de acceso en tu app.
En el controlador de instalación del trabajador, guardo en caché una gran cantidad de recursos (incluidos los datos de 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 un gran aporte para la plataforma web y se encuentran en su infancia. A medida que llegan a más navegadores, depende de nosotros, la comunidad de desarrolladores, determinar las prácticas recomendadas para estructurar nuestras aplicaciones. Las soluciones anteriores nos dan un punto de partida, pero todavía hay mucho más por aprender. ¡Avancemos a la creación de mejores apps!