Webcomponents y Polymer 2. ¿Que es?. Parte 1

Web Components y Google Polymer 2

Web Components esta formado por diferentes tecnologías, y podemos definir como ‘widgets’ reusables. Los Web Components estas creados con HTML, CSS y Javascript, por lo tanto no necesitan bibliotecas externas para su funcionamiento. Un Web Component puede ser usado sin escribir código, simplemente añadiendo una sentencia para importarlo en una página HTML.

Con Web Components, puedes hacer casi cualquier cosa que se pueda hacer con HTML, CSSJavaScript, ademas puede ser un componente portable que puede ser reutilizado fácilmente.

Web Components no es Polymer (Google), ya que este ultimo es una librería basada en tecnologías Web Components. Puedes perfectamente hacer y usar Web Components sin Polymer.

En estos momentos los Web Components no están soportados por todos los navegadores, para los navegadores que no tienen soporte completo se puede usar polyfills.

Hay disponibles polyfills en el proyecto Google Polymer . Para saber que navegadores implementan Web Components puede visitar este enlace.

Web Components consiste en estas cuatro tecnologías, aunque cada una puede usarse por separado:

Web Components define los siguientes artículos:

  • Elementos HTML nuevos: <template> <shadow>. Se han eliminado <element>, <content> y <decorator>.
  • Las interfaces de la API asociada para los nuevos elementos: HTMLTemplateElement, HTMLContentElement (Eliminado de la especificación) y HTMLShadowElement.
  • Extensiones a la interfaz HTMLLinkElement y al elementos <link>.
  • Una API para registrar custom elements, document.registerElement() y modificaciones en document.createElement() document.registerElementNS().
  • Nuevos «lifecycle callbacks» pueden ser añadidos al prototipo en el que está basado un custom element.
  • Una nueva pseuda-clase CSS para dar estilo a elementos por defecto, :unresolved.
  • El Shadow DOMShadowRoot Element.createShadowRoot(), Element.getDestinationInsertionPoints(), Element.shadowRoot.
  • Una extensión a la interfaz Event, Event.path.
  • Extensiones a la interfaz Document.
  • Para dar estilo a Web Components:
    • Nuevas pseudo-clases: :host, :host(), :host-context().
    • Nuevos pseudo-elementos: ::shadow ::content.
    • Un nuevo combinador, /deep/.

¿Que es Polymer?

Polymer es una librería que nos permite desarrollar proyectos web basados en los estándares de Web Components de forma fácil y rápida. Actualmente se encuentra en la versión 3, pero en este articulo y en los ejemplos usaremos Polymer en su versión 2.

Polymer 1.x se basa en ES5 y Web Components V0, por el contrario Polymer 2.0 usa las características y las mejoras de ES6.

El core de Polymer 2 pesa 12 kb (1/4 del tamaño de Polymer 1.x) y sus componentes se integran mas fácilmente con otros frameworks.

Se realizan todas las declaraciones por clases de ES6, y ademas existe un modo híbrido para migrar entre Polymer 1.x y Polymer 2.

Los Web Components V1 de Polymer ofrecen:

  • Render de templates en el Shadow Dom
  • Propagación de estados:
    • Binding de 1 dirección usando [[]]
    • Binding de 2 direcciones usando {{}}
  • Sincronización de atributos (etiquetas de los componentes) a las propiedades (dentro de los componentes)

En https://www.webcomponents.org puedes encontrar muchos componentes creados por el equipo de Polymer y la comunidad.

Flujo de trabajo

Para usar Polymer vamos a instalar el interface de linea de comandos (CLI) de Polymer. 

npm i -g polymer-cli

Una vez instalada la linea de comando de Polymer podemos iniciar un proyecto usando los siguientes comandos:

polymer init -> Para iniciar un proyecto con un esqueleto ya definido

polymer serve -> Para montar un servidor y poder probar los componentes

En el caso que no quisiéramos usar un esqueleto de los que ofrece Polymer podemos usar solamente la librería usando Bower. Bower es un gestor de dependencias que se usa para descargar las dependencias necesarias o que necesitemos para desarrollar con Polymer.

En la versión de 3 de Polymer posiblemente se use yarm como gestor de dependencias. Para poder iniciar un proyecto necesitamos tener un fichero llamado bower.json, que sera donde se definen las características y las dependencias necesarias.

Con los siguientes comandos iniciamos creamos el fichero bower.json y la descarga de la librería:

bower init -> Creamos el archivo bower.json

bower install –save polymer -> Descargamos las dependencias.