Polymer es una entrada al increíble futuro de los componentes web. Queremos facilitar el consumo y la creación de elementos personalizados. Durante el último año, el equipo trabajó duro en un conjunto de polyfills que cumplen con las especificaciones en constante evolución. Además de eso, creamos una biblioteca de azúcar conveniente para facilitar la compilación de componentes web. Por último, crearemos un conjunto de elementos de IU y utilidades para reutilizar en tus apps. En la Chrome Dev Summit 2013, profundicé en las diferentes partes de Polymer y en la filosofía detrás de nuestra iniciativa "Todo es un elemento". mantra.
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 los años 90 era una tarea limitada, pero poderosa. Teníamos pocos elementos a nuestra disposición. ¿Lo más importante?...todo era declarativo. Fue muy sencillo crear una página, agregar controles de formularios y crear una "aplicación" sin escribir músculos de JavaScript.
Tomemos el elemento <select> humilde. Hay una gran cantidad de funcionalidades integradas en el elemento con solo declararlo:
- Personalizable a través de atributos HTML
- Renderiza elementos secundarios (p.ej.,
<option>) con una IU predeterminada, pero se puede configurar mediante atributos. - Útil en otros contextos, como
<form> - Tiene una API de DOM: propiedades y métodos
- Activa eventos cuando sucede algo interesante
**Los componentes web proporcionan las herramientas para volver a este apogeo del desarrollo web. Una en la que podemos crear elementos nuevos, que recuerdan a <select>, pero diseñados para casos de uso de 2014. Por ejemplo, si AJAX se inventó hoy, probablemente sería una etiqueta HTML (ejemplo):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
O bien elementos responsivos que se vinculan con datos a un atributo queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…Este es exactamente el enfoque que estamos adoptando en Polymer. En lugar de compilar apps web monolíticas basadas en JavaScript, creemos elementos reutilizables. Con el tiempo, una app completa crece a partir de la composición de elementos más pequeños. Bueno, una app completa podría ser un elemento:
<my-app></my-app>
Creación de 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 crear aplicaciones basadas en componentes web:
- Registro de elementos declarativos:
<polymer-element> - Herencia declarativa:
<polymer-element extends="..."> - Vinculación de datos declarativa bidireccional:
<input id="input" value="{{foo}}"> - Controladores de eventos declarativos:
<button on-click="{{handleClick}}"> - Propiedades publicadas:
xFoo.bar = 5<-><x-foo bar="5"> - Observación de propiedades:
barChanged: function() {...} - PointerEvents / PointerGestoss de forma predeterminada
La moraleja de la historia es que la escritura de elementos de Polymer se trata de ser declarativo. Cuanto menos tengas que escribir, mejor ;)
Componentes web: el futuro del desarrollo web
Diapositivas: http://html5-demos.appspot.com/static/cds2013/index.html#26
Sería un malo 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.
Se avecina 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 relucientes ni están dirigidas al usuario. Solo se dedican a la productividad del desarrollador. Cada una de las cuatro APIs principales es útil por sí sola, pero juntos suceden cosas mágicas.
- Shadow DOM: estilo y encapsulamiento del DOM
- Elementos personalizados: Define nuevos elementos HTML. Proporciónales una API con propiedades y métodos.
- Importaciones de HTML es el modelo de distribución para un paquete de CSS, JS y HTML.
- Plantillas: plantillas de DOM adecuadas para definir fragmentos inertes de lenguaje de marcado que se sellarán más adelante.
Si quieres obtener más información sobre los aspectos básicos de las APIs, consulta ebidel.github.com/webcomponents.