Las aplicaciones web modernas no solo son complejas de diseñar sino también bastante difíciles de desarrollar. Es muy frecuente que se requiera involucrar diferentes tecnologías, lenguajes y frameworks, algunos de ellos completamente nuevos. Como desarrolladores nos encontramos siempre con nuevos retos y debemos asumir que cada cierto tiempo toca trabajar con una nueva tecnología donde eres totalmente junior.
Por mencionar un ejemplo, se tiende a crear complejas estructuras en el DOM usando el lenguaje de marcas HTML5 y mediante el uso indiscriminado de div y span que resultan en su mercado en un código difícil de manejar. Se suele decir que HTML5 es semántico y fácil de usar pero a medida que nuestro proyecto crece demanda incorporar elementos que le dotarán de funcionalidad.
En otras palabras, en HTML5 la lista disponible de etiquetas semánticas simplemente no es suficiente para apuntar a la amplia variedad de componentes que constituyen nuestro diseño, demasiados componentes similares en nuestra página web que caen bajo la misma estructura semántica. Para distinguirlos unos de otros, utilizamos clases, ID u otros atributos y es fácil perderse si no mantenemos un orden.
Para resolver esto la W3C propone la introducción de componentes web, una colección de especificaciones que permiten a los desarrolladores reutilizar su código de una manera eficiente. Cada componente se encuentra contenido en su propia unidad lógica y cambian la forma en que construimos y concebimos aplicaciones web. Pues estos componentes no solo se pueden compartir en una sola aplicación web, sino que también se pueden distribuir en la web para que otros los usen.
Los componentes web se componen de cuatro especificaciones diferentes:
Muchos framework modernos introducen las recomendaciones de la W3C. Lo que nos lleva al siguiente paradigma. El uso de un framework puede ocultar la complejidad del código fuente real, pero con esta introducción seguramente tendremos una idea de la compleja estructura que puede llegar a alcanzar el DOM en aplicaciones web modernas.
Las especificaciones introducidas anteriormente son bastante nuevas y no es sorprendente ver que el soporte en algunos navegadores puede no ser del todo bueno. Para resolverlo Google desarrolló PolymerJS, una librería JavaScript en principio orientada para el desarrollo de proyectos internos pero que proporciona un conjunto de polyfills, fragmento de código JavaScript, que nos permite usar componentes web en navegadores no compatibles de forma nativa con un marco fácil de usar.
Con Polymer es posible:
Cuando comenzamos a echar un vistazo a Polymer, es difícil evitar sentirse inmediatamente intrigado por su propia y única visión del mundo. Polymer pretende adoptar una especie de enfoque de regreso a la naturaleza - aquí deberíamos poner una voz al estilo de Félix Rodríguez de la Fuente - que "pone a los elementos nuevamente en el centro del desarrollo web". Con Polymer.js, podemos crear nuestros propios elementos HTML y componerlos en aplicaciones web completas y complejas que sean escalables y mantenibles. Se trata de crear nuevos elementos (es decir, personalizados) que luego se pueden reutilizar en sus páginas HTML de manera declarativa, sin necesidad de conocer o comprender sus aspectos internos.
Si bien el enfoque filosófico de Polymer ciertamente tiene mérito, desafortunadamente es una idea que (al menos en cierta medida) está adelantada a su tiempo.
Polymer.js establece una gran cantidad de requisitos en el navegador, basándose en una serie de tecnologías que aún están en proceso de estandarización (por W3C) y que aún no están presentes en los navegadores de hoy. Los ejemplos incluyen sombras, plantillas de elementos, elementos personalizados, HTML imports, vistas dirigidas, puntero de eventos, y animaciones web. Estas son tecnologías maravillosas, pero al menos por ahora, que aún están por llegar a los navegadores modernos.
La estrategia de Polymer es hacer que los desarrolladores front-end aprovechen estas tecnologías de vanguardia mediante el uso de polyfills (código JavaScript descargable que proporciona características que aún no están integradas en los navegadores actuales). Este código está diseñado para poder ser reemplazado sin problemas a medida que los navegadores se actualicen.
En consecuencia, al menos en la actualidad, Polymer parece más un concepto intrigante que una opción real para crear aplicaciones robustas para cambiar su visión del mundo aquí y ahora, lo que hace que escribir (o encontrar) un tutorial de Polymer sea difícil fuera de la documentación de Google.
Para comenzar, hay algunos artículos y resúmenes de tutoriales que ayudan a dar nuestros primeros pasos con PolymerJS, entender sus conceptos, su estructura y elementos. Pero quizá tras leer toda la documentación sigamos con cierta sensación de incertidumbre al no estar seguro por dónde comenzar.
Para comenzar con Polymer sin complicaciones es recomendable utilizar Bower, el gestor de dependencias para proyectos web. Esta herramienta, basada en NodeJS, permite mediante su API de comandos realizar toda clase de tareas de mantenimiento y administración de paquetes necesarios para nuestro proyecto.
Con Bower y desde la línea de comandos nos dirigimos a la carpeta del proyecto e instalamos Polymer con el comando bower install polymer. ¿Puede ser más fácil?
Ya dentro de la carpeta bower_components encontraremos por un lado el propio Polymer, y el polyfill para Web Components. Este último es muy importante, pues nos ofrecerá la siempre necesaria compatibilidad con los navegadores antiguos, que todavía no soportan el estándar de los Web Components, al permitir que puedan entenderlo por medio de una librería Javascript.
Pero no hemos terminado con Bower aún, necesitamos además los elementos en nuestro proyecto. ¿Cómo lo hacemos? En la documentación del catálogo de elementos, accesible desde elements.polymer-project.org, encontraremos explicaciones detalladas, una demostración y otros recursos de ejemplo.
En este ejemplo, vamos a instalar un componente que nos permite tener una barra de desplazamiento, conocida como paper-slider. Siguiendo la documentación para descargar el componente, utilizaremos la siguiente instrucción: bower install –save PolymerElements/paper-slider.
Un componente Polymer tiene dos partes fundamentales que tenemos que definir durante su creación:
Tras ejecutar el comando, poco después, veremos una serie de carpetas en las que encontraremos el código del elemento que queremos instalar y sus dependencias.
Para usar el componente, primero tendremos que importarlo, de modo que el navegador sepa dónde se encuentra su código fuente, y después usarlo como si se tratase de cualquier etiqueta común de HTML.
Para importar el componente usaremos la etiqueta link:
<link rel="import" href="/blogbower_components/paper-slider/paper-slider.html">Esta etiqueta, que colocaremos en el
de nuestra página, nos permite acceder a un archivo .html que tiene el código del custom element, tanto su HTML como el Javascript y el CSS, por medio de un único fichero.
En el cuerpo del documento HTML podemos usar perfectamente la etiqueta
El siguiente paso es agregar en el
de nuestro proyecto web añadir Polyfill para que nuestros elementos sea compatibles con los navegadores que no implementan el estándar de los Web Components.
<script src="/blogbower_components/webcomponentsjs/webcomponents-lite.min.js"></script>El HTML del ejemplo completo sería:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Probando elemento de Polymer, paper-slider</title>
<script src="/blogbower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/blogbower_components/paper-slider/paper-slider.html">
</head>
<body>
<h1>Probando paper-slider</h1>
<paper-slider></paper-slider>
</body>
</html>
Ahora vamos a ver cuál sería el código mínimo necesario para la creación de un componente Polymer. Veremos que el proceso es muy similar a lo que antes describimos en el anterior punto.
<!-- Importar polymer -->
<link rel="import" href="/components/polymer/polymer.html">
<!-- Definir el componente -->
<dom-module id="mi-elemento">
<template>
<p>DOM local</p>
</template>
<script>
Polymer({
is: 'mi-elemento',
});
</script>
</dom-module>Para definir el componente usaremos la etiqueta
Nota: Es importante que los nombres de los componentes tengan al menos un guión (–), para distinguirlos de etiquetas HTML.
Luego añadimos la etiqueta <template>, que es donde se ubica el HTML y CSS del componente.
<template>
<style>
div{
color: red;
}
</style>
<div>
Este es el contenido del <b>componente</b>
</div>
</template>
Por último tenemos usaremos la etiqueta <script> para poder registrar el componente. Se hace con la función Polymer y como parámetro enviaremos un objeto.
Polymer({
is: 'mi-elemento',
});
Ya tenemos nuestro componente creado y solo nos queda usarlo. Para ello crearemos un nuevo archivo HTML en el que agregaremos el import para poder traernos el código del componente.
<link rel="import" href="/blogmi-elemento.html">
Luego, como vimos, sólo será usar el componente, mediante una etiqueta con su nombre.
<mi-elemento></mi-elemento>El código HTML completo de la página de demo quedaría algo así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>elemento demo</title>
<link rel="import" href="/blogmi-elemento.html">
</head>
<body>
<mi-elemento></mi-elemento>
</body>
</html>Y con esto hemos terminado nuestro ejemplo. Sin embargo el siguiente paso ya necesita un poco más de reflexión. Para crear un proyecto completo necesitaremos conocer de primera mano qué componentes necesitaremos. Un enfoque sencillo es primero tratar de identificar desde una perspectiva visual los requerimientos de nuestro proyecto. Para ello existen muchas herramientas de diseño online que nos pueden ayudar si no somos muy de usar papel y lápiz, por otro lado, siempre quedará mejor.
PolymerJS ya tiene una trayectoria consolidada e historia. Se ha enfrentado a muchos desafíos como romper la ideología de la "biblioteca JS de cliente monolítico" a medida que más desarrolladores debaten sobre la adopción de Angular-vs-React. Polymer (y muchas otras bibliotecas) intenta evitar tales conflictos al tener su propio nicho.
El primer problema que Polymer enfrentó temprano fue que su desarrollo fue un proceso lento. Sus "competidores", como React, se implementaron mucho más rápido y ofrecieron muchas más funciones. Esto llevó a Angular y React a ganar más impulso. El impulso de Angular se vio obstaculizado cuando lanzaron su versión (2.0) TypeScript.
La adopción de Google Polymer se ha visto obstaculizada porque muchos desarrolladores están eligiendo bibliotecas más populares como Angular o React. Pero este no es realmente el problema de Polymer per sé. A fin de cuentas Polymer es un framework moderno, de última generación. Los componentes web permiten cierta flexibilidad a los desarrolladores y confiar menos en bibliotecas como jQuery y otras.
Aunque el uso de componentes web sigue siendo un concepto “nuevo” pero es claramente el futuro debido a su estandarizado por W3C y todos sabemos qué significa esto. Queda por ver qué evolución tendrá PolymerJS para adaptarse al futuro que está por llegar y su aceptación final por parte de la comunidad.
Es evidente que hay aprender nuevos lenguajes constantemente pero también conocer los pros y contras de los framework en los que se apoyan. En otras palabras, el mundo de la programación se basa en un continuo aprendizaje y conviene siempre preguntarse si el lenguaje o framework que estás usando a diario es el mejor para resolver el problema.
ifgeekthen.nttdata.com es un blog del grupo NTT DATA. Un proyecto que busca compartir con profesionales del mundo digital temas relacionados con la tecnología y el universo geek.
