Introducción a Polymer. Mi primer componente web


Hola de nuevo a todos,

Hoy os traigo un tutorial sobre una de las nuevas librerías de Javascript que comienza a utilizarse cada vez más en los proyectos web: Polymer.

Con Polymer, vamos a poder extender nuestro HTML por medio de la creación de Componentes Web de una forma sencilla y rápida. Estos Componentes Web podrán estar formados por código HTML, CSS y Javascript, lo que nos permitirá encapsular determinadas funcionalidades de nuestros proyectos, que podrán ir desde un botón hasta una aplicación completa.

La posibilidad de encapsular estos Componentes Web, nos va a permitir, como es evidente, reutilizar nuestro código en distintos proyectos, lo que nos da una interesante oportunidad y hace esta librería, una herramienta a tener en cuenta para nuestros desarrollos.

Hoy voy a mostraros un ejemplo muy básico de cómo utilizar esta librería, donde intentaré mostraros algunas de las interesantes oportunidades que nos ofrece. Vamos entonces con el ejemplo/tutorial, en el que veremos cómo crear un Componente Web y como usarlo posteriormente.

Estructura de nuestro proyecto usando Polymer

En primer lugar os muestro la estructura básica de la carpeta del proyecto web donde he creado el ejemplo.

Captura de pantalla 2015-01-12 a las 23.11.10

 

Como podéis ver la estructura básica es muy simple. Tenemos una carpeta con el núcleo de la librería “bower_components”. A continuación una carpeta “elements” en donde se almacenarán los distintos Componentes Webs y por último tenemos el fichero index.html, que será la página inicial de nuestro ejemplo.

Creando el Componente Web

Para explicar cómo debemos de crear nuestro componente, voy primero a poner todo el código del mismo y después explicaré los aspecto más relevantes. El código de nuestro Componente Web lo añadiremos a un fichero dentro de la carpeta “elements”, en nuestro caso el fichero “examploElement.html”

<link rel="import" href="../bower_components/polymer/polymer.html"/>

<polymer-element name="example-polymer" attributes="attr1 attr2"/>
	<template>
		<h1>Esto es un ejemplo de uso de Polymer</h1>
		<p>{{attr1}}</p>
		<input type="text" value="{{attr2}}" />

		<h2>Usando el binding</h2>
		<p>Ejemplo de binding {{attr2}}</p>
	</template>
	<script>
		Polymer({
			attr2Changed: function(){
				if(this.attr2.length == 11)
					console.log('Esta es una cadena de 11 caracteres');
			}
		});
	</script>
</polymer-element>
  • Lo primero que tenemos que hacer es cargar el núcleo de Polymer, eso lo hacemos con la línea 1 del ejemplo, cargando el archivo “polymer.html”
  • Para definir nuestro nuevo componente, utilizamos el tag polymer-element y después indicaremos el nombre de este nuevo componente por medio del atributo name. Es importante hacer referencia a que el nombre que se le da al componente web debe tener al menos un “-“, como el que he usado en este caso “example-polymer”
  • Como cualquier tag de HTML, podemos añadir atributos para nuestro componente web. Esto lo haremos dentro de la línea de definición, línea 3, usando el atributo attributes y indicando los atributos que queremos que tenga nuestro componente, separados por espacios
  • Otra parte importante en la definición del componente web, es el tag template, donde incluiremos el código HTML y CSS que formará nuestro componente. Para este primer componente solo he incluido HTML, en próximos ejemplos veremos lo que se puede hacer usando CSS también. Dentro del tag template podemos escribir todo el código HTML que deseemos.

Uno de los aspectos más interesantes que nos trae Polymer es el concepto de Data Binding. Polymer soporta data binding en dos caminos. De esta manera, se extiende el HTML y las APIs del DOM para soportar la separación entre la interfaz de una aplicación y su modelo. Las actualizaciones del modelo se reflejan en el DOM y las entradas de usuario son inmediatamente asignadas al modelo. En el ejemplo, podemos ver un sencillo modo de uso del data binding en Polymer.

  • Una propiedad que se puede usar en el data binding de Polymer se define, como podemos ver en las líneas 6, 7 y 10, de la siguiente forma {{nombredelavariable}}
  • En nuestro ejemplo, hemos creado dos propiedades que coinciden además con los atributos que definimos previamente. De manera que, lo que queremos lograr en este caso, es que en el componente se carguen, dentro del mismo, los valores que indicamos en cada uno de los atributos
  • Además, al usar la misma propiedad dentro del atributo value del input, como se ve en la línea 10 con la propiedad attr2, estamos indicándole a Polymer que se actualice dicha propiedad en todo el componente, cuando actualicemos el valor del input

Otro aspecto importante que se puede destacar es el constructor de Polymer, que se define dentro del tag script en la línea 12. El constructor de Polymer, actúa como un wrapper para document.registerElement(), aunque también dota a Polymer de algunas características como el data binding y el mapeo de eventos. El constructor de Polymer toma como elemento un objeto que define el prototipo del elemento.

En el constructor, se hace referencia al evento attr2Changed. Esto es lo que se conoce como “Changed Watcher”. En Polymer, cada una de las propiedades definidas pueden ser seguidas por medio de un manejador nombrado como “nombredelapropiedadChanged”, de manera que, dicho manejador se invocará automáticamente cuando se actualice la propiedad correspondiente. En el caso del ejemplo, para ver como funciona, simplemente se escribe una entrada en el log, cuando el texto de la propiedad tiene una longitud de 11 caracteres.

Usando el Componente en nuestra página web

Una vez que ya tenemos definido nuestro componente web, vamos a ver cómo tendríamos que hacer para usarlo dentro de las páginas de nuestro sitio web. En este caso, lo vamos a hacer dentro del archivo index.html. Como antes, os dejo el código para que lo veáis y después os explicaré los aspectos más importantes del mismo.

<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="elements/exampleElement.html" />
</head>
<body>
	<example-polymer attr1="Ejemplo" attr2="Otro ejemplo">
	</example-polymer>
</body>
</html>

En este archivo, donde vamos a usar el componente web que creamos en el paso anterior, solo hay que destacar tres aspectos importantes.

  • Por un lado, se carga el soporte de Polymer para cualquier plataforma, en la línea 3 del código.
  • El siguiente paso, es cargar el componente web que hemos definido, como vemos que se hace en la línea 4 del código
  • Y por último, ya podemos hacer referencia a nuestro componente web, donde como se puede ver, se hace uso de los atributos que habíamos indicado cuando definimos el componente.

El resultado del ejemplo que hemos desarrollado a lo largo del tutorial lo podemos ver a continuación.

Captura de pantalla 2015-01-12 a las 23.48.53

Bajo mi punto de vista, con este pequeño ejemplo, ya se pueden apreciar claramente algunas de las ventajas a la hora de hacer código reutilizable y encapsulado con Polymer. En los próximos días, veremos otro ejemplo donde se siguen usando aspectos de Polymer que no hemos visto hoy.

Os dejo el enlace a la página principal del proyecto Polymer donde podéis encontrar muchas más información sobre el mismo

https://www.polymer-project.org/

Espero que lo hayáis encontrado interesante.

Saludos.

Anuncios

2 comentarios en “Introducción a Polymer. Mi primer componente web

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s