Únete a mí en una discusión provocadora sobre Llevando Ideas Controversiales a React.js, donde exploraremos algunos de los temas más debatidos en el ecosistema de React. Esta charla profundiza en los conceptos de mutabilidad y observabilidad en React y los compara con frameworks como Solid.js y Svelte. También discutiremos el debate sobre actualizaciones granulares versus Reconciler y el potencial de un sistema de plugins para extender las aplicaciones de React, y el impacto que podría tener en la comunidad de React. Los asistentes obtendrán una comprensión más profunda de los desafíos y controversias de React en comparación con otros frameworks y cómo la comunidad los está abordando.
Video Summary and Transcription
Esta charla discute la implementación de ideas controvertidas en React, la construcción de una arquitectura de plugins y el uso de Redux sin el método Connect. Explora la implementación de plugins que inyectan funcionalidad en la interfaz de usuario y el uso de MobxStateTree. La charla también destaca los desafíos de conectar todo a Redux y los beneficios de implementar re-renderizados personalizados para un mejor rendimiento. Enfatiza la importancia de explorar nuevos territorios y abrazar ideas controvertidas para obtener nuevas perspectivas.
Available in English
1. Building Plugin Architecture and Redux Usage
Short description:
Hablaré sobre la introducción de ideas controvertidas en React, la construcción de una arquitectura de complementos y el uso de Redux sin el método Connect.
¡Hola a todos! Soy Sanket y trabajo en Geeky Ants. En estos días estoy construyendo un marco de trabajo de pila completa llamado GlueStack. Genial. Hoy quiero hablar sobre la introducción de ideas controvertidas en React, hablar sobre controversias y tienes que hablar sobre señales, ¿verdad? Luego tengo algunas otras cosas también, cómo construí una arquitectura de complementos y la usé en varios proyectos. Luego tengo Redux y cómo uso Redux sin React Redux y el método Connect para lograr un mejor rendimiento. Veamos la arquitectura de complementos. Si estás familiarizado con WordPress, es posible que hayas encontrado el increíble sistema de complementos que tiene WordPress, puedes instalar un complemento y obtener muchas características, ya sea algunos elementos visuales o alguna funcionalidad en tu aplicación. Me gustó y traté de construir algo así en React, y define más que solo funcionalidad, sino también algunos límites visuales como inyectar algo en el encabezado, pie de página o tal vez establecer alguna comunicación entre los complementos o las dependencias entre los complementos. Veamos qué exactamente tuve que construir. Aquí tienes un ejemplo. Puedes ver las dos pestañas en el lado izquierdo, la configuración y el perfil. Entonces, estos dos se logran como dos complementos diferentes.
2. Plugin Architecture and MobxStateTree
Short description:
Los complementos de Configuración y Perfil van más allá de la parte visual. Inyectan funcionalidad en la interfaz de usuario, como la autorización. El Administrador de Complementos actúa como una tienda y permite la iteración de los complementos. La implementación de un complemento como Configuración implica funciones como getName y getSVGLogo. Este enfoque permite mejorar las aplicaciones de forma independiente de la aplicación principal.
El primero es el complemento de Configuración y el segundo es el complemento de Perfil. Esto va más allá de la parte visual. Inyecta estas dos cosas en la interfaz de usuario, pero también agrega muchas funcionalidades. Por ejemplo, el complemento de Perfil implementa una parte de la autorización, y otros complementos pueden usarlo para detectar si el usuario ha iniciado sesión o no. Estos son los dos complementos.
En la aplicación principal, puedo iterar sobre los complementos desde el Administrador de Complementos y renderizar cosas como Plugin.getSVGLogo, Plugin.getName. Entonces, a nivel más alto, el Administrador de Complementos es como una tienda. He utilizado MobxStateTree, que en sí mismo es un tema muy discutido. Sí, tiene complementos cargados y los complementos se almacenan en un array.
Si observamos una de las implementaciones de un complemento, por ejemplo, el complemento de Configuración. Tiene una carga de complemento. Por ejemplo, el complemento de Configuración implementa las funciones getName, getSVGLogo y simplemente funciona. Esto no es como micro frontends, porque aquí nos mantenemos en el contexto de la aplicación principal y estamos tratando de comunicarnos entre diferentes cosas. Esto va más allá de ser solo un almacenamiento de contenedores. Es un cambio en la mentalidad de cómo construyes aplicaciones, donde puedes mejorar las cosas de forma totalmente separada de tu aplicación principal.
3. Redux, Connect Method, and Signals
Short description:
Utilicé Redux pero me di cuenta de que no necesito el método Connect. Después de eliminarlo, implementé mis propias re-renderizaciones para obtener un mejor rendimiento. Conectar todo a Redux fue un desafío debido al gran número de elementos. Reemplazamos los métodos Connect con un hook que solo re-renderizaba componentes específicos. Las señales y la observabilidad se han discutido en el contexto de MobX y los principios fundamentales de React. No te sientas cargado de idealismo, explora nuevos territorios y abraza ideas controvertidas para obtener nuevas perspectivas.
Genial. El segundo es cómo utilicé Redux y finalmente me di cuenta de que no necesito el método Connect. Y después de eliminar el método Connect, tuve que implementar mis propias re-renderizaciones, que implementé y logré un mejor rendimiento. Entonces, esta es la herramienta de diseño en la que estaba trabajando. Se llama BuilderX. Y cada elemento que ves en la pantalla fue renderizado por React, incluso los tableros de arte que ves y los elementos más pequeños, como capas y texto en ellos.
Conectar todo a Redux fue un poco complicado, porque si observas la estructura del DOM o el árbol del DOM virtual, tenemos que agregar el método Connect en cada ubicación. Y este método Connect se ejecuta cada vez que hay un dispatch, cada vez que hay un cambio de estado, se ejecutan estos métodos Connect. Y el problema aquí es que tenía muchos elementos y todos esos elementos tenían métodos Connect, que se llamaban en cada movimiento del mouse en la herramienta de diseño. Entonces, hubo optimizaciones iniciales con selectores y esas cosas, pero realmente no funcionaron. Eliminamos los métodos Connect e implementamos un hook que fue el camino del cambio, y luego solo volvió a renderizar esa cosa específica. Creamos un hook y cada vez que había un cambio en todo el árbol, solo se volvían a renderizar los listeners de esas rutas y componentes diferentes.
Genial, y el tercero es obviamente señales y observabilidad. Las señales han estado presentes desde los primeros días de MobX, y así es como también lo explica Ryan, React fue una señal 10 años después. Ha habido muchas discusiones una y otra vez, desde que lo llamamos observabilidad y observador antes y ahora lo llamamos señales. No entraré en profundidad, pero se está utilizando. Si miras MobX, se está utilizando, incluso la aplicación Blue Sky que salió, utiliza MobX, lo cual es increíble. Pero como mantenedor de una biblioteca, o si estás construyendo una biblioteca de propósito general, tus filosofías deben mantenerse en el nivel más básico sin agregar muchas complejidades. Así es como lo explica Dan, que las props y los estados de React son valores sin procesar. Lo crudo es poco sofisticado, y esa es la esencia. También dice que React siempre será un hogar para aquellos que los aprecien, porque los valores sin procesar no tienes que crear modelos y envolver tus valores y hacer todas esas cosas, que es el principio fundamental de React, lo cual es agradable y tiene mucho sentido para una biblioteca de propósito general como React. Pero lo que quiero decir es que no te sientas demasiado cargado de idealismo. Conoce los conceptos básicos y explora nuevos territorios. Algo que es genérico y ampliamente aceptado, está bien si eso no funciona para ti y quieres hacer algo que se considere un anti-patrón. Las ideas controvertidas aportan nuevas perspectivas, sigue adelante y mantente amable y humilde, aprende de los demás y construye grandes cosas. Soy Sanket. Muchas gracias por escucharme.
