SolidJS: Reactivity Unchained

Rate this content
Bookmark

Únete a Ryan Carniato, creador de SolidJS, mientras muestra los fundamentos de esta visión única de un marco de JavaScript. Esta sesión reflexionará sobre los desafíos del desarrollo web moderno que motivaron la creación de Solid. Al volver a recorrer sus pasos desde los comienzos simples hasta un marco completo, Ryan mostrará cómo los primitivos reactivos son los únicos bloques de construcción que necesitas.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Solid.js es una biblioteca declarativa de JavaScript diseñada para construir interfaces de usuario. Se diferencia de otros frameworks por su enfoque en la reactividad de granularidad fina y por no utilizar un DOM virtual, lo que permite que los componentes solo se rendericen una vez.

Aunque Solid.js y React comparten conceptos como el flujo unidireccional y componentes de función, Solid.js se construye sobre una base de reactividad de granularidad fina y no utiliza un DOM virtual, lo que resulta en un modelo mental y un enfoque de actualización de componentes completamente diferente.

Las señales en Solid.js son un tipo de primitiva que actúa como un envoltorio sobre un valor, proporcionando funciones getter y setter. Permiten la reactividad en tiempo de ejecución y son fundamentales para la actualización automática de los componentes al cambiar los datos.

createEffect es una función en Solid.js que permite ejecutar efectos secundarios en respuesta a cambios en las señales. Estos efectos se activan automáticamente cuando los valores observados cambian, permitiendo actualizaciones dinámicas y reactivas del UI.

Sí, Solid.js utiliza JSX, que es una sintaxis que extiende JavaScript y permite describir la interfaz de usuario de manera declarativa. En Solid.js, JSX compila directamente a instrucciones que manipulan el DOM real, lo que mejora el rendimiento.

En Solid.js, los componentes se actualizan de manera eficiente gracias a su sistema de reactividad. Cada componente se renderiza solo una vez, y las actualizaciones se manejan a través de suscripciones a señales, lo que significa que solo las partes necesarias del componente se actualizan en respuesta a los cambios de datos.

No, a diferencia de otros frameworks como React, Solid.js no utiliza un DOM virtual. Esto permite interacciones más directas y eficientes con el DOM real, reduciendo la sobrecarga y mejorando el rendimiento en aplicaciones web.

Solid.js ofrece ventajas como mayor eficiencia en la actualización de componentes, menor uso de recursos al evitar un DOM virtual, y un enfoque en la reactividad granular que permite a los desarrolladores tener un control más fino sobre las actualizaciones de la interfaz de usuario.

Ryan Carniato
Ryan Carniato
20 min
20 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Solid.js es una biblioteca declarativa de JavaScript para construir interfaces de usuario que aborda la optimización del rendimiento. Introduce una reactividad detallada y evita el uso de un DOM virtual. La charla explora la reevaluación del rendimiento y la reactividad en aplicaciones web, la comprensión de la reactividad y los primitivos, y la creación de elementos del DOM y el uso de JSX en Solid.js. También cubre la representación de componentes, el intercambio de estado y las ventajas de la representación detallada y el enfoque reactivo en Solid.js.
Available in English: SolidJS: Reactivity Unchained

1. Introducción a Solid.js

Short description:

Solid.js es una biblioteca declarativa de JavaScript para construir interfaces de usuario. Es similar a React en algunos aspectos, pero tiene una implementación diferente. Solid está construido completamente en reactividad de granularidad fina y no utiliza un DOM virtual. El modelo de actualización y los ciclos de vida en los frameworks de JavaScript tienen implicaciones en tiempo de ejecución. Solid aborda la pregunta de cuándo y qué memoizar para la optimización del rendimiento.

Hola, soy Ryan Carneato, autor de Solid.js, y hoy voy a presentar una introducción a él. ¿Qué es Solid? Es una biblioteca declarativa de JavaScript para construir interfaces de usuario, como muchas otras que han surgido antes.

Solid, al menos en la superficie, es un framework muy similar a React. Valora las mismas cosas: flujo unidireccional, segregación de lectura y escritura, e interfaces inmutables. Está construido sobre los mismos bloques de construcción: primitivas similares a hooks, componentes de función y JSX. Y tiene muchas características similares, como portales y fragmentos, transiciones de suspensión, SSR en streaming y algunas otras que no están en React, como directivas personalizadas y obtención de datos.

Pero hay un pero, uno bastante grande. Solid no se parece en nada a React. Solid está construido completamente en reactividad de granularidad fina, similar a MobX y Vue. Sus componentes solo se renderizan una vez y no hay un DOM virtual. El modelo mental completo es completamente diferente. Los mismos valores, una implementación completamente diferente. Pero, ¿qué significa eso realmente? Bueno, el desarrollo web moderno durante años ha girado en torno a los componentes. Componentes de clase, componentes de función, componentes opcionales, componentes web. Y por una buena razón. Los componentes son bloques de construcción esenciales que permiten que nuestros programas sean modulares y componibles. Sin embargo, en casi todos los frameworks de JavaScript, tienen implicaciones en tiempo de ejecución. El modelo de actualización y los ciclos de vida están vinculados a ellos. Esto ha llevado básicamente a dos visiones del mundo. O bien se utiliza una diferencia de arriba hacia abajo como un DOM virtual o una plantilla literal de etiqueta. O, alternativamente, se depende en gran medida de la compilación para separar la creación de la actualización. Pero ambos todavía tienen componentes que se ejecutan básicamente de arriba hacia abajo. Y esto plantea la pregunta, ¿cuándo y qué memoizar? Esto es importante para el rendimiento, porque si vas a llamar algo una y otra vez, no quieres repetir el trabajo. Hay una gran charla de Sean en React Comp 2021 que aborda exactamente esto.

2. Construyendo una aplicación de lista de tareas en React

Short description:

Tu primera idea podría ser construir tu aplicación de lista de tareas en un framework como React. Pero a medida que tu programa crece, aplicas optimizaciones como memo y use callback. Vamos a compilarlo. Este es el resultado compilado, similar a lo que haría un framework como Svelte.

Tu primera idea podría ser construir tu aplicación de lista de tareas en un framework como React. Algo así. Declaras un estado y lo conectas. Pero en cualquier cambio, incluso si no está relacionado con la lista de tareas, estarías volviendo a renderizar toda la lista. Pero tal vez eso esté bien. Por eso existe un DOM virtual, para asegurarse de que esto no sea tan costoso. Pero tal vez aún quieras optimizar. A medida que tu programa crece, aplicas tus optimizaciones y las cosas pueden verse así. Tal vez agregues un filtro y algunos temas.

Y no hay nada inherentemente malo en esto. Pero ahora estamos anotando cosas con memo, use memo y use callback. Y agregando nuestras matrices de dependencia y asegurándonos de que todo se ejecute exactamente como queremos. Pero es un poco diferente a cómo comenzamos.

Entonces... Vamos a compilarlo. Y esto es lo que podrías obtener. Para ser justos, este no es el código que escribirías, es el resultado compilado, una especie de pseudo-código, del compilador experimental en el que el equipo de React está trabajando. Pero en realidad no es tan diferente de lo que haría un framework como Svelte. Son una serie de comprobaciones de igualdad referencial poco profundas que, en cada punto de decisión, se vuelven a ejecutar cuando se marca tu componente como necesitando una actualización. El punto en común es un estado de actualización del componente, luego se ejecuta una función de actualización y se verifica contra estos valores memorizados, como se muestra aquí en esta memcache.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
WorkshopFree
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.