Webcomponents con Polymer. Creando el primer componente.
¡Hola! En esta ocasión comenzamos con una serie de entradas dedicadas a los web components, concretamente nos centraremos en Polymer. Esta entrada servirá como introducción y motivación para la serie.
¡Comenzamos!
Para empezar, con estos componentes web se pretende cambiar la manera en que hacemos nuestras webs, para hacer que el código sea más limpio y reusable. La premisa es construir «bloques» o componentes que funcionen por ellos mismos, pensemos, por ejemplo, en una etiqueta ‘select’ como un componente.
La ventaja más clara que nos proporciona es la reusabilidad, extendiendo el html (creamos etiquetas personalizadas), ya que si creamos un componente genérico, podremos usarlo en distintos sitios solo cambiando algunos elementos, por ejemplo los estilos.
Para comenzar a trabajar con web componentes, solo necesitamos conocer que:
– Podremos crear elementos personalizados (nuevos tags).
– Estos tags trabajaran con el shadow DOM, nostros creamos nuestro tag «calendario» y en el shadow DOM se encontrarán todas las etiquestas HTML necesarias para pintar ese calendario (en principio serán invisibles en el documento principal).
– Para crear los componentes usaremos templates de HTML.
– Estos templates se pueden importar en otro HTML, como un import de Java, por ejemplo. Por lo que podríamos crear componentes (o aplicaciones enteras) usando otros componentes más pequeños.
Ahora vamos a crear nuestro primer componente, antes de nada necesitamos tener instalado Node.js, si no lo tenemos tendremos que ir a la web de Node.js e instalarlo siguiendo los pasos:
Descarga e instalación de Node.js.
A continuación instalar bower, es un gestor de dependencias.
npm install bower -g
Y, por último, creamos una carpeta, por ejemplo «primerComponente», navegamos hasta ella desde consola y:
bower init
Nos pedirá una serie de datos, vamos completando con los datos por defecto (no hace falta mucho ya que va a ser nuestro componente de prueba). Esto nos generará un fichero ‘bower.json’, donde encontraremos la información antes solicitada, además de versiones de dependencias que incluiremos después.
Bien, ahora vamos a instalar Polymer:
bower install --save Polymer#1.0.0
Especificamos que queremos la versión 1.0.0 y marcamos para guardar en el fichero bower.json.
Ahora vamos a crear dos documentos HTML, uno para alojar nuestro componente y otro para usarlo.
Un «primerCompontente.html» donde se encontrará nuestro componente:
Nota: Las rutas de los arhivos a incluir puede variar, depende de dónde los tengais ubicados
Hello {{nombre}}
Y un «index.html», donde usaremos el componente:
Polymer
Explicamos un poco, con el ‘link rel import’ estamos incluyendo archivos html dentro de otros, en el código del componente, necesitaremos incluir Polymer y, en el index, el webcomponents.js, este archivo, básicamente, se encarga de dar compatibilidad a navegadores que no implementen completamente las funcionalidades necesarias para los web components.
Una cosa importante, es que estamos obligados a que, todos nuestros componentes contengan guiones (-), ya que los tags sin guiones están reservados.
Por último, os dejamos el video en el que ponemos en práctica lo anterior:
¿Cómo podemos ver esto? Con cualquier servidor web, Wamp, por ejemplo, o con ‘polyserve’.
Espero que os haya sido útil.
HackSaludos!
