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 azúcar sintáctico conveniente para facilitar la compilación de componentes web. Por último, estamos creando un conjunto de elementos de IU y de utilidad para reutilizar en tus apps. En la Chrome Dev Summit de 2013, me sumergí en las diferentes partes de Polymer y la filosofía detrás de nuestro mantra "Todo es un elemento".
Diapositivas: http://html5-demos.appspot.com/static/cds2013/index.html
"Todo es un elemento" (desde <select> hasta elementos personalizados)
Diapositivas: 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 unos pocos elementos a nuestra disposición. ¿La parte poderosa?…Todo era declarativo. Era muy sencillo crear una página, agregar controles de formulario y crear una "app" sin escribir grandes cantidades de JavaScript.
Tomemos el humilde elemento <select>. Hay una gran cantidad de funciones integradas en el elemento, simplemente declarándolo:
- Se puede personalizar con 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 cosas 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 inventara 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 estamos adoptando 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 podría ser un elemento:
<my-app></my-app>
Cómo compilar componentes web con la salsa especial de Polymer
Diapositivas: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer contiene una serie de ventajas para compilar aplicaciones basadas en componentes web:
- Registro de elementos declarativos:
<polymer-element> - Herencia declarativa:
<polymer-element extends="..."> - Vinculación de datos declarativa en dos direcciones:
<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/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
Diapositivas: http://html5-demos.appspot.com/static/cds2013/index.html#26
Sería negligente si no mencionara los estándares detrás de los componentes web. Después de todo, Polymer se basa en estas APIs fundamentales en constante evolución.
Estamos en el umbral de un momento muy emocionante en el desarrollo web. A diferencia de otras funciones nuevas que se agregan a la plataforma web, las APIs que componen los componentes web no son llamativas ni están orientadas al usuario. Son puramente para la productividad de los desarrolladores. Cada una de las cuatro APIs principales es útil por sí sola, pero, juntas, hacen magia.
- 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 para un paquete de CSS, JS y HTML.
- Plantillas: Creación de plantillas de DOM adecuadas para definir fragmentos inertes de lenguaje de marcado que se estamparán más adelante
Si quieres obtener más información sobre los aspectos básicos de las APIs, consulta webcomponents.org.