Aprende cómo funcionan los frameworks modernos de JavaScript construyendo uno tú mismo

Entender cómo funcionan los frameworks modernos de JavaScript

• Crear tu propio framework de JavaScript ayuda al aprendizaje.
• "Frameworks modernos de JavaScript" se refiere a los frameworks posteriores a React.
• Estos frameworks se inspiraron en React, pero evolucionaron en direcciones bastante similares.

Características de los frameworks modernos

• Usan reactividad para actualizar el DOM.
• Usan clonación de plantillas para renderizar el DOM.
• Usan APIs web modernas como <template> y Proxy.

Reactividad

• A menudo se menciona que React no es reactivo.
• Los frameworks modernos priorizan el rendimiento usando un modelo reactivo basado en push.
• Implementan actualizaciones del DOM cada vez que cambia el estado mediante Proxy.

Clonación de árboles del DOM

• Usar la etiqueta <template> para analizar el HTML una sola vez y luego clonar todo rápidamente es una técnica eficiente.
• Este método se usa en varios frameworks de JavaScript.

APIs modernas de JavaScript

• <template> y Proxy son APIs que ayudan a construir sistemas de reactividad.
• Las tagged template literals se usan para crear una API de plantillas HTML de forma sencilla.

Etapas para construir la reactividad

• La reactividad, que define la gestión del estado y la actualización del DOM cuando el estado cambia, es la base del framework.
• Se usa Proxy para detectar cambios de estado y queueMicrotask para gestionar las actualizaciones de forma eficiente.

Etapa de renderizado del DOM

• Se usa la función html para construir el árbol del DOM y actualizarlo eficientemente.
• Se escriben plantillas HTML con tagged template literals y se optimiza el análisis del HTML con WeakMap.

Combinar reactividad y renderizado del DOM

• Se usa createEffect para actualizar el DOM según el estado.
• Se implementa para que el texto se actualice automáticamente cuando cambia el estado.

Siguientes pasos

• Hay varias formas de mejorar el sistema de renderizado del DOM.
• El objetivo es analizar la plantilla solo una vez y configurar los bindings una sola vez para minimizar las actualizaciones.

Opinión de GN⁺

Lo más importante de este artículo es entender los conceptos clave y la forma de implementación de los frameworks modernos de JavaScript, y aprender mediante la experiencia de crear realmente tu propio framework. Este enfoque puede ofrecer a ingenieros de software principiantes una oportunidad interesante y útil para comprender el funcionamiento interno de los frameworks y aplicarlo en la práctica.

[GN⁺]

Comentarios en Hacker News

• Recomienda los siguientes materiales para obtener una comprensión básica del tema de interés:

  • Computación incremental: enlace a Wikipedia
  • Cálculo autoajustable: artículo de Umut A. Acar
  • Introducción a la computación incremental de JaneStreet: enlace al blog
  • La web y la computación incremental: enlace al blog
  • DOM autoajustable: enlace al blog
  • DOM autoajustable y datos con diff: enlace al blog
  • Borrador sobre computación incremental de Rado Kirov: Parte 1, Parte 2, Parte 3
  • Hacia una teoría unificada de las UI reactivas: texto de Raph Levien

• Aclaraciones sobre malentendidos de React y cómo funciona realmente:

  • Cuando se actualiza el estado, React reconstruye solo ese componente y sus hijos, no todo el árbol del DOM virtual.
  • useMemo no evita el rerenderizado; React.memo es lo que cumple esa función.
  • React no es "solo push" porque almacena las actualizaciones en búfer.
  • La ventaja de las signals es que el framework sabe qué propiedades del DOM deben rerenderizarse, pero eso no significa necesariamente reactividad.

• Evaluación positiva de Svelte y casos de uso:

  • El compilador de Svelte es muy extensible y puede procesar plantillas de Svelte de una manera especial.
  • Comparte la experiencia de haber construido Svekyll (un clon de Jekyll, la herramienta de blogs estáticos) con Svelte.

• Distintas perspectivas sobre los frameworks reactivos:

  • Se comparten materiales introductorios sobre frameworks reactivos como Solid.
  • Comparte la experiencia de haber escrito un renderer/framework web para entender la reactividad de solid-js.
  • Recomienda materiales de aprendizaje para implementar React por cuenta propia.

• Preguntas y discusión sobre la reactividad de React:

  • Pregunta cómo se podría hacer que React fuera "reactivo".
  • Opinión de que ya no deberían desarrollarse más frameworks de JS.

• Pregunta planteada a personas con amplia experiencia en frameworks frontend:

  • Pregunta sobre frameworks/librerías que soporten un effect system para tareas de renderizado.