React 19 e os componentes Web

Estou muito entusiasmado com o lançamento do React 19 por uma razão: componentes web. Principalmente porque criei o Markup que expõe uma solução DOM reativa com uma API simplificada de componentes Web.

// web-components/button/index.js

import { WebComponent, html} from '@beforesemicolon/web-component';
import style from './style.css' with {type: 'css'};

class BfsButton extends WebComponent {
  static observedAttributes = ['disabled', 'type', 'variant'];

  disabled = false;
  type = 'button';
  variant = 'primary';

  stylesheet = style;

  render() {
    const { variant, ...btnProps } = this.props;

    return html`
      <button ${btnProps} class="btn ${variant}">
        <slot></slot>
      </button>
    `;
  }
}

customElements.define('bfs-button', BfsButton);

Porque é que isso é importante?

Bem… por onde começo?

• Isto dá-me esperança de uma web unificada e React como a estrutura web mais popular, fazendo esta mudança significa que outros seguirão o exemplo e isso unificará ainda mais duas comunidades apaixonadas que são React e Web Components.
• Com componentes web, podemos criar sistemas de UI e bibliotecas de componentes que funcionam em frameworks e não estarem limitados por bibliotecas específicas de frameworks que isolam comunidades.
• Acredito numa web onde as APIs de componentes web são a base da mesma forma que o DOM é hoje. Eventualmente lá chegaremos e este passo é enorme nesse sentido.
• Os componentes Web são a solução Web à prova de futuro, quer acredite ou não. O ecossistema web é um caos e não precisamos de uma nova estrutura para o corrigir. Só precisamos que todos sejam compatíveis entre si. Chega de guerras estruturais, por favor!
• O estado do componente web funciona independentemente da aplicação React, permitindo-nos ter uma lógica interna separada que pode ter um melhor desempenho, separando completamente as atualizações DOM locais versus ao nível da aplicação.
• As grandes empresas podem finalmente migrar para ter uma única biblioteca de componentes de UI que funcione em todas as estruturas utilizadas por um custo de manutenção reduzido e enviar melhorias e funcionalidades mais rapidamente.
• Acabaram-se as soluções alternativas para fazer com que os componentes web funcionem com React.
• Isto enviará SSR componentes web, embora isto possa já funcionar, uma vez que os componentes web são apenas elementos DOM personalizados.

Soluções plug-and-play

Gosto de me aproximar o mais possível do vanilla JavaScript, CSS e HTML, esta é a razão pela qual criei o Markup. Acredito na simplicidade e tento trabalhar contra a complexidade da web, simplificando o que posso e confiando nos padrões da web em vez de reinventar a roda.

Markup é uma solução plug-and-play, o que significa simplesmente que não requer qualquer processo de construção ou compilação para funcionar em ambientes JavaScript/TypeScript. Isto foi feito desta maneira para coisas assim.

// App.jsx

import {useState} from 'react'

import './web-components/button'
import './App.css'

function App() {
  const [count, setCount] = useState(0);

  const disabled = count === 10

  const countUp = () => {
    setCount(prev => prev + 1)
  }

  return (
    <>
      <bfs-button
          variant="cta"
          disabled={disabled}
          onclick={countUp}>count {count}</bfs-button>
    </>
  )
}

export default App

Markup by Before Semicolon *Sistema de modelação reativo HTML para criar interfaces de utilizador Web.*markup.beforesemicolon.com

Para onde vamos a partir daqui?

Estou a investir fortemente na web em que acredito e criei as seguintes pequenas soluções para lá chegar:

• Markup: sistema de templates reativo HTML;
• WebComponent: componentes web reativos melhorados baseados em Markup;
• Router: router baseado em WebComponent. Escreva código JS apenas se necessitar.

Tenho também outras coisas em que estou a trabalhar e que serão lançadas em breve:

• Intl: WebComponent e Intl sistema de localização baseado em API
• UI: sistema e componentes de UI baseados em WebComponent (90+)
• Canvas: experiência de ecrã baseada em WebComponent

Também estou a preparar uma atualização para o meu tutorial Web Components na crença de que 2025 marcará este incrível renascimento tecnológico, por isso, fiquem atentos.

Ver vídeo incorporado