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:
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:
- Cómo compilar aplicaciones web con Yeoman y Polymer
- Cómo concatenar componentes web con Vulcanize
- Chrome Dev Summit: Componentes declarativos, encapsulados y reutilizables de Polymer
- Panorama de la automatización del desarrollo
- Componentes web: el futuro del desarrollo web
- Cómo compilar apps con el flujo de trabajo de Yeoman