Chrome Dev Summit: componentes declarativos, encapsulados y reutilizables de Polymer

Polymer es una puerta de enlace al increíble futuro de Web Components. Queremos facilitar el consumo y la compilación de elementos personalizados. Durante el último año, el equipo ha estado trabajando duro en un conjunto de polyfills para las especificaciones en constante evolución. Además, creamos una biblioteca de código adicional conveniente para facilitar la compilación de componentes web. Por último, crearemos un conjunto de elementos de IU y de utilidad para reutilizar en tus apps. En la Cumbre de desarrollo de Chrome de 2013, profundicé 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 poderoso. Solo teníamos unos pocos elementos a nuestra disposición. Lo importante es que todo fue declarativo. Fue muy sencillo crear una página, agregar controles de formularios y crear una "aplicación" sin escribir glúteos de JavaScript.

Tomemos el elemento sencillo <select>. Hay muchísima funcionalidad integrada en el elemento, con solo declararlo:

  • Se puede personalizar mediante atributos HTML
  • Renderiza elementos secundarios (p.ej., <option>) con una IU predeterminada, pero configurable mediante atributos.
  • Es ú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 que pueda regresar a este apogeo del desarrollo web. Uno en el que podemos crear elementos nuevos, que recuerda a <select>, pero diseñado para los casos de uso de 2014. Por ejemplo, si AJAX se inventara hoy, es probable que sea 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 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 aplicaciones web monolíticas basadas en JavaScript, creemos elementos reutilizables. Con el tiempo, toda una app se crea a partir de la composición de elementos más pequeños juntos. Toda la app podría ser un elemento:

<my-app></my-app>

Cómo crear 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 bidireccional declarativa: <input id="input" value="">
  • Controladores de eventos declarativos: <button on-click=""
  • Propiedades publicadas: xFoo.bar = 5 <-> <x-foo bar="5">
  • Observación de propiedades: barChanged: function() {...}
  • PointerEvents / PointerGestures de forma predeterminada

La moraleja de la historia es que escribir elementos de Polymer tiene que ver con ser declarativos. 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 evolución.

Estamos en la cima de una época 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 brillantes ni están orientadas a los usuarios. Son exclusivamente para la productividad de los desarrolladores. Cada una de las cuatro APIs principales son útiles por sí solas, pero juntas, ¡ocurren cosas mágicas!

  1. Shadow DOM: Estilo y encapsulamiento del DOM
  2. Elementos personalizados: Define nuevos elementos HTML. Ofréceles una API con propiedades y métodos.
  3. Las importaciones de HTML son el modelo de distribución de un paquete de CSS, JS y HTML.
  4. Plantillas: Plantillas de DOM adecuadas para definir fragmentos inertes de lenguaje de marcado que se cerrarán más adelante.

Si quieres obtener más información sobre los aspectos básicos de las APIs, visita webcomponents.org.