En los últimos tiempos, Polymer y los componentes web son temas muy populares y, como este ecosistema evoluciona rápidamente, a menudo puede ser difícil para los desarrolladores mantenerse al tanto de todos los cambios más recientes.
En su charla en Chrome Dev Summit, Matt McNulty, gerente de Ingeniería del equipo de Polymer, explicó qué es Polymer y también describió la hoja de ruta de Polymer 1.0.
¿Qué es Polymer?
Primero, ¿qué es exactamente Polymer?
Polymer es una biblioteca que te ayuda a compilar elementos y apps a partir de componentes web. Los componentes web son un conjunto de estándares nuevos de vanguardia que permiten a los desarrolladores extender el vocabulario HTML con sus propios elementos personalizados.
Debido a que los componentes web están diseñados para ser una primitiva nueva para el navegador, significa que son muy potentes, pero también de muy bajo nivel, y trabajar con ellos requiere bastante código.
Polymer facilita el trabajo con componentes web, ya que “simplifica” la sintaxis. Reduce la cantidad de código estándar que debes escribir y agrega un estilo declarativo para que crear componentes web sea tan fácil como escribir HTML.
El experimento de polímeros
Polymer comenzó como un experimento para ver si podíamos realizar un polyfill de los estándares de componentes web y obtener comentarios de los desarrolladores antes de que estas tecnologías se lanzaran en todos los navegadores. A medida que más desarrolladores comenzaron a usar Polymer, dejó de ser solo un polyfill para convertirse en una biblioteca real llena de funciones de productividad (vinculación de datos, observadores de cambios de atributos, búsqueda automática de nodos, etc.). Pero todos los experimentos tienen resultados, así que ¿cómo lo hicimos?
Si bien muchos desarrolladores dijeron que les gustaba la expresividad y las ganancias de productividad de trabajar con componentes web en Polymer, también expresaron su preocupación por el rendimiento y la complejidad general.
Destaca una tensión natural que Polymer tuvo desde el principio: ser un experimento para impulsar la plataforma web, pero también crear algo apto para la producción del que los desarrolladores puedan depender.
Próximos cambios
El equipo de Polymer analizó en detalle cada función de la biblioteca con el objetivo de crear una versión más liviana y lista para producción que los desarrolladores puedan usar con confianza.
Capas
Polymer se refactorizó en una serie de capas. Las funciones principales son rápidas y eficientes, mientras que las más avanzadas serán opcionales. En la mayoría de los casos de uso, las funciones principales deberían cubrir las necesidades de los desarrolladores.
Vinculación de datos simplificada
El sistema de vinculación de datos de Polymer también se optimizó significativamente para mejorar el rendimiento. Siguiendo el enfoque en capas, la vinculación de dos vías ahora es opcional, y la predeterminada es la vinculación de una sola vía. Además, los tipos de propiedades publicadas se volvieron explícitos y un cambio de propiedad ahora activa un evento para ayudar a que los elementos de diferentes bibliotecas se comuniquen con mayor facilidad.
Shadow DOM más liviano
El polyfill de Shadow DOM es una hazaña de ingeniería increíble. Se diseñó para ser integral y cumplir con las especificaciones, lo que es importante para probar en detalle la primitiva de la plataforma, pero, lamentablemente, presenta una serie de cuellos de botella de rendimiento para las funciones que Polymer no usa.
La próxima versión de Polymer adoptará un enfoque diferente y empleará una capa de tipo shim que solo agrega un polyfill a lo que necesita Polymer.
El polyfill existente seguirá disponible para los componentes web genéricos que no sean de Polymer.
Transición a webcomponents.org
A propósito de los polyfills, también tendrán un nuevo hogar. Actualmente, muchos desarrolladores tienen dudas sobre la relación entre Polymer y los componentes web. Algunos piensan que debes usar todo Polymer para usar componentes web, cuando, en realidad, solo necesitas los polyfills.
Para que esta distinción sea más clara, los polyfills se trasladarán a webcomponents.org y ahora se llamarán webcomponents.js.
Este cambio está diseñado para ayudar a otros autores de bibliotecas a aprovechar los polyfills sin confusiones. El equipo de Polymer seguirá contribuyendo con los polyfills, pero esperamos que este cambio los convierta en un recurso más compartido para la comunidad.
Resultados
Entonces, ¿cuáles son los resultados de todos estos cambios?
Velocidad
En Chrome, Polymer ahora es 5 veces más rápido, y en Safari se produjo una aceleración de 8 veces.
Tamaño del archivo
El tamaño del archivo también se redujo en un 87%, de 123 KB a 15 KB (6 KB comprimidos con gzip).
Hoja de ruta
Habrá algunos cambios rotundos en la API en la próxima versión, que se indicarán con el nuevo número de versión (0.8), pero el equipo quiere dejar en claro que no se trata de una reescritura. Mover tu proyecto actual de Polymer 0.5 a 0.8 debería ser bastante sencillo.
El equipo de Polymer también describió una hoja de ruta para brindarles a los desarrolladores más claridad sobre las próximas versiones.
La versión preliminar 0.8 ya está disponible como una rama en GitHub (aunque aún se está desarrollando de forma muy activa y carece de documentación). La versión beta oficial 0.9 está programada para el primer trimestre de 2015, y la 1.0 se lanzará en algún momento del segundo trimestre.
Final del experimento
Con todos los cambios recientes en Polymer, el equipo detrás de él está sentando las bases para que los componentes web se conviertan en una parte integral de la pila de cada desarrollador. Si es la primera vez que usas Web Components, este es un buen momento para familiarizarte con estas tecnologías transformadoras. Si ya trabajas con componentes (y Polymer), el futuro se ve prometedor. Consulta el blog de Polymer para ver todas las actualizaciones más recientes y regístrate en la lista de distribución de Polymer si tienes preguntas o comentarios. ¡Que disfrutes de los nuevos trucos!