👋 Hoy Atomico luce distinto al año 2017, ahora Atomico es más poderoso, rapido, declarativo y estable. Te invito a revisar este articulo actualizado en la documentación de Atomico
Atomico es un proyecto OSS personal que busca simplificar la creación de WebComponents a base de JSX, Virtual-dom, Hooks con tan solo 2.7kB 🤯. Este articulo es un introducción a lo simple 🤓 que es crear webComponents con Atomico
Pequeñas diferencias entre React y Atomico
Atomico se basa en parte del api de React, como :
-
Hooks: @atomico/core entrega soporte a los siguientes hooks,
useState,useEffect,useMemo,useRefyuseReducer. - HoCs: Este patrón funciona dentro de Componentes de alto orden, con la intención de asilar lógica invisible para el DOM, como Router o Lazy, el uso de este patrón no queda expuesto en este articulo.
Para enseñar mejor las diferencias y como migrar un componente de React a WebComponent usaremos un ejemplo simple.
Código de ejemplo
Importación
para unir Atomico con WebComponents, ud requerida 2 packages:
- @atomico/core: package que integra soporte sobre, virtual-dom, Hooks, HoCs y mas.
- @atomico/element : package que utiliza el render de atomico sobre WebComponents.
Componente a WebComponent
La mayor diferencia entre las funciones function Component y function WebComponent es el uso del tag Fragment(<></>) vs Host(<host></host>) El tag host de Atomico apunta al mismo contenedor, para ganar manipulación mas expresiva sobre atributos, propiedades y eventos del WebComponent.
El tag Host siembre deberá ser el retorno de un WebComponent creado con Atomico, si ud no retorna este tag, Atomico asume que generara un desmontaje del componente de forma interna.
Render a CustomElement
Esta pequeña diferencia permite una declaración global de su función como webComponent en su documento, pudiendo ser usado desde React, Vue o HTML.
Observables 🧐
los obserbables son la capa de Atomico para la definición de propiedades y atributos del WebComponent, ante cada mutación de estos se forzara una renderización sobre el nuevo estado de estos observables.
Top comments (1)
I've only read the auto-English translated version but it looks interesting 😀