Arquitectura

A grandes rasgos, Owl tiene 5 partes principales:

• un sistema DOM virtual (en src/blockdom)
• un sistema de componentes (en src/component)
• un compilador de plantillas (ubicado en la carpeta src/compiler)
• Un pequeño código de ejecución para unirlos (en src/app)
• un sistema de reactividad (en src/reactivity.ts)

Hay algunos otros archivos, pero el núcleo de Owl se puede entender con estas cinco partes principales.

El DOM virtual es un DOM virtual optimizado basado en bloques, que admite bloques múltiples (para fragmentos). Todo lo que Owl renderiza se representa internamente mediante un nodo virtual. La función del DOM virtual es representar de manera eficiente el estado actual de la aplicación y crear una representación DOM real cuando sea necesario, o actualizar el DOM cuando sea necesario.

• Algunos otros ayudantes/cosas a menor escala Una representación se produce en dos fases:
• Representación virtual: esto genera el DOM virtual en la memoria, de forma asincrónica
• parche: aplica un árbol virtual a la pantalla (sincrónicamente)

Hay varias clases involucradas en una representación:

• componetes
• un programador
• fibras: peque%C3%B1os objetos que contienen algunos metadatos, asociados con la representaci%C3%B3n de un componente espec%C3%ADfico

Los componentes se organizan en un árbol de componentes dinámico, visible en la interfaz de usuario. Siempre que se inicia una representación en un componente C:

• Se crea una fibra en ‘C’ con la información de propiedades de representación
• La fase de renderizado virtual comienza en C (renderizará de forma asincrónica todos los componentes secundarios)
• La fibra se agrega al programador, que sondeará continuamente cada cuadro de animación si la fibra está lista.
• Una vez hecho esto, el programador llamará a la devolución de llamada de la tarea, que aplicará el parche (si no se canceló mientras tanto).

🦉 VDom 🦉

Owl es un sistema de componentes declarativo: declaramos la estructura del árbol de componentes y Owl la traducirá a una lista de operaciones imperativas. Esta traducción la realiza un DOM virtual. Esta es la capa de bajo nivel de Owl; la mayoría de los desarrolladores no necesitarán llamar directamente a las funciones del DOM virtual.

La idea principal detrás de un DOM virtual es mantener una representación en memoria del DOM (llamado nodo virtual) y, siempre que se necesite algún cambio, regenerar una nueva representación, calcular la diferencia entre la antigua y la nueva y luego aplicar los cambios.

vdom exporta dos funciones:

• h: crea un nuevo nodo virtual
• patch: compara dos nodos virtuales y aplica la diferencia.

nota: El dom virtual de Owl es una bifurcaci%C3%B3n de snabbdom.