El año de los Web Components
Qué son y cómo usarlos
Introducción
Dentro del universo del desarrollo web existen muchas tecnologías que nos ayudan a desarrollar productos tecnológicos de primer nivel: Frameworks, bibliotecas, API’s HTML5, service workers…
Una de estas tecnologías es la API HTML de Web Components, que aunque lleva un tiempo a nuestro alrededor, este último año está demostrando ser una tecnología que ha llegado para quedarse y puede cambiar totalmente nuestra manera de plantear nuevos proyectos.
Qué son los Web Components
Los Web Components son un conjunto de APIs Web que nos permiten crear nuevas etiquetas HTML a medida, reutilizables y encapsuladas que podemos utilizar para crear webs y webapps.
Estos elementos custom se crean sobre el estándar de Web Components, funcionan en todos los navegadores modernos, y se pueden usar con cualquier biblioteca o framework javascript.
Se pueden entender como pequeñas cajas de código que podemos incluir dentro de nuestra web de forma independiente al resto del código y que se comunican eventos de entrada y de salida.
Antes de entrar en detalle sobre por qué es ahora el mejor momento para usarlos y cómo podemos implementarlos, vamos a dar un pequeño repaso a la historia de esta tecnología.
Historia de los Web Components
El concepto fue introducido por primera vez en 2011 por el ingeniero de Google Alex Russell, en la charla que ofreció para la Fronteers Conference.
Era la época en la que Chrome y Firefox competían por ser la referencia en el campo de los navegadores webs y en la que los primeros frameworks como AngularJS empezaban a asentarse y a sustituir a jQuery.
Alex Russel planteaba que la web tendría que evolucionar en dos direcciones:
- Mejora y desarrollo de frameworks de alto nivel que nos permitisien crear productos web de primera calidad.
- Mejora de las APIs y estándares web, para permitirnos evolucionar hacia la web que se empezaba a demandar, y que a día de hoy ya tenemos.
Fue en 2013 cuando Google y el equipo de Chrome desarrollaron la primera versión de este estándar de creación de Web Components, la versión V0 y junto a ella, nació el proyecto Polymer, una biblioteca de creación de Web Components que entre otras cosas se usó para desarrollar de forma genérica los componentes de Material Design. Esta primera versión V0 se creó internamente en Google, por lo que la compatibilidad con navegadores era muy reducida o necesitaba de un fuerte uso de polyfills.
Fue en entre 2016 y 2018 cuando todo cambió, Google presentó el estándar Web Components V1, que fue adoptado por la mayoría de los navegadores modernos. A lo largo de 2017–2018 el equipo de Polymer creó el proyecto LitElement y paralelamente el equipo de Ionic creaba StencilJS, las dos tecnologías referentes para el desarrollo de Web Components.
Compatibilidad de Web Components con navegadores: https://caniuse.com/#search=web%20components
Por qué es ahora el mejor momento para esta tecnología
En el universo del desarrollo web y del desarrollo de aplicaciones, nos encontramos ante un batalla campal entre frameworks y bibliotecas por ser la referencia entre los desarrolladores.
Prácticamente cada año sale un nuevo framework que promete ser la mejor herramienta posible para el desarrollo de nuestros productos.
La elección de un framework u otro limita enormemente la flexibilidad de los equipos de desarrollo, los componentes y herramientas desarrolladas no son sencillas de portar a otros framework y compartir lógica de negocio y funcionalidades entre distintos proyectos, no es precisamente un camino de rosas.
Los equipos que trabajan en el desarrollo de producto o en servicios, deben usar los frameworks como lo que son: herramientas, y debemos elegir uno u otro en función de las peculiaridades del proyecto. Sin embargo, esto nos obliga a, en muchas ocasiones, tener que re-codificar herramientas y funcionalidades para adaptarlos a los nuevos proyectos o servicios.
Aquí es donde entran en juego, y son una herramienta fundamental, los Web Components: nos permiten crear herramientas y funcionalidades que podemos usar sobre cualquier framework y en cualquier navegador y que se implementan bajo un estándar aceptado por toda la comunidad.
Qué nos permiten hacer los Web Components
Son varias las ventajas que vamos a conseguir mediante el uso de esta tecnología:
- Reusable elements: La capacidad de crear elementos web reutilizables entre nuestros proyectos.
- Design System: Un design System permite a una empresa o organización organizar todos sus recursos web primarios bajo una misma imagen y diseño de tal forma que puedan ser usado de forma transversal entre todos sus productos manteniendo una imagen de marca coherente y cohesionada.
- Micro Frontends: En ocasiones nos enfrentamos a bloques con lógica de negocio compleja que necesitamos compartir en otros proyectos o servicios.
- Agnostic WebNative Elements: Como ya hemos comentado, trabajar sobre un estándar web compatible con cualquier navegador moderno, permite que nuestros desarrollos perduren en el tiempo.
- Elegir el framework correcto: Poder trabajar con el framework que mejor se adapte a nuestro proyecto y no echar a perder todas las herramientas que ya tenemos desarrolladas.
Fundamentos básicos de los Web Components
Una vez entendido los beneficios de esta tecnología es momento de adentrarnos en la API.
El estándar se basa en cuatro pilares:
- CustomElements.
- Shadow Dom.
- ES Modules.
- HTML Templates.
CustomElements
La API CustomElements es la encargada de permitirnos crear una nueva etiqueta HTML, así como controlar el ciclo de vida del componentes y actuar sobre sus elementos de entrada salida.
Supongamos que queremos crear un nuevo componente que muestre un icono con la bandera de un país:
<flag-icon country="es"></flag-icon>
Para ellos vamos a crear un nuevo archivo .js y crearemos una clase que extiende de HTMLElement.
A continuación tendremos que definir esta nueva etiqueta para que el render sepa qué hacer. Para ello, haremos lo siguiente:
customElements.define("flag-icon", FlagIcon);De esta forma, cuando el navegador detecte la etiqueta flag-icon, creará una nueva instancia de nuestra clase FlagIcon.
ShadowDom
El concepto que implementa el ShadowDom ya se empezó a usar en las primeras versiones de WebCompoents (V0), mediante la etiqueta scoped. El objetivo es poder aislar los estilos de nuestros componentes del resto de estilos de la pagina, de tal forma que si nuestro componente contiene un <h1>TEXT</h1> y hemos definido un estilo para él, no pueda ser alterado.
Mediante el uso del ShadowDom vamos a poder encapsular nuestro componente para decidir qué estilos podrán ser modificables o no por el resto del documento.
ESModules
La definición de ESModules nos permite importar y reutilizar estos componentes y el código JavaScript en cualquier parte de la aplicación y bajo demanda, esto permite desarrollar de forma modular estos componentes:
HTMLTemplates
Por ultimo la definición de HTML Templates, nos permite definir un fragmento de código HTML que no será cargado en memoria en la carga de la página, y podrá ser instanciado más tarde durante el runtime, de tal forma que podamos mediante JavaScript, hacer uso de ellos bajo demanda:
Herramientas para desarrollo de Web Components
Una vez entendido cómo funcionan y sus fundamentos básicos, vamos a comentar las dos principales herramientas que ofrece el mercado para el desarrollo con esta tecnología:
StencilJS
StencilJS es una herramientas para crear Web Components reutilizables y escalables. Nos permite crear componentes optimizados y rápidos que funcionan en cualquier navegador web moderno.
Para ello, combina lo mejor de los frameworks más populares en una herramienta sencilla y fácil de usar. Algunas de sus principales características son:
- Virtual DOM.
- Async rendering (inspirado por React Fiber).
- Reactive data-binding.
- TypeScript.
- JSX ( so… TSX ❤️ ).
LitElement
LitElement permite crear componentes y design systems de una forma muy sencilla permitiendo compartir recursos y elementos de UI entre tu organización.
Te permite crear Web Components que pueden ser utilizados en cualquier navegador y con cualquier framework.
Conclusiones
Ambos sistemas permiten obtener el mismo resultado pero con orientaciones distintas, así que dejaremos para otro post una comparativa entre ambos… :P
