Myapp extiende vacaciones

Estoy seguro de que habrá personas entre la audiencia respetada que me entenderán. El hecho es que en toda la abundancia de bibliotecas y marcos populares para la interfaz web, personalmente no me gustan casi todas las alternativas. En cada una de las opciones encuentro desventajas significativas para mí que me impiden usarlas con calma. Todo comienza siempre de una manera optimista: un concepto interesante, sonido, a primera vista, razonamiento en puntos "para" ... Pero luego, todo, una y otra vez, comienza a encontrarse con dependencias redundantes, entidades superfluas e intentos de resolver los problemas que los propios desarrolladores crearon. Se nos ofrece aprender una nueva sintaxis, aceptar nuevas ideas, aprender un montón de palabras de moda, instalar muchos paquetes "necesarios". Ok, me encanta todo lo nuevo y me encantan las palabras inteligentes. Pero estoy muy desanimado cuando lo que se puede hacer simplemente, la gente comienza a complicarse fractalmente. Probablemente ya leyó las confesiones de aquellos que, como yo, desesperaron de buscar el sentido común en todo esto y decidieron ir al otro extremo: escribir todo "en vainilla". Esto me sucedió cuando me decepcionó el proyecto Polymer , creado con la participación activa de desarrolladores de Google. Al principio me gustó mucho, el lema de este movimiento fue la frase "¡Usa la plataforma!", Que significaba para mí: "no debes hacer en el código lo que el navegador hará más eficientemente". El equipo de Polymer ha hecho mucho para introducir nuevos estándares y capacidades a nivel de plataforma, y ​​muchas gracias por eso. Pero cuando se lograron estos objetivos, ellos mismos comenzaron a violar sus propios principios. Y ahora su nueva biblioteca ( LitElement ) ya se niega a trabajar directamente en el navegador sin instalar un entorno especial, porque los chicos no siguen los estándares ... Continúo monitoreando el desarrollo de LitElement, e incluso veo signos obvios de que estas personas extraviadas están volviendo al verdadero camino, pero yo mismo ya No lo usaré, porque ahora tengo algo mejor.

Que?

Holiday.js es una biblioteca para aquellos que necesitan todo lo que necesitan y no necesitan nada extra. Vacaciones: porque trabajar con ella para mí es una fiesta. Y también porque lo escribí, principalmente en vacaciones o en vacaciones. Sin embargo, este es un proyecto muy serio, con la ayuda del cual se está desarrollando una serie completa de aplicaciones complejas para la "empresa sangrienta" que a la gente le gusta asustar a los principiantes en la construcción de bicicletas. También escribo todos mis proyectos personales en Holiday.js.

Todo se basa en el grupo de estándares Custom Elements y Shadow DOM , como habrás adivinado, y si ya estás familiarizado con ellos, te será muy fácil descubrirlo.

Cual es el punto?

Si yo mismo leí un artículo similar para no perder más interés, me gustaría ver un ejemplo de código de componente. Aquí esta:

import {HdElement} from '../../holiday/core/hd-element.js'; class MyComponent extends HdElement { constructor() { super(); this.state = { imageURL: 'images/photo.jpg', firstName: 'John', secondName: 'Snow', }; } } MyComponent.template = /*html*/ ` <style> :host { display: block; padding: 10px; background - color: #fff; color: #000; } </style> <img bind="src: imageURL" /> <div bind="textContent: firstName"></div> <div bind="textContent: secondName"></div> `; MyComponent.is = 'my-component'; 

Aquí vemos que el componente tiene un cierto estado y plantilla con atributos extraños de los elementos de " vinculación ". Estos atributos son la magia principal: le permiten analizar la plantilla y guardar una copia del resultado en la memoria para su uso posterior (clonación) SIN un procesamiento adicional de la cadena de la plantilla en el tiempo de ejecución JS, lo que proporciona un alto rendimiento durante la representación inicial cuando se instancia cada componente. A diferencia de muchas bibliotecas modernas en las que la parte del DOM de la que es responsable el componente está determinada por la función del estado, en Holiday.js una plantilla es un producto semiacabado que define la estructura inicial y permite enlazar datos más tarde, utilizando la API DOM habitual, y Funciona muy rápido. Volveremos al tema de la velocidad.

Voy a enumerar otras ventajas:

• Máxima proximidad a las API nativas, mínimas abstracciones adicionales
• Sintaxis de plantilla nativa: no necesita aprender HTML y CSS nuevos
• Para comenzar, no necesita instalar nada adicional, es posible que su proyecto no tenga una carpeta node_modules
• Facilidad: no obligará a los usuarios a esperar mucho tiempo para las descargas
• El kit incluye administración de estado global, enrutamiento, una biblioteca de interfaz de usuario: no te sentirás en el desierto

La documentación principal del proyecto: https://holiday-js.web.app/

Ciclo de vida

Veamos las etapas del ciclo de vida del componente:

 import {HdElement} from '../../holiday/core/hd-element.js'; class LifecycleExample extends HdElement { constructor() { super(); //   : this.state = { name: '', bigName: '', }; /*   ,      DOM  "   ",       .    ,      "defineAccessor": */ this.defineAccessor('name', (name) => { // Some accessor code: this.setStateProperty('name', name); }); /*    ,      DOM               . */ } connectedCallback() { super.connectedCallback(); /*  .    DOM.               . */ } stateUpdated(path) { /*        : */ if (path === 'name') { this.setStateProperty('bigName', this.state.name.toUpperCase()); } } attributeChangedCallback(attributeName, oldValue, newValue) { /*  .      . */ super.attributeChangedCallback(attributeName, oldValue, newValue); } disconnectedCallback() { /*  .    DOM.              */ } } LifecycleExample.template = /*html*/ ` <div bind="textContent: name"></div> <div bind="textContent: bigName"></div> `; /*  HTML-,     : */ LifecycleExample.logicAttributes = [ //   ,         'name', ]; /*     CustomElements: */ LifecycleExample.is = 'lifecycle-example'; 

Patrones

Dado que las plantillas en Holiday.js son solo literales de plantilla estándar, tiene total libertad sobre cómo ubicarlas en el proyecto y cómo formar sus contenidos. Puede ponerlos en módulos separados, puede definirlos junto con el código del componente, o puede generarlos sobre la marcha a partir de los datos. Puede usar expresiones y resultados de funciones en plantillas. Todo esto brinda grandes oportunidades y libertad de expresión. Por ejemplo, puede importar estilos comunes en una plantilla, usar variables y calcular valores en CSS sin usar preprocesadores y, con gran comodidad, ensamblar plantillas a partir de piezas preparadas.

Una parte importante de las plantillas de componentes web son las ranuras . Las ranuras le permiten designar lugares especiales en el DOM "sombra" de su componente, en el que sus descendientes directos se mostrarán en el árbol DOM general. Un ejemplo:

 <header> <slot name="header"></slot> </header> <div class="toolbar"> <slot name="toolbar"></slot> </div> <div class="content"> <slot></slot> </div> <footer> <slot name="footer"></slot> </footer> 

Colocación en ranuras:

 <my-component> <div slot="header">Header content</div> <toolbar-component slot="toolbar"></toolbar-component> <div>Content of the default slot...</div> <div slot="footer">Footer content...</div> </my-component> 

Como habrás adivinado, esto te permite crear diseños de componentes, donde los módulos deseados se pueden clasificar fácilmente en celdas.

Como se mencionó anteriormente, para vincular datos y controladores dinámicamente, se utiliza el atributo "vincular":

 <div bind="textContent: content; onclick: on.clicked"></div> 

Para enlazar valores de atributos, use el símbolo "@" al comienzo del nombre de la propiedad:

 <div bind="@style: style">Content...</div> 

Puede encontrar más detalles en la sección correspondiente de la documentación: https://holiday-js.web.app/?templates

Gestión del estado

Dentro del componente:

 class MyComponent extends HdElement { constructor() { super(); //        : this.state = { content: 'Initial Content', style: 'color: #f00', on: { clicked: () => { console.log('Clicked!'); }, }, }; //       "setStateProperty": window.setTimeout(() => { //   : this.setStateProperty('content', 'Updated Content'); //   : this.setStateProperty({ 'content': 'Updated Content', 'style': 'color: #00f', }); }, 1000); } } 

Para controlar el estado a nivel de toda la aplicación, se utiliza el módulo HdState.
Ejemplo de uso:

 import {HdState} from '../../holiday/core/hd-state.js'; //   : HdState.subscribe('ui.loading', (val) => { console.log(val); }); //   : HdState.publish('ui.loading', true); // : HdState.publish({ 'ui.loading': true, 'ui.sidePanelActive': true, }); 

Para trabajar con el estado global, primero debe determinar su esquema general:

 HdState.applyScheme({ ui: { loading: { /*      ,       : */ type: Boolean, //    : value: false, }, sidePanelActive: { type: Boolean, value: false, }, }, user: { authorized: { type: Boolean, value: false, }, name: { type: String, value: null, //          : cache: true, }, }, }); 

El circuito también se puede dividir convenientemente en bloques lógicos separados.

Para evitar pérdidas de memoria, las suscripciones irrelevantes deben eliminarse:

 let subscription = HdState.subscribe('ui.loading', (val) => { console.log(val); }); window.setTimeout(() => { // Unsubscribe: subscription.remove(); }, 10000); 

Documentación del estado: https://holiday-js.web.app/?state

Herramientas de desarrollo

El conjunto más pequeño para comenzar es un editor de texto y un navegador. Sí, eso es suficiente para intentarlo. Cabe señalar que en esta configuración, el navegador debe ser exactamente Firefox. Puede cargar módulos ES sin usar un servidor local.

Para un trabajo más completo, necesitará git y cualquier servidor web que le haya gustado (para trabajar con módulos ES en otros navegadores).

Para resaltar la sintaxis HTML y la finalización automática en literales de plantilla, utilizo la extensión para VS Code, originalmente diseñada para trabajar con lit-html: https://github.com/pushqrdx/vscode-inline-html

Para compilar el código antes de publicarlo, puede usar cualquier compilador popular, como webpack o rollup .

Rendimiento

Los puntos de referencia para marcos no son fáciles de escribir. Para una comparación representativa, debe asegurarse de comparar cosas comparables y, en la medida de lo posible, minimizar los efectos de los efectos secundarios. Por lo tanto, deben tener una idea clara de lo que está sucediendo "bajo el capó" en cada caso. Primero, debe decidir qué parámetros mediremos. Para nuestro caso, es importante para nosotros:

1. Hora de iniciar la ejecución del programa principal (descarga)
2. Componente de tiempo de renderizado inicial
3. Tiempo para actualizar estos componentes y volver a dibujarlos

Desafortunadamente, no tenemos una forma confiable de averiguar el momento en que el navegador ejecutó el programa y terminó de renderizar por completo. A nivel del navegador, hay muchas de nuestras propias optimizaciones, que para nosotros son algo así como un "recuadro negro" y pueden diferir en diferentes motores. Lo que podemos usar: API de rendimiento , requestAnimationFrame y método no estándar requestIdleCallback , que funciona solo en Chrome y Firefox. Suficiente por primera vez.

¿Con qué compararemos Holiday.js? Comencé con dos bibliotecas: React (sin ella) y LitElement (tecnologías similares en el núcleo). Puede encontrar el código de referencia en estos repositorios:

https://github.com/foxeyes/holiday-benchmark
https://github.com/foxeyes/lit-benchmark
https://github.com/foxeyes/react-benchmark

Desafortunadamente, no he terminado de probar la automatización hasta ahora, y esto tampoco es fácil, porque la automatización no debería crear efectos secundarios por sí misma. Por el momento, sigo trabajando en este tema y estoy preparando una herramienta adecuada con Puppeteer (algo muy útil, lo recomiendo). Mientras tanto, puede probar las pruebas en modo manual (Chrome / Firefox) y verificar los resultados en la consola del navegador. Verá que Holiday.js es un líder seguro en todos los casos .

Puede notar que en el caso de React, se crea un contenedor div adicional cuando se muestran los componentes, que sirve para nivelar el número de elementos DOM creados. Decidí que esto sería cierto, porque un componente web siempre es un elemento DOM y un contenedor, y la correspondencia de las estructuras de árbol DOM en diferentes pruebas es muy importante. Además, es posible deshacerse del anidamiento innecesario en Holiday.js y mostrar los datos de la misma manera que en React. Sin embargo, si este tema le parece controvertido, preste atención, en primer lugar, a la velocidad de las actualizaciones.

Soporte del navegador

No, Internet Explorer no es compatible. Esto podría haberse logrado con ciertos esfuerzos (para la versión 11), pero el rechazo del apoyo es una posición de principios. En primer lugar, creo que IE debería morir durante mucho tiempo y en nuestro poder contribuir a esto. En segundo lugar, las personas que abogan por el soporte para IE a menudo cometen un grave error lógico: la proporción de IE en el tráfico total, según los datos actuales de caniuse, es de ~ 1.6% para todas las versiones encontradas. Y el navegador más popular, que se adelanta al resto por un amplio margen, es Chrome móvil (~ 35%). Por lo tanto, al admitir IE, se niega conscientemente a utilizar una gran cantidad de tecnologías que son simplemente necesarias para implementar la adaptabilidad y movilidad completas en sus aplicaciones, es decir, por el bien de una pequeña minoría, complican la vida de una gran mayoría de sus usuarios. O aumente significativamente el costo de desarrollar y mantener sus productos. En tercer lugar, Microsoft, en los últimos tiempos, ha estado obligando activamente a los usuarios a abandonar Windows 7, por lo que la proporción de tráfico de IE en el futuro cercano disminuirá cada vez más rápidamente. Admito que hay casos en los que el soporte de IE no puede pasarse por alto, pero estos casos son mucho más raros de lo que solíamos pensar.

El 15 de enero de este año, Microsoft lanzó una versión de lanzamiento del nuevo Edge , en el motor Chromium. A partir de este momento, podemos suponer que Holiday.js es compatible de forma nativa en todas las versiones actuales de los navegadores populares. Para Edge más antiguo, se requiere un polyfill . La capacidad de trabajar con polyfills se implementa en Holiday.js, pero el script en sí necesita conectarse por separado.

Minimalismo

El concepto de Holiday.js se basa en la simplicidad y el minimalismo. Una de las etapas importantes en el trabajo en este proyecto para mí fue la eliminación de la funcionalidad , que me apresuré a implementar, pero luego me di cuenta de que podía prescindir de ella. Por lo tanto, si le parece que realmente falta algo, hágase una pregunta, ¿es realmente así? Lo respondí para mí de esta manera: si se necesita algo más, es mejor crear una clase extendida por separado, con herencia de la clase principal. Hasta ahora este enfoque no me ha fallado. Holiday.js, en su estado actual, ha sido probado en la batalla y ha demostrado ser muy positivo en el trabajo.

Planes

Si lees a este lugar, entonces mis esfuerzos ya se han gastado no en vano. Incluso si no desea utilizar Holiday.js, al menos puede obtener algo interesante para usted al trabajar con componentes web como tal. Estaré muy feliz si este material marca el comienzo de la construcción de la comunidad. Estaré muy contento de tener una discusión constructiva, críticas, informes de errores, solicitudes de extracción y, por supuesto, estrellas en GitHub. Por supuesto, no pude tocar todos los aspectos, y estaré encantado de responder a sus preguntas. Tenga en cuenta que hasta ahora, trabajaba solo en esta biblioteca, y hacer todo solo, incluida la documentación, las pruebas y las herramientas relacionadas, en paralelo con el trabajo principal y los proyectos favoritos, es difícil.

Sin embargo, en el futuro cercano:

• Más comparaciones con otras bibliotecas y marcos populares.
• Herramienta de prueba PingPong minimalista y flexible basada en Puppeteer
• Generador de proyecto básico con ejemplos (Kit de inicio)
• Desarrollo adicional de la documentación.

Cruzo los dedos, presiono "Publicar" ...