En el panorama del desarrollo web, durante los últimos años, se ha llevado a cabo una guerra de frameworks Javascript basados en componentes, donde ha habido una «explosión» y han surgido varios actores, evolucionado a medida que pasa el tiempo y sufriendo sus particulares ventajas y desventajas ante los retos y tendencias que iban apareciendo en el desarrollo frontend moderno.
Es difícil explicar la historia de los frameworks Javascript con neutralidad, pero intentaré poner un poco de contexto siendo lo más imparcial posible, centrándome en la aparición de estos en la cronología del tiempo y centrándome en detalles muy concretos que permitan compararlos.
La guerra de frameworks
A lo largo de la última década, han surgido varias librerías y frameworks —incluso muchos más que no aparecen en esta lista— pero he decidido centrarme en los que creo que están destacando en el panorama actual, marcando una tendencia clara. Todos ellos incorporan la posibilidad de crear componentes, puesto que se descubre que es un modelo que resuelve muchos problemas de escalabilidad en desarrollos, y que resulta muy cómodo para trabajar:
En el gráfico se pueden ver varias franjas principales:
- La trayectoria Angular (la cuál se bifurca y nace Vue)
- La trayectoria WebComponents
- La trayectoria React
- La trayectoria Svelte
La trayectoria Angular
AngularJS nace como un framework que revoluciona el panorama del desarrollo web, mostrando una forma de trabajar bastante cómoda y agradable que se parece mucho a lo que probablemente hoy conozcas como Vue. De hecho, el framework Vue surge porque su creador, Evan You, era un desarrollador de AngularJS que decidió crear un framework con lo mejor de AngularJS pero con mejor rendimiento y mucho más liviano.
Además, en 2014 se anuncia que Angular comienza un nuevo camino como un framework que sufre un giro de 180 grados, reescribiéndose casi por completo y perdiendo la compatibilidad con sus versiones previas. La comunidad de Angular se fragmenta debido a este cambio, y muy probablemente, de ahí surge con fuerza parte de Vue.
Actualmente, Angular es un framework monolítico que suele venir con casi todo preincorporado. Es por ello que su curva de aprendizaje es más compleja, pero también por ello suele ser la opción mas escogida en empresas, debido a características como su naturaleza opinionated, o a la incorporación de TypeScript por defecto, que suele aumentar la confianza en el código debido a, principalmente, su tipado.
La trayectoria WebComponents
Los WebComponents, aunque parezcan una novedad por lo mucho que se escuchan últimamente, aparecen por primera vez en 2011, en la Fronteers 2011 Conference. No se trata de un framework, ni una librería, sino de extender el lenguaje HTML para incorporar los componentes como un estándar (de forma nativa en el navegador). Uno de los objetivos, con esto, sería conseguir cierta estabilidad y frenar la aparición de nuevos frameworks cada cierto tiempo.
No es hasta 2016 que se lanza la nueva versión de WebComponents, la cuál por fin es adoptada por la mayoría de navegadores (incluido Safari, quién retrasó el despegue de los WebComponents por no soportarlo durante años) y comienza a ser posible utilizarlos de forma nativa. LitElement (evolución de Polymer) es una de las librerías que más se utilizan para ello, la cuál está basada en WebComponents.
Actualmente, los WebComponents suelen usarse en lugares donde los desarrolladores quieren seguir un enfoque estándar y apuestan por «la Plataforma Web». Si quieres más información sobre Componentes web nativos (o herramientas relacionadas), puedes echarle un vistazo al tema especializado en WebComponents de esta página.
La trayectoria React
En 2013 una de las grandes revoluciones en el mundo del desarrollo de frontend lo provoca React, una librería de Facebook para crear interfaces web de usuario que cambia de forma considerable la manera de hacer aplicaciones web, convirtiéndose en la actualidad, en casi un estándar de facto.
React aborda un enfoque diferente donde se comienza a tomar Javascript como el centro neural de las aplicaciones web (más al estilo NodeJS, abandonando el enfoque «HTML-centric»), considerando así tecnologías como HTML, CSS o similares, un complemento que se añade a Javascript. Además, en el ecosistema de React, se hace un alto uso de estrategias, tooling y herramientas que funcionan fuera del navegador, transpilando y procesando código.
Cerca de 2015 se lanza Preact, una implementación de React, utilizando un enfoque más estándar: se utiliza la API de Javascript para conseguir un aproximación más cercana al navegador, consiguiendo mayor rendimiento en aplicaciones web, interesantes en proyectos donde el rendimiento es muy importante.
Actualmente, se podría decir que React persigue el objetivo de convertirse en una capa de abstracción para desarrollar tanto aplicaciones web, como aplicaciones móviles (React Native) u otras, más que un framework específico y único para aplicaciones web.
La trayectoria Svelte
Aunque Svelte nace en 2016, no es hasta 2019 cuando se lanza Svelte3, trayendo un gran cambio como un framework que toma lo mejor de las tres trayectorias mencionadas.
A grandes rasgos, Svelte toma el modelo de archivos .vue para componentes SFC y añade un paso de compilación, aprovechando y utilizando características muy interesantes que harán posible escribir menos código y que sea más sencillo. Sin embargo, se trata de un framework muy reciente y solo el tiempo nos dirá si se convertirá en uno de los grandes, recomendable para adoptar en proyectos que crecen considerablemente.
Si tienes más curiosidad sobre Svelte y quieres profundizar un poco más, puedes ver este artículo de Midu.dev: Introducción a Svelte.
¿Qué es un componente?
Ahora que tenemos un background sobre los frameworks Javascript más populares, podemos empezar a hablar de componentes.
Al igual que para organizar información cambiante usamos variables y para simplificar múltiples acciones utilizamos funciones, necesitamos estructuras que nos permitan organizar cómodamente varios aspectos del desarrollo web, de modo que sea cómodo, práctico y fácil trabajar con ellos, y es justo ahí donde aparece el concepto de componente.
Los componentes nos permiten organizar tres aspectos fundamentales (facilitando su reutilización en aplicaciones o componentes más grandes):
- Estructura e información (Código HTML)
- Aspecto visual (Código CSS)
- Funcionalidad (Código Javascript)
Cada una de las trayectorias citadas anteriormente tiene su forma de definir y entender los componentes, con sus respectivas prioridades y enfoques. Sin embargo, la idea básica es crear uno (o varios) ficheros que definan estos tres conceptos y nos permitan utilizarlo como una etiqueta HTML para simplificar su uso:
<BaseHeader></BaseHeader>Por ejemplo, la etiqueta <BaseHeader> no es una etiqueta HTML existente, por lo que el framework interpreta que debe existir un componente BaseHeader (con su código HTML, CSS y Javascript), lo importa y lo utiliza en la página. Esto además nos permite ir creando componentes como capas de abstracción, de modo que simplificamos todo en componentes y nos resulta muchísimo más sencillo desarrollar.
Además, los componentes suelen permitir pasar parámetros a través de props (atributos HTML) que podrán recogerse desde dentro del componente y utilizarse:
<BaseHeader data="40"></BaseHeader>Sin embargo, esto lo explicaremos más adelante, puesto que la implementación y forma de utilizar props suele variar de un framework a otro (incluso llamarse o ser cosas diferentes).
En el siguiente tema veremos como son los componentes en Vue y como podemos definir archivos .vue para crearlos y reutilizarlos.
