React actualmente sigue siendo de de las bibliotecas Frontend de Javascript mas populares para crear interfaces de Usuario (UI), y a pesar que casi cada año surgan nuevas opciones, o tambien parece que ha medida que pasa el tiempo los desarrolladores tambien buscan alternativas, React sigue siendo de las mejores herramientas para encontrar un trabajo dedicado a Frontend, aunque por supuesto no es la unica opcion, Angular y Vue son tambien frameworks que se usan profesionalmente, pero React tiene algunas caracteristicas que funcionan muy bien a tal punto que tiene alternativas que son muy similares, o estan fuertemente inspiradas, y de esto quisiera hablarles hoy.
Ahora cuando hablo de alternativas similares a React no estoy hablando de meta frameworks como Nextjs, Remix, porque eso son mas herramientas que usan a React por debajo, y tampoco estoy hablando de frameworks como Svelte o Lit, que son frameworks completamente distintos, sino de verdaderas alternativas de React que proveen una experiencia de usuario practicamente similar, es decir usan JSX para crear interfaces, tienen el conceptos hooks, o permiten ser integradas incluso con bibliotecas de React que ya existen, por lo que aprenderlas es casi instantaneo, entre estas alternativas podemos encontrar a frameworks como:
- Preact
- Solidjs
- Qwik
- Infernojs
- Mithril.js
Por supuesto cada una tiene sus caracteristicas, asi que vamos a ver mas a detalle cada una de estas, empecemos con Preact.
Preact
Si lo que siempre te ha preocupado de React, ha sido el rendimiento, la velocidad y el tamaño de la aplicación. Preact seria una opcion para ti, ya que esta es una alternativa mas ligera a React (alrededor de los 3.5 kb) para desarrollar aplicaciones web, y que tiene la misma API de React ademas de soporte a las ultimas caracteristicas de EcmaScript, y aunque tambien posee un virtual dom, esta muy pensada para trabajar con el DOM del navegador tambien, de alli que sea mucho mas veloz.
Tiene una documentacion bastante detallada y su comunidad sigue estando activa desde hace mas de 5 años, Este tiene tambien tiene su propio CLI similar a como en React tiene a creat-react-app, aunque tambien puede usarse con Vitejs, sin ningun problema.
Y hay algunas empresas que ya usan Preact en produccion, como lo seria Uber o Lyft.
Ademas Tiene un paquete llamado preact/compat para ofrecer 100% de compatibilidad con React. Permitiendo que los desarrolladores usen bibliotecas de React con Preact para escribir código y que se integren con ReactDOM sin realizar ningún cambio en tu codigo base.
es decir esta es una alternativa a React que es enteramente compatible con todo el codigo que ya hayas desarrollado de otros proyectos, y que puedes usar cuando te preocupe el peso, o el tamaño de tu aplicacion. De hecho Preact se desarrolló como una alternativa ligera a React. Por lo tanto, la mayor parte del desarrollo a través de esta biblioteca imita a React en lugar de crear caracteristicas completamente distintas, lo que tambien es interesante porque es tambien un framework que permite usar cosas que React aun no tiene, por ejemplo actualmente si quieres usar Signals en React, que es una alternativa mas eficiente a los useState, y que es lo mas comentado estos ultimos meses en cuanto a Frameworks de Frontend, puedes usarlos en React gracias a que Preact ya tenia implementado una biblioteca y como son compatibles tambien puedes usarlos.
import React from "react";
import { signal, effect } from "@preact/signals-react";
const count = signal(0);
const Counter = () => {
effect(() => console.log(count.value));
return <button onClick={() => count.value++}>{count}</button>;
};
Aunque si ya tienes un proyecto escrito en React, y ahora quieres usar Preact, es necesario usar bibliotecas adicionales como preact/compat, preact/test-utils, etc., para brindar conectividad entre los paquetes npm basados en Preact y React. Y Esto hace que en desarrollo el proyecto sea grande y lento, aunque en produccion notaras mejoras.
Esto hace que algunos proyectos sigan usando a React por su ecosistema grande de herramientas y por su popularidad, y añadan a Preact por razones de rendimiento cuando es necesario. Pero no podemos decir que Preact pueda reemplazar a React, ya que van muy unidas, e incluso puedes usar ambas bibliotecas o cambiar entre estas dos según sus necesidades. Aparte de esto, no se requiere que los desarrolladores aprendan una tecnología completamente nueva para usar Preact, pero eso si, deben tener experiencia en React.
Y por cierto se que Deno, el entorno alternativo a Nodejs no es tan popular, pero aqui tambien hay un Framework basado en Preact llamado Fresh, que te permite crear aplicaciones con Server Side Rendering muy facilmente, y desplegandolas muy rapidamente en su propio servicio llamado Deno Deploy, es decir es algo asi como Nextjs con Vercel pero en el mundo de Deno y Preact. Si quieres saber mas de eso, te dejo un video en el que mostré como usarlo.
Ahora si bien existen bibliotecas como Preact que solo tratan de ir detras de React, sin romper la contabilidad, tambien hay otras que no necesariamente van en esta liena, una de estas es por ejemplo Solidjs.
Solidjs
SolidJS es una biblioteca de interfaz moderna que se centra en el rendimiento y la escalabilidad. Está diseñado para ayudar a los desarrolladores a crear aplicaciones web rápidas, eficientes y reutilizables en esencial como cualquier framework, solo que este es una especie de reescritura de React, con caracteristicas y conceptos modernos, lo que quiere decir que a pesar que sea un Framework Nuevo, si comparten muchos conceptos y tecnologias similares con React, por ejemplo ambos permiten escribir las interfaces usando JSX, lo que tambien significa que ambos permiten separar interfaces grandes en componentes, que son funciones. Incluso el codigo es similar
Por ejemplo es un componente de React, que permite contar con un boton
import React, { useState } from 'react';
function Contador() {
const [count, setCount] = useState(0);
return (
<div>
<p>Contador: {count}</p>
<button onClick={() => setCount(count + 1)}>Aumentar</button>
</div>
);
}
export default Contador;
Y este es su equivalente en solidjs:
import { createSignal } from 'solid-js';
function Contador() {
const [count, setCount] = createSignal(0);
return (
<div>
<p>Contador: {count()}</p>
<button onClick={() => setCount(count() + 1)}>Aumentar</button>
</div>
);
}
export default Contador;
Como puedes ver son practicamente lo mismo. Lo que tambien significa que ambos se basan en crear interfaces Reactivas y declarativas y ambos tienen un flujo de datos en una sola direccion (Unidirectional data flow)
Ademas que poseen soporte a Typescript. Por ejemplo este es el código anterior de Solid con Typescript:
import { createSignal } from 'solid-js';
interface ContadorProps {
initialCount?: number;
}
function Contador({ initialCount = 0 }: ContadorProps) {
const [count, setCount] = createSignal(initialCount);
const handleClick = () => {
setCount(count() + 1);
};
return (
<div>
<p>Contador: {count()}</p>
<button onClick={handleClick}>Aumentar</button>
</div>
);
}
export default Contador;
Aunque hasta aqui llegas sus similitudes, porque Solidjs a diferencia de React, no manipula un virtual DOM sino el DOM Real, y tambien evita hacer re-renders en cada cambio de componente, haciendo que sea un framework con un rendimiento excelente. Es decir que mientras los componentes de React se procesan cada vez (salvo el uso de memorización), los componentes de SolidJS solo se procesan una vez, gracias aun mecanismo llamado fine-Grained Reactivity que directamente manipula el DOM.
De hecho ambos tienen Hooks, que en la practica hacen lo mismo pero que en diseño Solid tiene formas mas optimizadas de lograrlo, por ejemplo en React tenemos useState, en solid tenemos createSignal y ambos sirven para poder actualiza la interfaz en cambios, es decir manejar un estado. En react tenemos useEffect en Solid createEffect y ambos sirven para ejecutar logica cuando cambie un estado, o react tenemos funciones para optimizar la interfaz y que no haga rerenders, usando hooks como memo, useCallback useMemo, en Solid debido a su diseño, rara vez se necesita hacer esto, pero cuando se requeire solo existe uno llamado createMemo.
Y aunque la comunidad de Solid sea pequeña, si tiene una documentación bastante detallada de lo que el Framework puede hacer, ademas de herramientas para hacer Scaffolding, es decir crear proyectos rapidamente, ademas tambien permite hacer Server Side Rendering (Hydratation) y concurrent Rendering (Suspense), y un MetaFramework llamado SolidStart, que seria un equivalente a Nextjs, pero en el mundo de Solid, pero que aun esta en Beta
Qwikjs
Misko Hevery, es el creador del Framework Angular, que cuando incio esto de la popularidad de los frameworks de Javascript, Angularjs era de los frameworks mas innovadores y que muchos proyectos modernos empezaron a usar en su epoca, ahora similar a como Angular trajo conceptos nuevos al desarrollo frontend, Misko tambien ha desarrollado Qwikjs, que es un framework basado en muchos conceptos de React, pero con un proposito mucho mas enfocado a crear aplicaciones muy pesadas, y con mucha interactividad
Es decir este framework te permite dividir aplicacion entera en pequeñas partes, haciendo que cuando cargue tu aplicacion frontend, solo se envie un HTML, y un archivo de Javascript de 1Kb, y luego se descarguen porciones de Javascript a medida que se necesite funcionalidades. Y esto no es nuevo, ya que el concepto de Lazy Loading siempre ha estado alli, pero lo que hace a Qwik unico, es que este carga no solo pagina o componentes grandes con Lazy Loading, sino practicamente cada pequeña parte de la aplicacion, incluido hasta el estado de la aplicacion.
Lo que quiere decir que el codigo de javascript se descarga basado en eventos del navegador como clicks, scroll, u otros eventos basado en la interacción del usuario
Haciendose llamar reale nte un framework de Lazy Loading, de hecho si tu usuario ve un botón, este no tiene codigo de javascript, hasta que recien hace un click, el codigo es descargado y ejecutado. haciendo que no importe el tamaño del sitio, y cuanta interactividad necesite, la carga siempre sera rapida siempre (menos de 1sg)
Y aunque suene como algo a futuro que podria usarse, de hecho este framework ha sido creado para resolver un problema ya existente de la plataforma builder.io, y ya se usa en producción en este sitio. Veran builder.io es un CMS que puede integrarse en proyectos de codigo existen para añadir un panel administrador e interfaces graficas para poder editar tu sitio, y como es una plataforma que esta compuesta de muchas interfaces, estado, configuraciones, y eventos, el cargar porciones grandes de javascript para no usarse, no es bueno para la carga inicial ni tampoco el consumo de recursos, asi que si un usuario hace click en un boton aqui este es mejor que el frameork permita descargar solo lo que el usuario va a necesitar en ese momento, haciendo que estas interfaz grande sea muy veloz siempre.
Ahora la razon que diga que es un framework alternativo a React, es que Qwik de hecho hace uso de JSX, los componentes de React, y los estados de React, a tal punto que usarlo es practicamente instantaneo.
Aunque tambien añade unos hooks especiales que empiezan con un $, que significa que estos se descargaran basados en eventos,
import { component$ } from '@builder.io/qwik';
export default component$(() => {
return <section class="section bright">A Joke!</section>;
});
E incluso tambien tiene su propia biblioteca basada en archivos similar a lo que ofrece Nextjs, llamada Qwik City, lo que lo convierte en un framework mas completo.
Mithril.js
Y finalmente tenemos a Mithril que si bien no es de las mas populares y probablemente mucho de ustedes ni siquiera sabian que existia, tambien vale la pena considerarlo una alternativa a React ya que tambien soporta JSX, permit llamar funciones al estilo de React, e incluso ya tiene incluida su propia biblioteac para hacer fetch de datos, y en mi opinion su sintaxis es como una especie de combinacion entre React y Vue, por lo que si has probado ambas, puede que te recuerde a ambas, ya que peudes añadir simplemente una cdn y usarla
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body
// your code goes here!
</script>
</body>
o puedes crear funciones al estilo de los componentes de React
import m from "https://esm.run/mithril";
function counter() {
let count = 0;
function increment() {
count++;
}
return {
view: () => [
m("h1", count),
m("button", { onclick: increment }, "Increment"),
],
};
}
m.mount(document.body, counter);
Tambien es una biblioteca muy ligera (9.5kb)
Y aunque parezca que nadie usa esta biblioteca, en realida esta siendo usada por Vimeo y Nike, ademas ya tiene sus propias bibliotecas de animaciones, testing y enrutadores, aunque su documentacion es muy simple, y debido a su comunidad pequeña limita su uso extendido al igual que los otros frameworks.
Y por cierto aqui tambien puede haber añadido a Infernojs, que tambien es otro framework basado en React y que de hecho es de los mas veloces que existen, y tiene tambien soporte a JSX, Typescript, Componentes como Funciones, y hooks similares a React, incluso soporte a Clases, solo que su creador ahora tambien forma parte del proyecto de Svelte asi que no estoy tan seguro cual sera el futuro del proyecto, pero si necesitan otra opcion pueden investigarla desde su propia documnetacion.
Conclusion
En fin, como puedes ver estos son frameworks relativamente nuevos en comparacion a React, pero que practicamente usan muchos conceptos que ya conocemos de esta biblioteca asi que aprenderlos puede ser muy facil dependiendo que tan bien conozcas React. Ahora cabe resaltar que hay muy poca oferta laboral en estos otros frameworks, asi que te los recomendaria si lo tuyo es mas buscar una alternativa similar a React que sea mas rapida o eficiente, quizas para un proyecto nuevo o un proyecto que buscas mejorar mucho el rendimiento, pero si lo tuyo es mas encontrar un trabajo como desarrollador te diria que sigas con React, porque este seguira siendo de los frameworks mas usados durante varios años mas, a pesar de estas otros soluciones, asi que siempre considera si vale la pena estar invirtiendo tiempo en proyectos muy poco conocidos con el fin de solo ganar rendimiento, y si este es el caso, indaga los recursos y la comunidad de cada uno para ver si te es acorde a lo que necesitas.