De React ⚛️ a webComponents con Atomico

👋 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 :

1. Hooks: @atomico/core entrega soporte a los siguientes hooks, useState, useEffect, useMemo, useRef y useReducer.
2. 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:

1. @atomico/core: package que integra soporte sobre, virtual-dom, Hooks, HoCs y mas.
2. @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.

Aun me encuentro escribiendo este articulo 👷, espero que sea de su agrado y si tiene observaciones no dude en comentar 🤓, si busca probar Atomico visite el siguiente repositorio @atomico/core