DEV Community

Matias Trujillo
Matias Trujillo

Posted on • Updated on

De React ⚛️ a webComponents con 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

General

Importación

Importacion

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

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.

Constructor vs Host

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

Render

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.

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

Discussion (1)

Collapse
dance2die profile image
Sung M. Kim

I've only read the auto-English translated version but it looks interesting 😀