Polymer es una puerta de entrada al increíble futuro de los componentes web. Queremos que sea fácil consumir y compilar elementos personalizados. Durante el último año, el equipo trabajó arduamente en un conjunto de polyfills para las especificaciones en evolución. Además, creamos una biblioteca de expansión conveniente para facilitar la compilación de componentes web. Por último, crearemos un conjunto de elementos de IU y utilidad para reutilizar en tus apps. En la Chrome Dev Summit de 2013, analicé las diferentes partes de Polymer y la filosofía detrás de nuestro mantra "Todo es un elemento".
Presentaciones: http://html5-demos.appspot.com/static/cds2013/index.html
“Todo es un elemento” (de <select> a elementos personalizados)
Presentaciones: http://html5-demos.appspot.com/static/cds2013/index.html#6
Crear páginas web en la década de 1990 era limitado, pero potente. Solo teníamos algunos elementos a nuestra disposición. ¿La parte más potente?…Todo era declarativo. Fue muy sencillo crear una página, agregar controles de formulario y crear una "app" sin escribir mucho código JavaScript.
Tomemos el humilde elemento <select>. El elemento tiene muchas funciones integradas, simplemente con declararlo:
- Se pueden personalizar mediante atributos HTML
- Renderiza elementos secundarios (p.ej.,
<option>) con una IU predeterminada, pero configurable a través de atributos. - Útil en otros contextos, como
<form> - Tiene una API de DOM: propiedades y métodos
- Activa eventos cuando ocurren eventos interesantes
Los componentes web proporcionan las herramientas para volver a este apogeo del desarrollo web. Uno en el que podamos crear elementos nuevos, que recuerden a <select>, pero diseñados para los casos de uso de 2014. Por ejemplo, si AJAX se hubiera inventado hoy, probablemente sería una etiqueta HTML (ejemplo):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
O elementos responsivos que vinculan datos a un atributo queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Este es exactamente el enfoque que adoptamos en Polymer. En lugar de compilar apps web monolíticas basadas en JavaScript, crearemos elementos reutilizables. Con el tiempo, una app completa crece a partir de la composición de elementos más pequeños. Incluso, una app completa puede ser un elemento:
<my-app></my-app>
Cómo compilar componentes web con la salsa especial de Polymer
Presentaciones: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer contiene una serie de comodidades para compilar aplicaciones basadas en componentes web:
- Registro de elementos declarativos:
<polymer-element> - Herencia declarativa:
<polymer-element extends="..."> - Vinculación de datos en dos direcciones declarativa:
<input id="input" value=""> - Controladores de eventos declarativos:
<button on-click="" - Propiedades publicadas:
xFoo.bar = 5<-><x-foo bar="5"> - Observación de la propiedad:
barChanged: function() {...} - PointerEvents o PointerGestures de forma predeterminada
La moraleja de la historia es que escribir elementos de Polymer se trata de ser declarativo. Cuanto menos código tengas que escribir, mejor ;)
Componentes web: el futuro del desarrollo web
Presentaciones: http://html5-demos.appspot.com/static/cds2013/index.html#26
No sería correcto si no mencionara los estándares detrás de los componentes web. Después de todo, Polymer se basa en estas APIs fundamentales en evolución.
Estamos en un momento muy emocionante para el desarrollo web. A diferencia de otras funciones nuevas que se agregan a la plataforma web, las APIs que conforman los componentes web no son llamativas ni están orientadas al usuario. Se usan solo para la productividad de los desarrolladores. Cada una de las cuatro APIs principales es útil por sí sola, pero juntas, ¡ocurren cosas mágicas!
- Shadow DOM: Encapsulamiento de estilo y DOM
- Elementos personalizados: Define nuevos elementos HTML. Proporcionarles una API con propiedades y métodos
- Las importaciones de HTML son el modelo de distribución de un paquete de CSS, JS y HTML.
- Plantillas: Plantillas de DOM adecuadas para definir fragmentos inertes de marcado que se eliminarán más adelante
Si quieres obtener más información sobre los aspectos básicos de las APIs, consulta webcomponents.org.