Cada vez tenemos más frameworks para desarrollar nuestro proyecto, lejos quedaron los tiempos en los que nuestras opciones eran, React, React y React, bien es cierto que estaba AngularJs y Vue, pero su cuota de mercado fue decayendo tanto que la opción que la mayoría de los desarrolladores elegían era React.
Hoy ya no tenemos solo tres opciones, tenemos tantas que en breve las vamos a poder contar por decenas. Si bien es cierto que la cuota de mercado que tiene React es tan amplia que pensar en la muerte de React es prácticamente inviable, ¿pero es hoy en día la mejor opción para desarrollar una aplicación desde cero? Desde mi punto de vista no, aunque el que React lleve en nuestras vidas desde 2013 y eso le ofrezca una gran ventaja de solidez y el tamaño de su comunidad, en cuestiones de rendimiento se ha quedado atrás con el agravante de que para solucionar esos problemas de rendimiento con respecto a otras opciones les supondría una reescritura prácticamente completa de la biblioteca.
Vamos a desgranar las opciones más interesantes que tenemos hoy en día y que tendrías que valorar a la hora de elegir el framework para desarrollar tu aplicación.
Svelte
Más concretamente SvelteKit es sin duda la opción más interesante que deberías explorar. Lanzada hace poco su versión estable y desarrollada por Vercel es impresionante el poco código necesario a la hora de crear un componente y sobre todo la hora de declarar estados. Además nos permite embeber los estilos dentro del propio componente de una manera muy simple y encapsulados dentro del propio componente.
<script>
let counter = 0;
</script>
<button on:click={() => counter++}>Increment {counter}</button>
<style>
button {
background-color: #03adfc;
color: white;
padding: 10px;
border: none;
}
</style>
En el ejemplo anterior estamos creando un botón al que le damos el estilo dentro de la etiqueta style y para crear un estado sencillamente declaramos la variable counter dentro de la etiqueta script la cual modificamos con el evento on:click propio de svelte.
SvelteKit es en sí mismo un compilador lo que reduce mucho el peso del bundle a la hora de servirlo en el navegador y va hidratando el componente según es necesario. Tiene formas muy cómodas para además declarar estados globales que puedes consumir en todos tus componentes y decenas de características que lo hacen una opción muy muy muy interesante.
La única pega que puedo encontrarle es que a diferencia de otros frameworks que toman la sintaxis de React como un estándar para reducir la curva de aprendizaje, ésta en Svelte es un poco más agudizada, podríamos encontrarle algunas similitudes con Vuejs, pero no es lo mismo. Aunque para contrarrestar esa curva de aprendizaje la verdad es que cuenta con una magnífica documentación.
Sin duda es el candidato con el que desarrollaré mi próximo proyecto personal.
Qwik
Otra opción más que interesante con la que he jugado levemente es Quik, framework muy a tener en cuenta. Una de sus grandes ventajas es que si sabes React, sabes Qwik ya que comparte la misma sintaxis JSX para crear componentes y aplicaciones.
Como características principales de Qwik destacaría cosas como que no necesita un virtual dom como React para hacer la re renderización del componente de manera óptima, incluso mucho más óptima que React ya que cuando un estado cambia en un componente consigue hacer que solo el componente afectado sea renderizado nuevamente sin afectar a todo el árbol de componentes dependientes.
Otra cosa que me ha gustado mucho y me parece muy innovador es el uso que hace de los Service Workers, los que utiliza para almacenar en caché los recursos necesarios que permiten al usuario interactuar con la aplicación, de este modo no necesita descargar toda la aplicación en una petición si no ir haciéndolo de manera progresiva además sin bloquear el hilo principal.
Muy a tener en cuenta también lo que llaman Resumable que es el proceso en el que Qwik sirve la aplicación desde el servidor hasta el navegador, siendo capaz de deducir que partes de la aplicación pueden ser servidas y enviadas como HTML, detener el proceso cuando detecta que el componente requiere interactuar en el cliente y reanudándolo al llegar al cliente, de este modo evitan lo que conocemos como hidratación e incluso es capaz de conservar un estado generado en el servidor y mantenerlo en el cliente.
Si te gusta la sintaxis JSX y vas a empezar un nuevo proyecto, dale una oportunidad, estoy seguro que te va a encantar.
Fresh Deno
No he tenido tiempo para jugar con Fresh, pero también parece muy interesante. Corre exclusivamente bajo Deno que es, si no lo conoces una evolución de Node, de echo, desarrollado por el mismo creador. Utiliza sintaxis JSX, tiene SSR y utiliza el concepto de hidratación de Islas en el lado del cliente.
Esto de las Islas es una buena idea a la hora de servir la aplicación al cliente y lo que hace es detectar que componentes puede enviar en el propio HTML si no necesitan interacción y que componentes hidratará en el navegador porque si la necesiten.
La filosofía detrás de esto es enviar el menor código Javascript al lado del cliente, es más, si tu aplicación no requiere de interactuaciones que necesiten de Javascript no enviará absolutamente nada, ejecutando todo el Javascript necesario en el navegador. De lo contrario, es capaz de enviar el componente isla al navegador ya en el propio HTML e hidratarlo en el cliente manteniendo el estado.
Es rápido, no necesita configuraciones ofrece el soporte para Typescript que Deno nos ofrece por defecto y usa JSX por lo que de nuevo si conoces React no tendrás problemas para desarrollar tu aplicación con Fresh.
Astro
Por último mencionaré Astro, otro framework muy interesante a tener en cuenta para elegir según el tipo de proyecto que estés haciendo. Como bien dicen en su web, está pensado para crear sitios que no son SPA (Single Page Application), de echo si ese es tu objetivo incluso te recomiendan que utilices otro framework.
Eso no significa que no puedas crear una SPA con Astro, de echo si puedes hacerlo porque una de las características de Astro es que puedes usar cualquier Framework dentro del propio Framework.
Con Astro crear una aplicación multi página que tenga SSR es muy fácil y además es muy rápido. Ofrece su propia manera de crear componentes aunque bien es cierto que estos no son reactivos por defecto. La filosofía de Astro es similar a la de Fresh, enviar al cliente el menor código Javascript posible. Aunque ofrece integraciones muy interesantes para añadir framworks ejecutando un simple comando de npx.
Yo particularmente lo he usado para crear aplicaciones multi páginas con la integración de Lit, es magnífico para este propósito ofreciéndote todas las ventajas de Lit y el Server Side Rendering para no tener que preocuparte por el SEO cuando creas los componentes de tu aplicación.
Si este es el tipo de proyecto que necesitas desarrollar astro es sin duda tu mejor opción.