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

Addy Osmani
Addy Osmani

Los componentes web cambiarán todo lo que crees saber sobre el desarrollo 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 las CSS. Ya no más sopa de hojas de estilo global ni código estándar. Es un mundo nuevo y audaz, en el que todo es un elemento.

En mi charla de DotJS, explico lo que los componentes web tienen para ofrecer 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 azúcar para desarrollar apps con componentes web en navegadores modernos.

Crea elementos personalizados e instala elementos creados por otras personas

En esta charla, aprenderás lo siguiente:

  • Información acerca de las cuatro especificaciones que componen los componentes web: Elementos personalizados, Plantillas, Shadow DOM y importaciones HTML
  • Cómo definir tus propios elementos personalizados e instalar elementos creados por otras personas con Bower
  • Dedica menos tiempo a escribir código JavaScript y más a crear páginas
  • Usa herramientas de frontend modernas (Yeoman) para el andamiaje de una aplicación usando Polymer con generator-polymer
  • Cómo Polymer realiza cambios avanzados en la creación de componentes web

Por ejemplo, para instalar polyfills de Polymer's Web Component y la propia biblioteca, puedes ejecutar este revestimiento:

bower install --save Polymer/platform Polymer/polymer

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

Más adelante, si quisieras instalar el elemento de acordeón de Polymer, podrías ejecutar lo siguiente:

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

y, luego, impórtalos a tu aplicación:

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

Para ahorrar tiempo, armar el andamiaje de una nueva app de Polymer con todas las dependencias que necesitas, el código estándar y las herramientas para optimizar tu app se pueden realizar con Yeoman con este otro texto:

yo polymer

Explicación adicional

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

Esto es lo que se incluye en el video adicional:

  • Qué significa el mantra “todo es un elemento”
  • Cómo usar Bower para instalar elementos y polyfills de Polymer’s Platform
  • Cómo armar el andamiaje de nuestra app de Rocola con el generador y los subgeneradores Yeoman
  • Comprender las funciones de la plataforma acompañadas de código estándar
  • Cómo realicé la portabilidad de una app de Angular a Polymer

También usamos los subgeneradores de Yeoman para el andamiaje de nuestros nuevos elementos de Polymer, p. ej., para crear el código estándar de un elemento foo que ejecutamos:

yo polymer:element foo

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

Las fuentes más recientes de la app que se muestra en ambas charlas ya están disponibles en GitHub. La refactoricé un poco más para que esté más organizada y sea 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 componentes web en navegadores web modernos mientras esperamos que se implementen de forma nativa. Las herramientas modernas pueden ayudar a mejorar tu flujo de trabajo con ellas. Es posible que te guste probar Yeoman y Bower cuando desarrolles tus propias etiquetas.

Otros artículos que vale la pena investigar sobre el tema: