polymer: 1. Introducción

Comenzamos con polymer ^^

Vincent Van Gogh

archivado en: JavaScript / 6 enero, 2016 / taller:

Comienzo con esta entrada una serie sobre polymer, una librería para trabajar con web components desarrollada por google, que va por su versión 1.0 en el momento de escribir estas líneas. Y quizás la primera pregunta que nos viene a la cabeza cuando nos hablan de polymer y los web components sea si vale la pena embarcarse en esta tecnología o está aún demasiado verde.

La respuesta es complicada. En general, los web components son muy prometedores. Si salen adelante, y saldrán, puesto que todos los colosos de Internet -google, mozilla, microsoft, etcétera- están apostando por esta tecnología, van a ser revolucionarios. Muchas cosas que hoy son algo complicadas, como un drag & drop, un sistema de autentificación con tokens o una barra de progreso que muestre la subida de un archivo, serán tan fáciles de implementar como un <p>, un <div> o cualquier otro tag normal de html. Por ejemplo, basta con escribir esto para tener un google-calendar en una página:

<google-calendar-list title="What I'm up to"></google-calendar-list>

En síntesis, los web components nos llevarán a una web más sofisticada y fácil de programar. Sin embargo, también es cierto que algunas cosas, como el shadow dom, pueden experimentar cambios en las propias especificaciones. Y esto significa que el problema no es la compatibilidad con los navegadores antiguos, pues como vimos, con polyfils más o menos funcionan incluso en el ie a partir de su versión 11, sino la incompatibilidad retroactiva de las futuras versiones de las librerías que estemos utilizando, como polymer en nuestro caso. Así, por ejemplo, la versión 1.0 es incompatible con la 0.5, lo que ha obligado a refactorizar proyectos con el consiguiente despilfarro de tiempo y dinero. ¿Qué hacemos entonces? ¿Comenzamos a trabajar con web components? Es más, ¿vale la pena siquiera comenzar a estudiarlos?

Lo único que me aventuro a decir al respecto es que depende de cada caso. Sin duda vale la pena empezar a estudiarlos y también creo que vale la pena meterse ya en esta faena en el caso de las web normales. Para las aplicaciones web, sin embargo, insisto en que no tengo una fórmula magistral. Y soltada ya toda esta chapa un tanto soporífera, vamos al lío 😛

Ojo, si no sabes qué es el shadow dom, las templates, los imports y los custom components, te recomiendo que antes de empezar esta serie leas esta introducción a los web components, pues de lo contrario lo que sigue te resultará ininteligible.

Instalación

La forma más sencilla de instalar polymer es con bower. Creamos un directorio por consola, nos vamos gasta ahí y creamos el bower.json:

bower init

Y luego la librería:

bower install --save Polymer/polymer#^1.2.0

¡Ale op! la maquinaria se pone en marcha y cuando concluye en bower_components/polymer nos deja dos grandes directorios llenos de cosas: polymer, con el material de la librería, y webcomponentsjs con los polyfils que vimos en la primera entrada de esta serie. Cuando usamos polymer, el que necesitamos es el webcomponents-lite.min.js.

Más adelante veremos cómo enlazar de forma correcta el polyfil y la librería, pero para estas primeras entradas vamos a incluirlo todo a cascoporro en el index.html o como quiera que llamemos a la página en la que probaremos los componentes, que nos debería quedar más o menos así:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>Web Components</title>

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

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

</head>

<body>

</body>

</html>

Hola mundo

Listo esto, vamos a realizar un primer custom component con polymer, un hola mundo. Abrimos un archivo aparte que podemos llamar hola-mundo.html y lo enlazamos en nuestra página principal con un import. Además, ya que tenemos el index.html abierto podemos ir incluyendo el tag del componente que vamos a crear.

index.html

...

<link rel="import" href="hola-mundo.html">

</head>

<body>

<hola-mundo></hola-mundo>

...

Vamos ahora con hola-mundo.html. Expongo primero el código y luego lo explico:

hola-mundo.html

<dom-module id="hola-mundo">

<template>

<style>

p {

font-weight: bold;

}

</style>

<p>Hola Mundo</p>

</template>

<script>

Polymer({

is: "hola-mundo"

});

</script>

</dom-module>

Como vemos, el mecanismo no varía demasiado respecto a los web components normales, pero el código es más sencillo y, sin duda, más intuitivo. El template no necesita más aclaraciones; pero sí los dos elementos nuevos que han aparecido.

Uno es ese tag <dom-module> que encapsula el componente, el cual sirve para generar un shadow dom de una forma realmente sencilla.

Otro es el método Polymer({}), piedra angular de todo componente realizado con esta librería, el cual debe recibir al menos un parámetro: is, en el que debemos indicar el id del <dom-module> que estamos registrando.

Y ya está, así de sencillo.... al menos de momento :P.

|| Tags: ,

valoración de los lectores sobre polymer: 1. Introducción

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.