Polymer

Charla Polymer en 3er Betabeers Guadalajara

Recientemente tuve el privilegio de poder exponer una charla sobre Polymer en la tercera edición de Betabeers Guadalajara @betabeersGUADA, que es el capítulo alcarreño del conocido evento de desarrolladores, startupters y cervezas español.

La iniciativa de Guadalajara no podría llevarse a cabo sin la gente de Beperk (@beperk), a los que agradezco enormemente la organización de estos eventos. No es fácil en una ciudad pequeña y tan influenciada por Madrid reunir a los pocos e incomunicados desarrolladores que dormimos en las afueras de la Alcarria y encima que nos lo pasemos bien y nos vayamos conociendo. Seguro que con el tiempo sale algo grande de ahí, aunque ya de momento merece mucho la pena.

Algunas de las cosas que pasaron en la charla se pueden revisitar en este hastag:#bbGuada y en el twitter oficial de @betabeersGUADA

Un señor presentando Polymer

Gracias por la foto @SergioCC14

Volviendo al tema de Polymer…

En la charla pude desarrollar en vivo los conceptos que expuse en un post de este mismo Blog sobre la introducción a Polymer. Puedes encontrar el ejemplo práctico paso a paso en este enlace: Introducción a Polymer

También (y sobre todo) recomiendo la página oficial del proyecto Polymer (https://www.polymer-project.org/, que es tremendamente didáctica. Además de la documentación clásica, se incluyen ejemplos paso a paso muy sencillos de seguir. En la sección de Vídeos puedes ver las presentaciones de Google I/O 2013 y 2014, que son maravillosas y lo explican todo muy fácil (además en un inglés muy clarito). Finalmente también recomiendo la página oficial de WebComponents (http://webcomponents.org/) donde se puede abstraer un nivel más arriba de Polymer y consultar las novedades y artículos sobre este conjunto de estándares para HTML5. Las secciones Articles y Presentations son imprescindibles.

Las transparencias de la presentación y comentarios (escritos con el tono coloquial de presentación y no de redacción -perdón por las expresiones-) aparecen a continuación:

Polymer - Betabeers1

Hola a todos, gracias por venir y gracias a los organizadores de Beperk que hace esta charla posible.

Mi nombre es Alberto Moratilla y os voy a hablar de una tecnología que probablemente sea protagonista en los pŕoximos años en el desarrollo Web: Polymer y los WebComponents.

Esta charla surgió por una entrada que escribí en mi blog, que utilizo para explorar tecnologías que no tengo la oportunidad de explorar en mi vida profesional y conviene conocer para no quedarse atrás. No siempre uno puede utilizar las tecnologías que más le gustan sobre todo si son demasiado novedosas como es el caso de Polymer.

Por tanto no soy ningún experto en Polymer, y tampoco creo que abunden porque está todavía en fase expertimental (aún va por la versión 0.5.0 si no recuerdo mal), asi que espero no meter mucho la pata.

Polymer - Betabeers2

En los últimos tiempos se está produciendo un trasvase de funcionalidad desde el back-end al front-end. Hasta hace poco tiempo se procuraba que la lógica de la aplicación residiera en el servidor, utilizando el cliente para la visualización de la información e interacción básica que desencadenaba acciones que se llevaban a cabo en el servidor. En frameworks como JSF, Struts o Spring MVC el programador acaba creando páginas en servidor que son procesadas para ser enviadas al cliente sobre las que no se suele ejercer un control final.

Con la aparición de HTML5 con sus API y la mejora de JavaScript (ECMAScript), y de los intérpretes de los navegadores, en especial gracias al motor V8 de Google, se está trasladando el protagonismo de la aplicación hacia el navegador: aplicaciones en navegador potentes que se comunican con el servidor para el intercambio de datos (servicios REST) usando AJAX y JSON. Es lo que se conoce como Single Page Application o Web Application: una página Web HTML que contiene bibliotecas JavaScript que le permiten capacidades de comunicación con el servidor y de manipulación del DOM para crear una experiencia de usuario superior. De este modo el servidor queda para implementar la lógica de negocio y proveer de unos puntos de acceso a información utilizados por la aplicación Web.

Polymer - Betabeers3

Como la complejidad en el lado del cliente iba creciendo, el código cada vez era más complejo y se debían encontrar forma de estructurarlo al menos como se hace en el back-end. Empezaron a surgir frameworks para JavaScript (y sus evoluciones en forma de ECMAScript).

Algunos ejemplos podemos verlos en este gráfico de demanda de empleos en tecnología, como son EmberJS o BackboneJS. Su objetivo es facilitar el desarrollo de aplicaciones más serias que los fragmentos de script típicos que se suelen incluir en las páginas Web clásicas. Cualquiera que hayáis tenido la oportunidad de hacer alguna página con efectos de JQuery, validación, envío por AJAX de forma más o menos manual pero con JQuery detrás habréis tenido la sensación de que al final se os va un poco de las manos.

Cabe destacar en este gráfico el triunfo de AngularJS sobre los demás. Es un framework para SPA creado por un grupo de desarrollo de Google y que está apostando bastantes recursos para que triunfe. Sobre todo gracias a su relación con Google Chrome. Ahora muchas empresas se están planteando dar el salto de soluciones típicas de JSF o incluso GWT a este framework. Si no lo conocéis o si lo conocéis y os gusta el mundo del desarrollo de Front-end merece mucho la pena que profundicen porque es una apuesta segura.

Polymer - Betabeers4

Una vez descrito este “estado del arte” vamos con Polymer, que se situaría en un nivel por encima de los frameworks vistos anteriormente.

Polymer no es un framework o una librería más que hace uso de HTML5 que pueda tener cierto éxito dependiendo de que se haya puesto de moda en ciertas comunidades o esté siendo utilizado por alguna compañía cool del momento. Polymer es la implementación que Google ha hecho de los WebComponents. Hay otra implementación destacada, que es X-Tag de mozilla.

Por lo tanto la parte valiosa de esta presentación son los Web Components y cómo son implementados por Polymer. Veréis que además de una parte técnica de implementación, lo que es realmente importante es ver cómo cambia la filosofía del desarrollo de aplicaciones web complejas en el navegador.

Como digo no creo que sea una moda pasajera o algo que no llegue a implementarse. Me extrañaría mucho viendo las características que tiene, y el esfuerzo que están haciendo en Google para su desarrollo y utilización (hay productos internos que los utilizan). O el hecho de que W3C esté desarrolando los estándares en los que se basan los Web Components.

Polymer - Betabeers5

Pues como su nombre indica, son componentes que conforman una página Web. A mí me gusta mucho el ejemplo que suelen poner de un combobox de HTML normal y corriente (un select – option a nivel de tag).

Un título H1 o un enlace en HTML tienen una representación sencilla y no parecen hacer mucho, pero cuando escribimos un select con options, el navegador renderiza algo más complejo. Además es algo que tiene un estado que podemos consultar o manipular con Javascript. Por tanto parece un componente con cierta complejidad que usamos en formularios normalmente. Además dispone de un tag específico en HTML lo que facilita enormemente su reutilización.

Polymer - Betabeers6

Pero desafortunadamente este caso es prácticamente un caso aislado dentro de HTML. Además, HTML no nos provee de los suficientes elementos que necesitamos. Primero porque cada uno solemos llegar a un extremo en el diseño en el que tenemos que emplear controles o partes personalizadas (desde controles hasta menús y otros elementos). Y segundo porque los diseños van cambiando.

Es necesario por lo tanto tener un sistema en el que podamos crear estos componentes por nosotros mismos, facilitando la reutilización y la interoperabilidad.

La alternativa actual suele estar relacionada con JQuery UI o tecnologías similares, que arrastran una serie de dependencias. Por ejemplo aquí vemos un control de tipo Slider con jQuery UI.

Podemos ver cómo se hace uso de tag divs con los ID y de funciones de Javascriptm para dotarlo de funcionalidad. Es una opción válida y fantástica en su momento pero cuando las cosas se empiezan a complicar es bastante engorroso. ¿Podemos ver el contenido de una página Web sabiendo sólo su código? ¿Viendo que sólo hay divs con ciertos ID o clases?

Polymer - Betabeers7

Lo que vemos ahora en pantalla es un control equivalente, de tipo slider usando polymer.

Lo primero que vemos es que tenemos un tag especial que no está definido en HTML5, sino que tiene pinta de que álguien particular lo ha elegido. Además los atributos también son específicos del tag.

Debajo vemos la representación del slider. Quizá os suene un poco si habéis visto alguna pantalla hecha con Material Design de Google. Una pena que sólo haya puesto una imagen porque se puede ver que tiene animaciones bastante curiosas.

Debajo podemos ver lo que realmente conlleva una vez se está utilizando, pero ojo! no es el código que nosotros manejamos. A menos que queramos modificar o extender el componente. Nosotros a la hora de trabajar únicamente utilizamos el código superior.

Como podemos ver se parece bastante al ejemplo del combobox con select-option de HTML que hemos visto antes. Una solución elegante y encapsulada.

Por tanto los webComponents son componentes encapsulados y reutilizables que están compuestos por código HTML5, una parte de Javascript y CSS, pero todo ello encapsulado detrás de un tag con un nombre específico.

Ya podéis imaginar que estos elementos los podemos esciribir nosotros po podemos utilizar elementos de terceros. Un ejemplo claro es el que nos provee Google con sus Paper Elements u otras páginas en las que desarrolladores ofrecen los suyos. También podéis imaginar que la cantidad de componentes web será casi infinita con tanta gente colaborando, y que cubrirán casi todas nuestras necesidades. Y sino es muy fácil hacer los nuestros.

Polymer - Betabeers8

Para soportar los WebComponents se han creado 4 estándares de W3C que deberían implementar los navegadores (tal y como hace Chrome) o al menos se deberían soportar a base de Polyfills (que es un fragmento de código Javascript que suple las carencias del navegador (ejemplo cĺásico es el dotar a bordes redondeados a Internet Explorer 8 mediante un script CSS por ejemplo).

Son cuatro tecnologías:

  • Custom Elements: para poder definir nuevos tags en el código, tal y como hemos visto. Esto tags están en minúsculas y tienen que tener obligatoriamente un guión. Así los podemos distinguir de los tags normales.
  • HTML imports: nos permiten incrustar el código de un fichero HTML dentro de otro con un tag de tipo link: . Igual que hacmos un link de css o un tag script de Javavascript, que se pega el contenido tal cual y el navegador lo procesa como un todo.
  • Templates: la capacidad para definir plantillas de código HTML + Javascript + CSS que se aplican a nuestro elementos. Lo hemos visto en el código que realmente se está utilizando en un slider pero que nosotros no vemos como desarrolladores hasta que lo inspeccionamos con la herramienta de depuración.
  • Shadow DOM. Independizar el template o el código que genera del resto de la página, y además está preparado para que un nodo del árbol DOM pueda albergar otros subárboles DOM (expansión). De este modo se evitan los conflictos con otros elementos. ¿Cuántas veces usando JQuery no se ha armado un Belén al coincidir los atributos class, id; las CSS, etcétera. Elimina los efectos laterales. El código de los componentes está aislado completamente. Se podría decir que se establecen unos límites en el arbol DOM.

Más info en: http://webcomponents.org/

Polymer - Betabeers9

Creo que con esto más o menos nos hemos hecho una idea de lo que son los componentes Web. Ahora cuando veamos un ejemplo usando la implementación de Polymer nos quedará más claro. Pero básicamente se podría resumir en:

  • Encapsulación: se tiene un componente con HTML + Javascript + CSS que queda completamente sellado y listo para utilizar. Como una pieza dentro de un engranaje. Ella sola se basta para funcionar (aunque claro, dependiendo del tipo de componente igual no tiene sentido por sí sola, como por ejemplo unos Tabs que no tienen contenido).
  • Interacción: tienen una interfaz para comunicarse y configurarse. A través de javascript podemos manipular su contenido, leerlo, conectarlo con otros elementos…
  • Reutilización: pues derivado de lo anterir, están listo para ser utilizados. Incluso los que no hemos creado nosotros son muy sencillos de reutilizar. Gracias a los templates y al shadow DOM no se “pegan” con otras partes de la Web. Seguro que cuando habéis pegado un componente complejo de Javavascript en vuestro diseño tenéis que pasar un tiempo adaptando.
  • Catálogo de componentes reutilizables como el caso de los Paper Elements de Polymer o los de componente.kitchen. La gente publica sus componentes y podemos reutilizarlos por nuestra parte.

Polymer - Betabeers10

Vamos ahora con Polymer, que como habéis visto ya es la implementación que Google propone para los Web Components. Junto con X-Tags (pero éstos en menor medida), son los Web Componentes más interesantes.

Como características más destacadas:

  • Para nuevos navegadores. Es Chrome el que tira del carro de estas novedades. Google se lo está trabajando mucho, de modo que hay una comunicación continua entre los equipos de desarrollo de los nuevos frameworks como AngularJS o Polymer con el equipo de desarrollo de Chroime. Lo podéis ver por ejemplo en el desarrollo de las herramientas devtools de Chrome, que están todo el día metiendo novedades.
  • Es algo reciente (2013). En Youtube tenéis los vídeos de presentación de Google I/O 2013 y muchos otros comentando polymer que seguro que lo hacen mejor que yo.
  • Existe cierta compatibilidad hacia atrás a través de código Javascript gracias a los Polyfills. Aún así esta tecnología tenéis que tener cuidado a la hora de utilizarla porque no está madura (versión 0.5) y compatibilidad no muy alta. Quizá sea algo demasiado experimental, aunque hay algunas páginas que empiezan a usarlo (como GitHub).
  • Dispone de un catálogo de elementos basados en material design (Android 5) pero para la Web.

Polymer - Betabeers11

Polymer cuenta actualmente con dos bibliotecas de elementos. Por una parte los “Core elements” y por otra los “Paper elements”. Si váis a la página del Proyecto Polymer podréis usarlos.

Tenemos:

  • Core elements: para la funcionalidad básica que se espera en una página web de forma independiente a su apariencia. Se trata de componentes básicos como llamadas Ajax, y efectos de animaciones como Collapse, iconos, barras… estructuración de la página, etc…
  • Paper elements, que es la implementación del Material Design usando Web Components que es la apariencia que Google ha adoptado a partir de Android 5.0

Como digo en la página de Polymer hay unas demos del funcionamiento de cada uno de ellos así como la documentación para utilizarlo, que ya sabéis que es del tipo: pongo el tag, añado unos atributos y listo.

Polymer - Betabeers12

Como ya había dicho antes, todavía es un proyecto que está en desarrollo y que tiene que mejorar sobre todo en compatibilidad con los navegadores que lo soportan. Esto es un trabajo más de los navegadores que de polymer.

Hay dos versiones: una es la versión nativa que cuenta con la compatibilidad sobre todo de Google Chrome (webkit) en sus diferentes versiones y alguno más como firefox por ejemplo. Esta información está sacada de la página de Polymer en la vesión 0.5.0. Es posible que otros navegadores también soporten Web Components de forma específica. sin que aparezcan. Esto hay que verlo en su momento.

Polymer - Betabeers13

Voy a intentar hacer una pequeña demo de Polymer si los medios y el directo acompaña.

Voy a utilizar Yeoman + Grunt + Bower, aunque en la página Web de Polymer os podéis bajar un ZIP que ya lleva todo lo necesario para empezar.

Estos tres elementos me van a permitir:

  • YO (Yeoman): descargar un esqueleto de la aplicación con todo montado.
  • Grunt: correr un servidor para que podamos ver la demo (no funciona en el sistema de ficheros), y si quisiera generar una versión para distribuir con las hojas de estilo optimizadas, código Javascript ofuscado, corriendo test, etcétera.
  • Bower: controlar las dependencias: si quiero añadir más librerías por ejemplo.

Vamos con ello.

* En este punto se puede continuar con el ejemplo descrito paso a paso en el post: Introducción a Polymer. En él se puede ver cómo se instala Yeoman en Ubuntu 14.04 y cómo se desarrolla el ejemplo del componente contador que realicé en la presentación de Betabeers Guadalajara

Polymer - Betabeers14

Anuncios

Introducción a Polymer

Introducción: ¿Qué es Polymer?

En los últimos tiempos se está produciendo un trasvase de funcionalidad desde el back-end al front-end. Hasta hace poco tiempo se procuraba que la lógica de la aplicación residiese en el servidor, utilizando el cliente para la visualización de la información e interacción básica que desencadenaba acciones que se llevaban a cabo en el servidor. En frameworks como JSF, Struts o Spring MVC el programador acaba creando páginas en servidor que son procesadas para ser enviadas al cliente sobre las que no se suele ejercer un control final.

Con la aparición de HTML5 con sus API y la mejora de JavaScript (ECMAScript), y de los intérpretes de los navegadores, en especial gracias al motor V8 de Google, se está trasladando el protagonismo de la aplicación hacia el navegador: aplicaciones en navegador potentes que se comunican con el servidor para el intercambio de datos (servicios REST) usando AJAX y JSON. Es lo que se conoce como Single Page Application o Web Application: una página Web HTML que contiene bibliotecas JavaScript que le permiten capacidades de comunicación con el servidor y de manipulación del DOM para crear una experiencia de usuario superior. De este modo el servidor queda para implementar la lógica de negocio y proveer de unos puntos de acceso a información utilizados por la aplicación Web.

Es fácil suponer que, al pasar la responsabilidad desde el servidor al cliente, la complejidad y tamaño del código Javascript aumenta de forma exponencial. Como sabemos, es mucho más fácil hacer un buen código estructurado en Java (Spring, Struts, Guice…) que hacerlo en Javascript. Surge por lo tanto la necesidad de tener algún tipo de framework que ayude a estructurar las aplicaciones en Javascript que corren en el cliente. Afortunadamente han surgido proyecos open source que facilitan estas labores como EmberJS, Backbone, Knockout o AngularJS como los más destacados.

Dentro de este desarrollo de nuevas tecnologías para el navegador pronto surge la necesidad de contar con un sistema para la reutilización de partes de las página web. Si has trabajando con HTML en el lado del servidor (JSP), es probable que hayas usado plantillas para dividir la interfaz y facilitar el trabajo. Si has usado JSF habrás podido comprobar cómo se va un paso más allá a través de los componentes que permiten de una manera sencilla crear páginas de un modo más lógico agregando elementos independientes que aunan tanto representación como modelo y comportamiento. En el nuevo entorno de HTML se busca lograr el mismo objetivo: disponer de un modo de especificar componentes Web que son reutilizables de un modo sencillo que son completos e interoperables: un menú, un mapa, un gráfico, un contenedor con paginación… Seguro que te suena.

Los Web Components es el estándar propuesto por el grupo de trabajo de WebApps de W3C y que todavía está en fase de definición. Dentro de esta iniciativa se encuentra Polymer, que junto con componentes X-Tag de Mozilla son las implementaciones más destacadas de los componentes Web.

Los Web Components se basan en los siguientes pilares:

  • Templates: son fragmentos de HTML que representan al componente de modo que cuando se haga referencia al componente se usará esta plantilla.
  • HTML Import: es la posibilidad de incluir un HTML dentro de intro mediante un tag <link rel=”import” href=”include.html”>. De este modo el template de un Web Component formará parte del otro.
  • Shadow DOM: permite encapsular el subarbol DOM de un componente, de modo que la interacción desde fuera y hacia dentro está controlada. Es importante para que los componentes no entren en conflictos al formar parte de la misma página.
  • Custom Elements: para la definición de Tags específicos que representan a los web components que se han creado. En este tutorial haremos el componente contador que estará representado por el tag <c-contador> por ejemplo.

Como puedes imaginar todos estos elementos forman parte de las nuevas especificaciones que van incoporándose a HTML5 y a los navegadores. Aunque se intenta mantener la compatibilidad entre todos ellos no esperes que funcionen en versiones viejas o muy específicas. Antes de usar esta tecnología deberías repasar los requisitos funcionales.

Instalación del entorno de trabajo y esqueleto de una aplicación Polymer con Yeoman

Aunque es relativamente sencillo crear una aplicación Polymer desde el principio, es mucho más fácil si disponemos de un esqueleto de aplicación en el que basar nuestro desarrollo. Una de las posibilidades es bajar de su página oficial un zip con este esqueleto. La otra es usar programas especializados que nos permiten descargar este esqueleto, los ficheros de dependencias y realizar otras tareas del ciclo de desarrollo de la aplicación.

Una de las herramientas que nos permiten gestionar el ciclo de desarrollo de una aplicacion HTML5 es Yeoman, que se compone de otras tres herramientas: Bower para la gestión de paquetes, Grunt para generar, previsualizar y testear nuestros proyectos y Yo para gestionar ambos.

Vamos con la creación de un proyecto Polymer usando Yeoman en un Ubuntu 14.04 desktop recién instalado. Si ya tienes Yeoman instalado en tu equipo deberías saltarte esta parte. Si quieres bajarte el proyecto en .zip desde la página de Polymer también puedes saltar esta sección.

Para usar Yeoman necesitamos tener instalado NodeJS en nuestro sistema. Como estamos usando una versión nueva de Ubuntu, que está basada en Debian, debemos instalar una versión compatible de NodeJS que utilice como ejecutable “node”. La versión estándard de node para Debian tiene como comando “nodejs” debido a un cambio de nombre. Desafortunadamente con este cambio de nombre no funciona la versión estandar, por lo que hay que instalar una retrocompatible

	sudo apt-get install nodejs-legacy
	

Una vez tenemos instalado nodejs en nuestro sistema podemos instalar Yeoman utilizando el gestor de paquetes de node npm.

	sudo npm install -g yo
	

Para que Yeoman pueda generar un proyecto de tipo Polymer necesitamos descargar el generador específico. Si no sabemos su nombre, podemos utilizar la siguiente instrucción para listar todos los disponibles en el sistema:

	npm search yeoman-generator
	

Haciendo un grep o mirando la salida, podremos ver ue existe un generador que se llama generator-polymer cuya descripción corresponde con lo que estamos buscando. Lo instalamos de modo global ejecutando:

	sudo npm install generator-polymer -g
	

Ahora nuestro Yeoman será capaz de generar un proyecto Polymer. Vamos a ello.

Creamos un directorio en nuestro ordenador con el nombre y ubicación que creamos conveniente.

	mkdir developer/polymer
	cd developer/polymer
	

Y ejecutamos la orden para que Yeoman genere el esqueleto del proyecto.

	yo polymer
	

Aparecerá una pantalla interactiva preguntándonos qué modulos queremos incluir en el proyecto. Son módulos accesorios como las librerías de elementos o el soporte para SASS.

Yeoman1

Puedes instalar todos los elementos si quieres, especialmente las librerías de componentes que aparecen al comienzo. Al concluir el proceso deberiamos tener un contenido como el siguiente:

Polymer1

Además de los ficheros de la aplicación que están en el directorio “app”, tenemos una serie de ficheros de configuración para poder gestionar las dependencias de la aplicación, su generación y despliegue a través de las herramientas de las que se compone Yeoman: bower.json para dependencias que se tratan con Bower y Gruntfile.js para el despliegue y otras tareas (al estilo Maven de Java).

Solo falta arrancar la aplicación que viene de ejemplo básico que se ha descargado. Es muy sencillo, usando Grunt podremos lanzar un servidor HTTP en el que probar la aplicación: en el mismo directorio raiz de la aplicación ejecutamos (no olvidar ejecutar con sudo, de otro modo dará un error):

	sudo grunt serve
	

Antes de continuar con la aplicación un detalle: si a la hora de crear el proyecto con Yeoman le has indicado que deseas instalar los móudlos de Sass, será necesario tener en nuestro sistema Ruby y la gema de Sass correspondiente. Es muy fácil de instalar. Simplemente ejecuta:

	sudo apt-get install ruby
	

Y cuando esté Ruby instalado, instalamos la gema de Sass:

	sudo gem install sass
	

Ahora ya es más que posible que nuestro servidor grunt funcione correctamente. Repetimos:

	sudo grunt serve
	

Si todo ha ido bien, debería abrirse nuestro navegador por defecto con la página localhost:9000 y mostrarnos el contenido de la aplicación por defecto:

App1

Usar Grunt como servidor, entre otras muchas ventajas, nos permite editar un fichero y que el navegador refresque automáticamente la página en cuanto detecte que el fichero que estamos editando se ha guerdado. Si cuentas con dos pantallas, una para el editor y otra para ver el navegador, verás su utilidad.

Estructura de una aplicación Web que usa Polymer

Podemos abrir el directorio en el que se ha generado el proyecto de Polymer mediante un editor como por ejemplo Sublime Text. Si accedemos al directorio app podremos ver los ficheros que componen la aplicación. El resto de elementos que están a la misma altura que el directorio app son ficheros de configuración y otros directorios para Grunt, Bower y los destinos de estos.

En primer lugar podemos abrir el fichero index.html, que contiene el código de la página que compone la aplicación Web de ejemplo:

	&lt;!doctype html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;title&gt;Polymer WebApp&lt;/title&gt;
  &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes&quot;&gt;
  &lt;!-- Place favicon.ico and apple-touch-icon.png in the root directory --&gt;

  &lt;!-- build:css styles/main.css --&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;styles/main.css&quot;&gt;
  &lt;!-- endbuild--&gt;

  &lt;script src=&quot;bower_components/platform/platform.js&quot;&gt;&lt;/script&gt;
  &lt;!-- build:vulcanized elements/elements.vulcanized.html --&gt;
  &lt;link rel=&quot;import&quot; href=&quot;elements/elements.html&quot;&gt;
  &lt;!-- endbuild--&gt;
&lt;/head&gt;

&lt;body unresolved&gt;

  &lt;div class=&quot;hero-unit&quot;&gt;
    &lt;yo-greeting&gt;&lt;/yo-greeting&gt;
    &lt;p&gt;You now have&lt;/p&gt;
    &lt;yo-list&gt;&lt;/yo-list&gt;
  &lt;/div&gt;

  &lt;!-- build:js scripts/app.js --&gt;
  &lt;script src=&quot;scripts/app.js&quot;&gt;&lt;/script&gt;
  &lt;!-- endbuild--&gt;
&lt;/body&gt;

&lt;/html&gt;
	

Como podemos ver se trata dé un código muy sencillo en el que, además de los tags meta, hojas de estilo y etiquetas básicas que componen una página web clásica, destacan una serie de elementos:

  • Unos “include” que proporcionan a la página la funcionalidad necesaria para operar con Polymer. Estos include son:
    • La referencia a la plataforma de Polymer:
      <script src=”bower_components/platform/platform.js”></script>
    • El script de inicio de la aplicación:
      <script src=”scripts/app.js”></script>
    • La referencia a los componentes que se utilizan:
      <link rel=”import” href=”elements/elements.html”>
  • Unos tags un tanto “extraños” que no reconocemos en los habituales de HTML5. Si tienes algo de experiencia con AngularJS te sonará el hecho de tener etiquetas fuera del estandard. Veremos que es la forma de invocan los elmentos o componentes de Polymer, y dedicaremos un apartado más adelante.

Para ver la estructura de la aplicación, nos centraremos en el último de los include indicados:

	&lt;link rel=&quot;import&quot; href=&quot;elements/elements.html&quot;&gt;
	

Si te fijas es un tag tipo link cuyo atributo rel tiene el valor “import”. Esto es una de las características que los nuevos navegadores soportan, lo que permiten cargar el código HTML dentro de la página padre. Este archivo que se incluye “elements/elements.html” contiene las referencias a los elementos (o componentes) de polymer que se van a invocar en la aplicación utilizando los tags de HTML que los representan. Veamos su contenido:

	&lt;link rel=&quot;import&quot; href=&quot;yo-list/yo-list.html&quot;&gt;
	&lt;link rel=&quot;import&quot; href=&quot;yo-greeting/yo-greeting.html&quot;&gt;
	&lt;link rel=&quot;import&quot; href=&quot;c-contador/c-contador.html&quot;&gt;
	

Como puedes imaginar solamente contienen includes de otros ficheros .html que esta vez sí que contienen los ficheros de los tags. De nuevo se vuelve a emplear la fórmular del include de tipo “import”. No es imprescindible utilizar este tipo de estructura ya que se podrían haber incluído directamente los tags, pero sí que ayuda a mantener cierto orden y estructura en nuestra aplicación Web. Seguro que ya estás imaginando otras situaciones en las que puedes emplear esta nueva característica de imports.

Por lo tanto tenemos un fichero .html por cada uno de los componentes que vienen en el ejemplo. Uno para yo-list y otro par yo-greeting. A estas alturas ya deberías ir relacionándolos con los tags que vimos en el fichero index.html. Si abrimos el fichero yo-greetings.html nos encontraremos con la estructura básica de un elemento de polymer.

 	&lt;link rel=&quot;import&quot; href=&quot;../../bower_components/polymer/polymer.html&quot;&gt;

	&lt;polymer-element name=&quot;yo-greeting&quot;  attributes=&quot;&quot;&gt;
	&lt;template&gt;
		&lt;link rel=&quot;stylesheet&quot; href=&quot;yo-greeting.css&quot;&gt;
		&lt;h1&gt;{{ greeting }}, {{ greeting }}!&lt;/h1&gt;
		&lt;span&gt;Update text to change the greeting.&lt;/span&gt;
		&lt;input type=&quot;text&quot; value=&quot;{{ greeting }}&quot;&gt;
	&lt;/template&gt;
	&lt;script&gt;
	(function () {
		'use strict';

		Polymer({
			greeting : '\'Allo'
		});

	})();
	&lt;/script&gt;
&lt;/polymer-element&gt;

Podemos destacar los siguientes aspectos del código:

  • Import de la biblioteca de polymer.html, que en realidad hacer referencia a polymer.js que es la verdadera biblioteca.
  • La definición del nombre del elemento de polymer “yo-greeting”.
  • El template o representación del HTML del elemento que está formando por un h1, un span y un input. Además incluye su propia hoja de estilos que ha sido especificada en un fichero independiente.
  • Una sección de script que define el modelo y el controlador de ese elemento.

Como puedes ver, un elemento de Polymer o Web Component está completamente autocontenido, es decir, tiene la vista, tiene el modelo de datos y tiene el controlador o acciones que operan sobre esos datos. Por tanto es totalmente independiente y reutilizables.

Para utilizarlo es muy sencillo. Si volvemos al fichero index.html recordarás que se hace un include de elements.html que a su vez hace un include de yo-greetings.html. Con estos includes ya podemos utilizarlo. Y para ello simplemente utilizaremos un tag con el nombre definido en la cabecera polymer-element que será <yo-greeting>. Polymer sustituirá este tag por el contenido especificado para el componente. Realmente sencillo.

Creando nuestro propio componente de Polymer

Una vez hemos visto el código de ejemplo que hemos descargado con Yeoman seguro que ya tienes en la cabeza cómo crear tu propio componente. Vamos a hacer nuestro propio elemento de Polymer sencillo, que será un contador con un botón para incrementar el número y otro para disminuir. Por tanto se compondrá de:

  • Template: que contiene dos botones y un input par ver el elemento.
  • Controlador: que inicializa el valor y tiene una función par subir el elemento y otra para bajarlo.

Si seguimos los pasos indicados en la descripción anterior sobre la estructura de la aplicación de Polymer básica, podremos deducir que tendremos que hacer:

  • Crear un directorio y fichero en elements para nuestro nuevo tag. Como se llamará c-contador, crearemos elements/c-contador/c-contador.html. Copiaremos el ya existente yo-greetings.html para ahorrarr trabajo y lo editaremos.
  • Editar elements.html para incluir la referencia al nuevo fichero que describe nuestro componente.

Con estos dos sencillos pasos ya estaremos preparados para invocar el componente con el tag dentro de index.html.

Creando el fichero c-contador.html

Este fichero define el componente por completo, tanto apariencia como datos y comportamiento. Nos basamos en uno ya existente. El contenido será el siguiente:


&lt;link rel=&quot;import&quot; href=&quot;../../bower_components/polymer/polymer.html&quot;&gt;

&lt;polymer-element name=&quot;c-contador&quot;&gt;
&lt;template&gt;
	&lt;link rel=&quot;stylesheet&quot;  href=&quot;c-contador.css&quot;&gt;
	&lt;button class=&quot;boton&quot; on-click=&quot;{{decrementa}}&quot;&gt;-&lt;/button&gt;
	&lt;input name=&quot;contador&quot; type=&quot;text&quot; value=&quot;{{numero}}&quot; /&gt;
	&lt;button href=&quot;&quot; class=&quot;boton&quot; on-click=&quot;{{incrementa}}&quot;&gt;+&lt;/button&gt;
&lt;/template&gt;
&lt;script&gt;
(function()	{
	'use strict';

	Polymer('c-contador',{
		numero:0,
		decrementa:function()
		{
			this.numero--;
		},
		incrementa:function()
		{
			this.numero++;
		}
	});

})();
&lt;/script&gt;

&lt;/polymer-element&gt;

Los puntos importantes de nuestro componente o elemento de Polymer son:

  1. El nombre del componente indicado en el tag polymer-element que será “c-contador”. A la hora de elegir el nombre tenemos que tener en cuenta que este tiene que llevar un guión. En nuestro elemento no podríamos llamarlo “contador” porque no lo lleva (daría Uncaught Error: document.registerElement: first argument (‘name’) must contain a dash (‘-‘). Argument provided was ‘contador’.). Lo solucionamos llamándolo “c-contador” por ejemplo. Se ha usado “c-” de forma arbitraria. Convendría usar un nombre de la librería o algo que consideremos significativo.
  2. El apartado “template” donde se define la apariencia. En primer lugar tenemos la definición de la hoja de estilos en un fichero externo llamado c-contador.css. Es una buena práctica tenerlo definido fuera, aunque se hubiera podido incluir perfectamente en el mismo código.Por otra parte tenemos dos botones definidos con el tag de HTML “button”. Si te fijas en detalle, ambos tienen refrencia a la clase “boton” que está declarada en el fichero CSS. Por otra parte también tienen referencia al atributo on-click. Este atributo es la forma que tiene Polymer de especificar un callback para los eventos de sus elementos. Fíjate en que se llama diferente al clásico atributo onclick de HTML. Se define la función que se empleará como callback entre “double moustache” que es la notación que usa polymer para hacer referencia al modelo y controlador.

    Finalmente tenemos un input que muestra el valor. Se vuelve a emplear la notación “double moustache” que relaciona una variable con el input usando un binding de tipo “two-way”. Si has usado AngularJS te sonará: un cambio de un dato en el modelo se refleja de forma automática en el DOM y viceversa. Es decir, una variable representada en un input de texto, al cambiar el valor en el input, cambiar en el modelo, y viceversa, un cambio con Javascript en esa variable hace que se cambie automáticamente en el input. Todo esto sin que el programador tenga que hacer nada.

  3. La definición del controlador mediante la seccion “script” del elemento, que contiene código JavaScript. Si observas bien, por una parte tenemos la definición de la función general que es común para todas las instancias del componente, y dentro de ella la llamada a Polymer pasando como parámetro el nombre del elemento. Este fragmento de código es local a cada una de las instancias del componente. ¡Ten cuidado dónde declaras las variables!. Los miembros de Polymer no son otra cosa que la definición de los datos y funciones, por lo que está intimamente ligado con la vista. Ahí podemos ver el valor “numero” que se muestra en el inputo y las funciones que hacen de callback para los eventos de pulsación de los botones (“incrementa” y “decrementa”).También es posible sacar a un archivo fuera todo el código de script del elemento de polymer, añadiendo el atributo src=”path/to/tagname.js” al tag script, y así podremos separar el comportamiento de la representación. Al igual que las hojas de estilo seguramente querramos mantener la nomenclatura c-contador.js y el directorio en el que se encuentra.

Para utilizarlo simplemente tenemos que ir al fichero raíz de la aplicación (index.html) e invocarlo dentro del código mediante el tag . Si eliminamos la referencia a los otros dos elementos, yo-greeting y yo-list, tendremos una página vacía con el contador. Si pulsamos sobre los botones podremos ver cómo sube o baja el contador. También podremos cambiar su valor introduciéndolo manualmente en el input.

contador1

Lo que acabamos de hacer es poner el componente aislado. Imagina ahora que tenemos una tabla de productos y cantidades y queremos reutilizar el contador. Es muy fácil, en la segunda columna, por cada elemento podremos una llamada al tag c-contador. Ahora todo tiene mucho más sentido:


	&lt;table border=&quot;1&quot;&gt;
		&lt;tr&gt;
			&lt;td&gt;Producto&lt;/td&gt;
			&lt;td&gt;Cantidad&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Patatas&lt;/td&gt;
			&lt;td&gt;&lt;c-contador id=&quot;contadorPatatas&quot;&gt;&lt;/c-contador&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Tomates&lt;/td&gt;
			&lt;td&gt;&lt;c-contador id=&quot;contadorTomates&quot;&gt;&lt;/c-contador&gt;&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;

	

Obtenemos la siguiente imagen:

frutas1

¿Cómo podemos interactuar con el componente para saber su valor?

La respuesta es muy sencilla: utilizando JavaScript podemos acceder a las propiedades que el componente expone. Para saber cuántos tomates hay seleccionados en un momento determinado accedemos al valor de su “numero”:

	document.querySelector('c-contador').numero
	

Esto es de vital importancia a la hora de que otros elementos y componentes de nuestra aplicación Web puedan interactuar con los elementos de polymer: si tenemos que utilizar el valor del contador para, por ejemplo, para indicar el número de artículos en una cesta de compra de un e-commerce, simplemente tomaremos el valor del modelo usando JavaScript.

Finalmente vamos a ver cómo podemos incluir parámetros en la llamada al componente como atributos en el tag. Usando los atributos específicos es posible tomar información de los atributos del tag que el usuario haya especificado. En el ejemplo del contador, “numero” es la variable que se contiene la información y que se está manipulando. Podemos indicar que esa variable sea también un atributo. En este caso toma el valor especificado por el programador en el código HTML, sobreescribiendo la indicada en el código.

	&lt;polymer-element name=&quot;c-contador&quot; attributes=&quot;numero&quot;&gt;
	

Y en el código HTML:

	&lt;c-contador numero=&quot;2&quot;&gt;&lt;/c-contador&gt;
	

De este modo el valor por defecto para esa instancia de elemento de polymer será 2. En el ejemplo de la tabla de la frutería se pueden así inicializar los valores que provengan de otras manipulaciones anteriores de la cesta de la compra.

Los atributos se pueden utilizar para muchas otras operaciones, relacionadas con atributos de clase, apariencia, o con utilidades dentro del código script que tiene el componente.

Polymer no solamente da soporte a la creación de elementos reutilizables en nuestro código como hemos visto. También incluye soporte para características que permiten crear aplicaciones Web multidispositivo y que pretenden tener una experiencia de usuario similar a las aplicaciones nativas. Por ejemplo:

  • Layout: incluyendo atributos para soportar CSS3 Flexible Box, para poder adecuar la posición y distribución de los elementos para diferentes tamaños. (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes).
  • Estilos: con funcionalidades para controlar la apariencia de la aplicación en el proceso de carga de elementos, así como el soporte de característica de estilo de Polyfill.
  • Soporte para gestos: mejorando la experiencia en los dispositivos táctiles con los eventos de tipo “touch”.

Conclusiones

En este tutorial se ha visto una breve introducción a Polymer, una tecnología surgida de la necesidad de dotar a las aplicaciones Web de modularidad que permita un desarrollo sencillo y ágil de las nuevas aplicaciones que se están realizando en este entorno. El actual desarrollo de los éstándares de HTML5 y la implicación de los principales actores del mercado Web (entre ellos Google), está haciendo posible grandes avances en estos últimos tiempos.

Polymer no es más que la punta de flecha de los Web Components, una tecnología que todavía está en desarrollo, pero que por su alcance y características está llamada a convertirse en el nuevo modo en el que se desarrollen las aplicaciones en el navegador, tanto de dispositivos clásicos como los PC como de los nuevos protagonistas del acceso a internet: móviles, tablets y derivados.

Aunque es una tecnología impactante y con grandes posibilidades, no debemos olvidar que todavía está en una fase temprana de desarrollo y que sus niveles de compatibilidad no lo hacen apto para todos los entornos. Es altamente dependiente del grado de desarrollo de los navegadores que se emplean. No obstante, sí que merece la pena hacer un seguimiento cercano, tanto por las posibilidad futuras como por los esfuerzos que están realizando los equipos de desarrollo de Google, tanto de Chrome como de desarrollo de AngularJS y Polymer, para que los programadores y usuarios podamos disfrutar de esta tecnología de forma estable en el menor tiempo posible.

Recuerda que esto solamente ha sido una breve introducción. Puedes encontrar artículos y vídeos en su Web oficial: http://www.polymer-project.org/