UI framework en 5 minutos

Hace algún tiempo, me preguntaba por qué hay tantos marcos de interfaz de usuario para la web. He estado en TI durante mucho tiempo y no recuerdo que las bibliotecas de interfaz de usuario en otras plataformas nacieron y murieron a la misma velocidad que en WEB. Bibliotecas para SO de escritorio, tales como: MFC, Qt, WPF, etc. - eran monstruos que se desarrollaron a lo largo de los años y no tenían una gran cantidad de alternativas. Todo es diferente en la Web: los marcos se lanzan casi todas las semanas, los líderes cambian.

Creo que la razón principal es que la complejidad de escribir bibliotecas de interfaz de usuario ha disminuido considerablemente. Sí, para escribir una biblioteca que muchos usarán, aún requiere mucho tiempo y experiencia, pero para escribir un prototipo, que, cuando está envuelto en una API conveniente, estará listo para usar, toma muy poco tiempo. Si está interesado en cómo se puede hacer esto, siga leyendo.

¿Por qué este artículo?

Hubo un tiempo en Habré que había una serie de artículos: escribir X para 30 líneas de código en js.

Pensé: ¿es posible escribir una reacción en 30 líneas? Sí, durante 30 líneas no tuve éxito, pero el resultado final es bastante acorde con esta cifra.

En general, el propósito del artículo es puramente educativo. Puede ayudar a comprender un poco más el principio del marco de UI basado en la casa virtual. En este artículo quiero mostrar cuán simple es hacer otro marco de interfaz de usuario basado en un hogar virtual.

Al principio quiero decir lo que quiero decir con el marco de la interfaz de usuario, porque muchos tienen opiniones diferentes sobre esto. Por ejemplo, algunos creen que Angular and Ember es un marco de interfaz de usuario y React es solo una biblioteca que facilitará el trabajo con la parte de vista de la aplicación.

Definimos el marco de la interfaz de usuario de la siguiente manera: esta es una biblioteca que ayuda a crear / actualizar / eliminar páginas o elementos de página individuales en este sentido, una gama bastante amplia de envoltorios sobre la API DOM puede resultar ser el marco de la interfaz de usuario, la única pregunta son las opciones de abstracción (API) que esta biblioteca proporciona para manipular el DOM y en la efectividad de estas manipulaciones

En la redacción propuesta: React es un marco de interfaz de usuario bastante.

Bueno, veamos cómo escribir su React con blackjack y más. Se sabe que React usa el concepto de un hogar virtual. En una forma simplificada, consiste en el hecho de que los nodos del DOM real se construyen en estricta conformidad con los nodos del árbol DOM virtual construido previamente. La manipulación directa del DOM real no es bienvenida, si necesita realizar cambios en el DOM real, los cambios se realizan en el DOM virtual, luego se compara la nueva versión del DOM virtual con la anterior, se recopilan los cambios que deben aplicarse al DOM real y se aplican de tal manera que se minimice la interacción con el DOM real. DOM: lo que hace que la aplicación sea más óptima.

Dado que el árbol de la casa virtual es un objeto ordinario de Java-Script, es bastante fácil manipularlo, cambiar / comparar sus nodos, por la palabra es fácil aquí, entiendo que el código de ensamblaje es virtual pero bastante simple y puede ser generado parcialmente por un preprocesador a partir de un lenguaje declarativo de un nivel superior JSX.

Comencemos con JSX

Este es un ejemplo de código JSX

const Component = () => ( <div className="main"> <input /> <button onClick={() => console.log('yo')}> Submit </button> </div> ) export default Component 

necesitamos hacer un DOM virtual al llamar a la función Component

 const vdom = { type: 'div', props: { className: 'main' }, children: [ { type: 'input' }, { type: 'button', props: { onClick: () => console.log('yo') }, children: ['Submit'] } ] } 

Por supuesto, no escribiremos esta transformación manualmente, usaremos este complemento , el complemento está desactualizado, pero es lo suficientemente simple como para ayudarnos a entender cómo funciona todo. Utiliza jsx-transform , que convierte JSX de esta manera:

 jsx.fromString('<h1>Hello World</h1>', { factory: 'h' }); // => 'h("h1", null, ["Hello World"])' 

entonces, todo lo que tenemos que hacer es implementar el constructor vdom de los nodos h, una función que creará recursivamente nodos DOM virtuales, en el caso de una reacción, la función React.createElement hace esto. A continuación se muestra una implementación primitiva de dicha función.

 export function h(type, props, ...stack) { const children = (stack || []).reduce(addChild, []) props = props || {} return typeof type === "string" ? { type, props, children } : type(props, children) } function addChild(acc, node) { if (Array.isArray(node)) { acc = node.reduce(addChild, acc) } else if (null == node || true === node || false === node) { } else { acc.push(typeof node === "number" ? node + "" : node) } return acc } 

Por supuesto, la recursión complica un poco el código aquí, pero espero que esté claro, ahora con esta función podemos construir vdom

 'h("h1", null, ["Hello World"])' => { type: 'h1', props:null, children:['Hello World']} 

y así para los nodos de cualquier anidamiento

Genial, ahora nuestra función Componente devuelve el nodo vdom.

Ahora, la parte será que necesitamos escribir una función de patch que tome el elemento DOM raíz de la aplicación, el viejo vdom, el nuevo vdom y actualice los nodos del DOM real de acuerdo con el nuevo vdom.

Tal vez puedas escribir este código más fácilmente, pero resultó que tomé el código del paquete picodom como base

 export function patch(parent, oldNode, newNode) { return patchElement(parent, parent.children[0], oldNode, newNode) } function patchElement(parent, element, oldNode, node, isSVG, nextSibling) { if (oldNode == null) { element = parent.insertBefore(createElement(node, isSVG), element) } else if (node.type != oldNode.type) { const oldElement = element element = parent.insertBefore(createElement(node, isSVG), oldElement) removeElement(parent, oldElement, oldNode) } else { updateElement(element, oldNode.props, node.props) isSVG = isSVG || node.type === "svg" let childNodes = [] ; (element.childNodes || []).forEach(element => childNodes.push(element)) let oldNodeIdex = 0 if (node.children && node.children.length > 0) { for (var i = 0; i < node.children.length; i++) { if (oldNode.children && oldNodeIdex <= oldNode.children.length && (node.children[i].type && node.children[i].type === oldNode.children[oldNodeIdex].type || (!node.children[i].type && node.children[i] === oldNode.children[oldNodeIdex])) ) { patchElement(element, childNodes[oldNodeIdex], oldNode.children[oldNodeIdex], node.children[i], isSVG) oldNodeIdex++ } else { let newChild = element.insertBefore( createElement(node.children[i], isSVG), childNodes[oldNodeIdex] ) patchElement(element, newChild, {}, node.children[i], isSVG) } } } for (var i = oldNodeIdex; i < childNodes.length; i++) { removeElement(element, childNodes[i], oldNode.children ? oldNode.children[i] || {} : {}) } } return element } 

Esta implementación ingenua, es terriblemente no óptima, no tiene en cuenta los identificadores de los elementos (clave, id) para actualizar correctamente los elementos necesarios en las listas, pero en casos primitivos funciona bien.

La implementación de las createElement updateElement removeElement no la traigo aquí, es notable, cualquiera que esté interesado puede ver la fuente aquí .

Existe la única advertencia: cuando se actualizan las propiedades de value para input elementos de input , la comparación no debe hacerse con el antiguo vnode sino con el atributo de value en la casa real: esto evitará que el elemento activo actualice esta propiedad (ya que ya está actualizada allí) y evitará problemas con el cursor y selección.

Bueno, eso es todo, ahora solo tenemos que juntar estas piezas y escribir el marco de la interfaz de usuario
Nos mantenemos dentro de 5 líneas .

1. Como en React, para construir la aplicación necesitamos 3 parámetros
   export function app(selector, view, initProps) {
   selector - selector dom de raíz en el que se montará la aplicación (por defecto 'cuerpo')
   view - una función que construye el vnode raíz
   initProps: propiedades de la aplicación inicial
2. Tome el elemento raíz en el DOM
   const rootElement = document.querySelector(selector || 'body')
3. Recolectamos vdom con propiedades iniciales
   let node = view(initProps)
4. Montamos el vdom recibido en el DOM como el viejo vdom que tomamos nulo
   patch(rootElement, null, node)
5. Devolvemos la función de actualización de la aplicación con nuevas propiedades.
   return props => patch(rootElement, node, (node = view(props)))

¡El marco está listo!

'Hello world' en este Framework se verá así:

 import { h, app } from "../src/index" function view(state) { return ( <div> <h2>{`Hello ${state}`}</h2> <input value={state} oninput={e => render(e.target.value)} /> </div> ) } const render = app('body', view, 'world') 

Esta biblioteca, como React, admite la composición de componentes, agregando y eliminando componentes en tiempo de ejecución, por lo que puede considerarse un marco de interfaz de usuario . Un caso de uso un poco más complejo se puede encontrar aquí Ejemplo de tarea pendiente .

Por supuesto, hay muchas cosas en esta biblioteca: eventos del ciclo de vida (aunque no es difícil sujetarlos, nosotros mismos gestionamos la creación / actualización / eliminación de nodos), actualizaciones separadas de nodos secundarios como este.setState (para esto necesita guardar enlaces a elementos DOM para cada uno vdom node: esto complicará un poco la lógica), el código patchElement es terriblemente no óptimo, no funcionará bien en una gran cantidad de elementos, no rastrea elementos con un identificador, etc.

En cualquier caso, la biblioteca se desarrolló con fines educativos; no la use en producción :)

PD: Me inspiró la magnífica biblioteca Hyperapp para este artículo, parte del código fue tomado de allí.

Buena codificación!