Es cierto que algunos frameworks, como React o Angular, han puesto de moda el desarrollo de aplicaciones por medio de componentes. A diferencia de los web components nativos, estos framework no utilizan los estándares, por lo que la interoperabilidad y reutilización de su components entre diferentes proyectos se ve condicionada a la inclusión de estos marcos de trabajo.
Sin embargo, últimamente han sucedido varios acontecimientos que me han hecho recuperar el interés en esta manera de entender el desarrollo web.
El primero y clave ha sido la publicación de la especificación V1 de los custom elements y el shadow DOM, que ha puesto de acuerdo a todos los navegadores en la inclusión de estas características, de forma que la mayoría ya las tienen implementadas o al menos lo han incluido en su roadmap, por lo que podemos decir que estamos bastante cerca de tener un soporte total. Esto supone un gran paso, puesto que usar directamente la plataforma no solo nos ahorra dependencias y capas de abstracción que harán que nuestras aplicaciones sean más eficientes, sino que además aportará longevidad a nuestros desarrollos. El hecho de que los navegadores incluyan una funcionalidad implica que ésta esté ahí para siempre, o al menos por mucho tiempo.
El siguiente hecho, consecuencia del anterior, es la puesta en producción de Polymer 2.0. Polymer es una librería que nos facilita el uso de los web components en nuestras aplicaciones pero, a diferencia de React o Angular, ésta si usa los estándares. Además en la versión 2.0 se acerca mucho más aún al #usetheplattform, lo que la hace mucho más ligera (11K incluyendo polyfills) y rápida.
Y por último, el hecho de que Google emplee Polymer en el nuevo rediseño de Youtube o Google Earth, me parece un muy buen empujón a esta tecnología.
¿Por qué usar Web Components?
Todos estos argumentos basados en los estándares no son lo únicos por los que realmente merece la pena usar esta tecnología en nuestros desarrollos web e híbridos. Además de esto los web components nos aportan:
Interoperabilidad
Al ser neutros los web components podemos reutilizarlos en cualquier proyecto al igual que usamos los elementos HTML.
Sostenibilidad
Al ser módulos independientes, con un estilo y comportamiento determinado, podemos testarlos fácilmente facilitando su mantenimiento a cualquier desarrollador.
Escalabilidad
Ampliar nuestra aplicación y añadirle nuevas funcionalidades puede ser tan sencillo como añadir nuevos componentes.
Eficiencia en el desarrollo
Al estar libres de dependencias facilitan la reusabilidad de código incluso entre diferentes proyectos.
Rendimiento
Son la mejor manera de construir aplicaciones web progresivas (PWA), en las que podemos cargar no solo el contenido sino también las funcionalidades de nuestra aplicación a demanda del usuario. Esto es especialmente importante en el mundo móvil (dispositivos lentos, malas conexiones… ) en el que cada byte que se descarga tiene un coste.
Simplicidad
El paradigma de los web components es el poder llegar a construir una aplicación de una forma completamente declarativa. De manera que incluso alguien que no sepa programación pudiera construir esa aplicación solo con el hecho de combinar estos componentes.
Mientras esto llega podemos usar los componentes web en tareas más cotidianas como la de embeber código de otras aplicaciones en la nuestra. Por ejemplo añadir un botón de follow de Twitter en nuestra aplicación sería algo así:
<twitter-follow-button username="TwitterDev" show-count="false">Follow @TwitterDev</twitter-follow-button>.
A mi modo de ver, es una forma más sencilla y clara de cómo se hace actualmente:
<a href="https://twitter.com/TwitterDev" class="twitter-follow-button" data-show-count="false">Follow @TwitterDev</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Resumiendo
Después de todo esto no solo podemos decir que los web components son una realidad, sino que además están aquí para quedarse.
No quiero decir que sea la tecnología definitiva, ni que no se puedan usar otros framework o librerías. Habrá que analizar en cada caso qué conviene más a nuestro proyecto. Lo que sí creo es que pueden facilitar enormemente el desarrollo de las aplicaciones en muchos casos. Por ejemplo, en grandes empresas en las que la funcionalidades de negocio y la línea gráfica están muy definidas.
Referencias:
- Regarding the broken promise of Web Components: Rob Dodson
- Polymer: How We Got Here and Where We’re Going: Taylor Savage
- Go long on web components: Jani Tarvainen
