Além dos Frameworks: Confie nas Primitivas da Web

Cada vez que você adiciona uma dependência de framework, está apostando que aquela biblioteca durará mais que seu projeto. Enquanto isso, a plataforma web disponibiliza recursos que os navegadores se comprometem a suportar para sempre. A lacuna entre o que os frameworks fornecem e o que as APIs nativas dos navegadores agora lidam diminuiu drasticamente.

Este artigo examina primitivas específicas da plataforma web que reduzem a dependência de frameworks—e como avaliar sua prontidão usando o Baseline como seu guia.

Entendendo os Recursos Web Baseline

Antes de adotar qualquer API nativa de navegador, você precisa de uma forma confiável de avaliar o suporte entre navegadores. O Baseline fornece exatamente isso. Um recurso alcança o status “recentemente disponível” quando é implementado nas versões estáveis mais recentes do Chrome, Edge, Firefox e Safari. Após um período sustentado de disponibilidade nesses navegadores (aproximadamente 30 meses), ele se torna “amplamente disponível”.

Isso importa para decisões de progressive enhancement. O Baseline informa quando um recurso é seguro para usar como implementação primária versus quando deve permanecer como uma experiência aprimorada com fallback.

Você pode verificar o status atual de suporte entre navegadores de qualquer recurso web no painel Web Platform Status em https://webstatus.dev, que rastreia a classificação Baseline e o suporte dos navegadores em um só lugar.

APIs Nativas de Navegadores Substituindo Padrões de Frameworks

A Popover API para Padrões de Modal e Tooltip

Desenvolvedores React frequentemente recorrem a bibliotecas como Radix ou Headless UI para construir popovers acessíveis. A Popover API, agora um recurso Baseline recentemente disponível, lida com isso nativamente:

<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>
  <p>Menu content here</p>
</div>

O navegador gerencia o aprisionamento de foco, comportamento de light-dismiss e renderização na camada superior. Nenhum JavaScript necessário para funcionalidade básica. A detecção de recursos é direta:

if ('popover' in HTMLElement.prototype) {
  // Use native popover
} else {
  // Fall back to framework solution
}

View Transitions para Animações de Página

Aplicações de página única existem em parte porque a navegação entre múltiplas páginas parecia brusca. A View Transitions API muda essa equação ao permitir transições suaves entre estados do DOM:

document.startViewTransition(() => {
  updateDOMSomehow();
});

Para transições entre documentos, apenas CSS pode habilitar as páginas:

@view-transition {
  navigation: auto;
}

A família View Transitions agora está Baseline recentemente disponível para transições same-document. Navegadores sem suporte simplesmente ignoram a animação.

A Navigation API para Roteamento Client-Side

Roteadores de frameworks como React Router existem porque a History API era desajeitada. A Navigation API fornece um modelo mais limpo para interceptar navegação:

navigation.addEventListener('navigate', (event) => {
  event.intercept({
    handler() {
      return loadContent(event.destination.url);
    }
  });
});

A Navigation API agora está Baseline recentemente disponível, mas isso não significa que você deva remover seu roteador amanhã. Significa que você pode começar a avaliar onde as primitivas de navegação nativas podem simplificar sua stack—especialmente para experiências “app-like” mais leves.

Recursos Modernos de CSS Eliminando JavaScript

Anchor Positioning

Posicionar tooltips e dropdowns relativos a elementos de gatilho tradicionalmente exigia cálculos JavaScript. O CSS Anchor Positioning lida com isso de forma declarativa:

.trigger {
  anchor-name: --trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
}

Este recurso ainda não está Baseline-disponível em todos os principais navegadores, então use-o estritamente como progressive enhancement com fallbacks JavaScript onde necessário.

Container Queries e :has()

Container Queries estão amplamente disponíveis e permitem que componentes respondam ao tamanho de seu contêiner em vez da viewport—removendo muita lógica de layout JS frágil.

O seletor :has() está recentemente disponível e desbloqueia padrões que anteriormente forçavam “consciência parental” baseada em JS e reflexão de estado. Como ainda não está amplamente disponível, pode ainda justificar cautela dependendo do seu público—mas agora é uma opção real para construir com fallbacks medidos.

Declarative Shadow DOM para SSR de Web Components

Renderização server-side de Web Components anteriormente exigia ginástica de hidratação. O Declarative Shadow DOM resolve isso:

<my-component>
  <template shadowrootmode="open">
    <style>/* scoped styles */</style>
    <slot></slot>
  </template>
</my-component>

O shadow DOM existe no payload HTML inicial—nenhuma execução JavaScript necessária para o primeiro render. Isso agora está recentemente disponível e utilizável em navegadores modernos, mas versões mais antigas do Safari em particular podem exigir fallbacks.

Progressive Enhancement como Arquitetura

O padrão aqui não é “abandonar frameworks”. É reconhecer que as primitivas da plataforma web agora lidam com problemas específicos que anteriormente exigiam camadas de abstração.

A detecção de recursos habilita esta abordagem:

1. Verifique se a API nativa existe
2. Use-a quando disponível
3. Recorra a soluções de frameworks quando não estiver

Isso segue os princípios de longa data de progressive enhancement e reduz o tamanho do bundle para navegadores capazes enquanto mantém funcionalidade em todos os lugares.

Conclusão

Audite suas dependências de frameworks em relação aos recursos Baseline atuais. A Popover API, View Transitions, capacidades modernas de CSS e Declarative Shadow DOM abordam problemas reais que justificavam código de framework há apenas dois anos.

A plataforma web evolui lentamente, mas permanentemente. Recursos que alcançam o status Baseline representam terreno estável. Construa sobre essa fundação e aumente apenas onde a plataforma genuinamente fica aquém.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.