Yo Polymer: un recorrido por Whirlwind por las herramientas de componentes web

Los componentes web cambiarán todo lo que crees saber sobre la compilación para la Web. Por primera vez, la Web tendrá APIs de bajo nivel que nos permitirán no solo crear nuestras propias etiquetas HTML, sino también encapsular la lógica y el CSS. No más sopa de hojas de estilo globales ni código de plantilla. Es un mundo nuevo y maravilloso en el que todo es un elemento.

En mi charla de DotJS, explico lo que ofrecen los componentes web y cómo compilarlos con herramientas modernas. Te mostraré Yeoman, un flujo de trabajo de herramientas para optimizar la creación de apps web con Polymer, una biblioteca de polyfills y sintaxis enriquecida para desarrollar apps con componentes web en navegadores modernos en la actualidad.

Crea elementos personalizados y, luego, instálalos

En esta charla, aprenderás lo siguiente:

  • Acerca de las cuatro especificaciones diferentes que componen los componentes web: elementos personalizados, plantillas, Shadow DOM y importaciones de HTML.
  • Cómo definir tus propios elementos personalizados y, luego, instalar elementos creados por otras personas con Bower
  • Dedica menos tiempo a escribir JavaScript y más a la construcción de páginas
  • Usa herramientas de frontend modernas (Yeoman) para crear un andamiaje de una aplicación con Polymer con generator-polymer
  • Cómo Polymer cambia la creación de componentes web

Por ejemplo, para instalar los polyfills de componentes web de Polymer y la biblioteca en sí, puedes ejecutar este comando de una sola línea:

bower install --save Polymer/platform Polymer/polymer

Esto agrega una carpeta bower_components y los paquetes anteriores. --save los agrega al archivo bower.json de tu app.

Más adelante, si quieres instalar el elemento acordeón de Polymer, puedes ejecutar lo siguiente:

bower install --save Polymer/polymer-ui-accordion

y, luego, impórtalo en tu aplicación:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

Para ahorrar tiempo, puedes crear un andamiaje de una nueva app de Polymer con todas las dependencias que necesitas, el código de plantilla y las herramientas para optimizarla con Yeoman con este otro comando de una sola línea:

yo polymer

Explicación de la bonificación

También grabé una explicación adicional de 30 minutos de la app de Polymer Jukebox que muestro en la charla.

Contenido del video adicional:

  • Qué significa el mantra "todo es un elemento"
  • Cómo usar Bower para instalar los elementos y polyfills de Platform de Polymer
  • Creación de andamios para nuestra app de Jukebox con el generador y los subgeneradores de Yeoman
  • Comprende las funciones de la plataforma estructuradas a través de un modelo
  • Cómo porté funcionalmente una app de Angular a Polymer

También usamos subgeneradores de Yeoman para crear andamiajes para nuestros nuevos elementos de Polymer. p. ej., para crear el modelo de texto para un elemento foo, ejecutamos lo siguiente:

yo polymer:element foo

que nos preguntará si queremos que el elemento se importe automáticamente, si se requiere un constructor y algunas otras preferencias.

Las fuentes más recientes de la app que se muestran en ambas charlas ya están disponibles en GitHub. Lo refactoricé un poco más para que esté más organizado y sea un poco más fácil de leer.

Vista previa de la app:

Vista previa de la app de Yo Polymer

Lecturas adicionales

En resumen, Polymer es una biblioteca de JavaScript que habilita los componentes web ahora en navegadores web modernos mientras esperamos que se implementen de forma nativa. Las herramientas modernas pueden ayudarte a mejorar tu flujo de trabajo con ellas. Te recomendamos que pruebes Yeoman y Bower cuando desarrolles tus propias etiquetas.

Estos son otros artículos que vale la pena consultar sobre el tema: