Polymer y los Web Components

El desarrollo web basado en componentes está integrándose muy bien en los procesos de desarrollo en producción de un gran número de empresas y particulares. Ya os adelantábamos qué es Polymer Project y algunas de sus virtudes más llamativas, así que hoy vamos a ver qué partes son las que componen esta utilidad.

Hablábamos acerca de Polymer como librería , que es como inició su andadura en el mercado del desarrollo, en forma de librería que podíamos importar a nuestro framework o editor de código favorito y hacer uso de todas sus ventajas. Dicha librería se fue mejorando con el paso de los meses, ampliando enormemente los recursos que ofrecía a los desarrolladores. Llamó la atención de Google que acogió el proyecto y continuó su crecimiento de forma exponencial.

Pero esto del desarrollo mediante componentes web lleva escuchándose bastante tiempo y aquellos que no hayan prestado mucha atención a la creación de aplicaciones web o al mismo desarrollo web, podrán verse un poco perdidos, por lo que vamos a destacar las partes principales que componen esta metodología.

Los componentes web (Web Components) se dividen principalmente en cuatro apartados distintos:

• Custom Elements (Elementos Personalizados): Permiten a los desarrolladores crear sus propios elementos para cada proyecto, como parte de la estructura DOM incluyendo capacidades script en dichos elementos de la misma forma que si añadiésemos una etiqueta a un objeto HTML.
  
  
• HTML Templates (Plantillas HTML): Facilitan la tarea de definir los diferentes apartados de una página web (por ejemplo) en diferentes categorías de la misma. Así, si tenemos varias páginas dentro de una misma sección de nuestro sitio web, podremos usar la misma plantilla HTML y ahorrar muchísimo tiempo de codificación. Permiten también insertar contenido dinámico mediante JavaScript.
  
  
• Shadow DOM (“Sombra” DOM): También conocidos como DOM “en la sombra”, se trata de un modelo de documentos de objetos (Document Object Model, DOM) cuya función es la de incluir un subárbol de objetos en un documento sin estar dentro del árbol DOM principal. Podríamos definirlo también como un encapsulamiento de un DOM dentro del DOM principal, aclarando que, a diferencia de los iframe, se trataría del mismo documento, no de dos diferentes pero relacionados.
  
  
• HTML Imports (Importación HTML): Se trata de una función similar a la de importar un archivo CSS a otro, estas importaciones nos permiten llamar y reutilizar documentos HTML desde distintos archivos HTML.

Polymer nos ofrece estos componentes para el desarrollo de proyectos web y aplicaciones , a los que si sumamos su característica de soporte de variables CSS, obtendremos un producto cuyos resultados se integran perfectamente en los navegadores de hoy día.

Pero los desarrolladores de Polymer no se han quedado únicamente en ofrecer una librería. En vista de la gran acogida de su proyecto inicial, decidieron seguir haciendo la tarea de desarrollar una aplicación web o móvil algo mucho más sencillo y lanzaron las Polymer Apps Tools o Polymer App Toolkit .

Se trata de una serie de utilidades destinadas a como es obvio, facilitar el desarrollo de proyectos mediante el uso de la librería Polymer haciendo uso de estas herramientas facilitadas por sus mismos creadores. Tal y como se nos dice en el apartado de la web de Polymer , Polymer CLI nos ofrecerá la mayoría de estas herramientas básicas de desarrollo, mientras que en la sección “Advanced Tools” (Herramientas avanzadas) encontraremos otras tantas que podríamos destacar por su especial utilidad:

• Polyserve : Un servidor web para ejecutar nuestro proyecto y obtener una vista previa de éste.
   
• Polylint : Nos ayudará a identificar los fallos más comunes y otro tipo de errores en nuestro código.
   
• WC Tester : Una herramienta basada en el funcionamiento de un navegador con la que podremos poner a prueba nuestra aplicación.
   
• Vulcanize : Una utilidad de optimización del código, con la que se tomarán las dependencias de un fichero HTML importado y se resumirá en un único archivo donde se concatenarán todas las importaciones en un solo archivo, reduciendo así el número de peticiones formuladas.
   
• Crisper : Herramienta para la extracción de secuencias de comandos en un script desde un archivo HTML para integrarlo en un archivo separado. Muy útil cuando necesitamos cumplir con un CSP (Content Security Policy, Política de contenido seguro) establecido.
   
• Polyclean : Nos ofrece un servicio de reducción y optimización para JavaScript, CSS y HTML.
   
• Polybuild : Un AIO (All-In-One) que combina Vulcanize, Crisper y Polyclean, aunque su uso resulta más estricto que ejecutar cada una de las aplicaciones por separado, es muy efectivo si buscamos la optimización de tiempo por encima de todo.