SolidJS vs React: la guía de inicio

En la superficie, SolidJS y React parecen estar estrechamente relacionados. Los marcos del lado del cliente son mutuamente comprensibles y ambos se utilizan para crear aplicaciones de una sola página (SPA). Si bien la experiencia del desarrollador para ambos es casi idéntica, la mecánica subyacente de cada marco es un contraste sorprendente.

Ambos marcos SPA son responsables de desglosar la estructura y la funcionalidad de la página web de una aplicación, pero en un navegador, estos marcos manipulan los elementos HTML de las páginas de manera diferente para brindar la experiencia de usuario deseada. SolidJS y React difieren en el uso que hacen del Modelo de objetos de documento (DOM). Echemos un vistazo más de cerca a cómo los componentes de React y SolidJS permiten que la lógica de la aplicación imite un sitio web de varias páginas.

una comparación rápida

Creo firmemente en un enfoque TL; DR, por lo que he resumido e ilustrado las principales diferencias entre React y SolidJS en la siguiente tabla:

Ahora profundicemos en las similitudes y diferencias entre React y SolidJS.

estructura de componentes

React y SolidJS tienen exactamente las mismas estructuras programáticas y soporte para componentes (piezas de código individuales y reutilizables).

Tanto en React moderno como en SolidJS, un componente consta de un render Función con propiedades como argumentos. Junto con el JSX de cada componente, el código es corto y conciso. JSX es fácil de entender y permite a los desarrolladores experimentados describir visualmente el modelo de un componente en su definición.

React y SolidJS ofrecen los mismos componentes, pero cada marco tiene un enfoque único para la representación. Los componentes de React se procesan cada vez (excepto cuando se usan memos), mientras que los componentes de SolidJS se procesan solo una vez.

Otra diferencia entre los dos marcos son sus diferentes características que permiten la funcionalidad de los componentes.

funcionalidad del componente

Un componente sin funcionalidad es solo marcado. Entonces, ¿cómo hacen React y SolidJS para que los componentes sean operativos? Sus enfoques son similares:

Debajo del capó, tanto los ganchos como las primitivas reactivas son una forma de interactuar con los respectivos sistemas de gestión de cambios React y SolidJS. En general, los dos marcos manejan las funciones de los componentes de manera similar, pero usan diferentes métodos o nomenclatura para hacerlo.

Exploremos diferencias de funciones más complejas: estado, memorización y efectos.

Condición

A veces, un marco necesita realizar un seguimiento de la información y las propiedades específicas que están vinculadas a un componente. Este concepto se llama estado y se puede acceder en React usando el useState Función. En SolidJS, este concepto se conoce como señal y su función de creación correspondiente es createSignal.

Los estados y las señales contienen datos de componentes (en forma de accesorios) que permiten que el marco realice un seguimiento de los cambios de valor. Y cuando el marco detecta un cambio, el componente se representa con los valores apropiados.

Efecto

Un efecto es una característica especial que es un bloque de construcción central tanto en React como en SolidJS. En lugar de responder a la interacción directa del usuario con el navegador, se activa un efecto cuando cambia el estado de un componente, similar a una devolución de llamada o un detector de eventos.

React define un efecto con el useEffect mientras que SolidJS la createEffect Función.

Aprender de memoria

La memorización optimiza el rendimiento del marco mediante el almacenamiento en caché de renderizados de componentes costosos y el uso de valores almacenados en caché cuando corresponde, en lugar de volver a calcular los valores. En React, implementamos la memorización usando uno de los tres ganchos:

React se basa en la memorización para que sus aplicaciones se rendericen rápidamente. Por el contrario, SolidJS rara vez requiere almacenamiento explícito debido a su seguimiento de cambios optimizado y uso de DOM. Para casos extremos donde los cambios de soporte de componentes no resultan en una actualización de renderizado, SolidJS administra el guardado a través de un único método invocado createMemo.

poder

SolidsJS y React tienen diferencias de rendimiento que van más allá de sus enfoques de memorización. Los dos lenguajes abordan la manipulación de HTML de maneras muy diferentes. El enfoque principal de esta diferencia es cómo cada uno actualiza el DOM del navegador.

El fundador de React le dio un DOM virtual liviano para interactuar con el DOM real del navegador. El código de React hace que su propio DOM virtual se actualice cuando se procesan los componentes. React luego compara el DOM virtual actualizado con el DOM del navegador, y los cambios identificados fluyen hacia la estructura de la página real (es decir, el DOM).

Podríamos argumentar que debido a que React vuelve a renderizar los componentes de forma predeterminada y se basa en los cálculos de diferencia de DOM para las actualizaciones, React está haciendo su trabajo dos veces. Debido a que renderiza componentes cada vez, React requiere almacenamiento para evitar cálculos innecesarios y repetitivos.

Por el contrario, el fundador de SolidJS logró eludir todos estos viajes de ida y vuelta. Mediante el uso de un mecanismo llamado reactividad de grano fino para manipular directamente el DOM del navegador, SolidJS ofrece una huella de memoria mucho más pequeña y una aplicación ultrarrápida de ediciones de página y código inyectado.

La reactividad de grano fino rastrea las dependencias variables. Basado en dependencias variables y cadenas de edición, SolidJS limita las actualizaciones de la estructura de nuestra página para reflejar solo lo que ha cambiado y omite las representaciones de componentes innecesarias. Esto da como resultado una mejora masiva del rendimiento con respecto a React.

Si bien estoy tentado a terminar el artículo aquí y decir que SolidJS es el claro ganador debido a su velocidad, sigue siendo importante discutir cómo se comparan los dos marcos en términos de eficiencia del desarrollador.

Productividad del desarrollador

Hay algunas consideraciones clave al observar la productividad del desarrollador en React versus SolidJS:

Una revisión de los casos de uso específicos de su proyecto puede revelar qué marco es la mejor opción en términos de productividad.

SolidJS frente a reaccionar

Tengo una experiencia considerable tanto con SolidJS como con React. En mi opinión, SolidJS es el claro ganador de los dos. SolidJS coincide con el rendimiento y las características sólidas de React. Además, proporciona a los usuarios finales una capacidad de respuesta rápida que React no puede igualar.

Casi no hay una curva de aprendizaje para que un desarrollador de React se familiarice con SolidJS, que aprovecha las lecciones, las estructuras y los enfoques abstractos aprendidos durante la vida de React. Le recomendaría que comenzara a usar SolidJS hoy; podría ser el futuro de la interfaz.

El equipo editorial del Blog de Ingeniería de Toptal quiere agradecerle Yonatan Bendahan por revisar el contenido técnico presentado en este artículo.

Lectura adicional en el blog de ingeniería de Toptal: