Por que as ações HTML se tornaram repentinamente uma tendência do JavaScript

As ações não são novas. Mas eles estão vendo um ressurgimento – tendo um momento, por assim dizer – no mundo front-end do JavaScript.

Na Conferência React transmitida ao vivo de Las Vegas no início deste mês, o compilador React e o React 19 ocuparam o centro do palco. Mas enterrado em meio às apresentações estava a conversa sobre React Action. E na semana passada, o Astro anunciou seu próprio suporte para ações, que o desenvolvedor front-end do Astro, Ben Holmes, disse via Twitter ser semelhante ao React Actions.

“É a nossa maneira de definir um endpoint RPC no Astro”, disse Holmes. Ele pega o básico de uma ação de servidor e adiciona recursos para tratamento de erros e validação de entrada.”

As ações já existem há algum tempo, apontou Andrew Clark, engenheiro de software da Vercel e colaborador principal do React, na Conferência React.

“As ações são um padrão de primeira classe para atualização assíncrona de dados em seu aplicativo em resposta à entrada do usuário”, disse Clark. “As ações como um padrão geral não são uma invenção do React. Eles fazem parte da plataforma web há décadas. Na verdade, no formato HTML, as ações foram introduzidas pela primeira vez na web em 1900.”

Ai. Sim, ele disse que foram os anos 1900 – como se os cowboys os tivessem introduzido no Velho Oeste. Para vocês, historiadores, isso foi antes mesmo de o JavaScript ser criado.

As ações do formulário HTML eram uma forma de adicionar interatividade a uma página da web. Em um formato HTML clássico, os desenvolvedores especificam um endpoint do servidor passando a URL para a propriedade action, explicou Clark. Quando um usuário enviava o formulário, os dados eram enviados ao servidor e o servidor respondia com uma nova página HTML.

“Enviar formulário, carregar página, enviar formulário, carregar página, é bem simples, certo? E o que é ótimo nesse modelo é que você pode usá-lo para construir quase tudo”, disse ele.

No entanto, as ações não têm sido muito usadas desde que o JavaScript ficou online.

“Hoje em dia, um desenvolvedor web poderia passar toda a sua carreira sem nunca usar esta API”, disse ele. “O que aconteceu é que, com a introdução do JavaScript – todos nós amamos o JavaScript – eventualmente se tornou possível construir aplicativos da web com uso pesado para o cliente, que forneciam uma experiência muito mais rica e interativa do que aplicativos cujo comportamento estava confinado apenas ao servidor.”

As expectativas dos usuários também mudaram. Eles queriam feedback instantâneo sobre a interação com o aplicativo, por isso não querem esperar sempre por um documento HTML totalmente novo, disse ele. Os usuários desejam que os aplicativos se lembrem de seu estado atual para não perderem a posição de rolagem ou a entrada de texto sempre que uma ação for executada.

“Em outras palavras, os usuários esperam mais do que é possível alcançar sem pelo menos alguma interatividade do lado do cliente”, disse ele. “Há algumas coisas interessantes sobre os manipuladores de eventos do lado do cliente. Eles podem ser usados ​​para implementar feedback instantâneo às entradas do usuário e podem compor o comportamento do cliente e do servidor juntos.”

Mas também há desvantagens na abordagem somente JavaScript, como: é difícil gerenciar o estado local. Alcançar a assincronicidade também é difícil e frequentemente leva a bugs, disse ele. Além disso, como os manipuladores de eventos dependem de JavaScript, a UI não é interativa até que o código seja carregado e executado, o que é lento em comparação com o HTML bruto e leva à queda de interações, acrescentou. Isso torna tentador voltar às ações HTML simples porque o aplicativo é interativo assim que o HTML é renderizado.

“Não devemos esquecer as razões pelas quais nos afastamos das ações em primeiro lugar”, disse ele. “Eles fornecem pouco ou nenhum feedback imediato em resposta à entrada do usuário. Você está basicamente preso a tudo o que os controles de estoque do navegador oferecem. E é realmente difícil adicionar interatividade adicional ao cliente porque é um modelo de programação totalmente diferente.”

O React existe para resolver exatamente esse tipo de enigma, disse Clark.

Então espere. Por que? O React está adicionando ações?

Este mês, o React Actions saiu do canal canário – onde estavam desde o verão passado – e entrou no React.

“Você pode ter ouvido falar deles no contexto de algo chamado recursos de ações de servidor, disponíveis em estruturas de componentes de servidor como Next.js, mas as ações não são exclusivas de estruturas de componentes de servidor”, disse Clark.

As ações React são uma evolução de duas APIs existentes, disse ele. A primeira são as transições de reação, que são usadas para atualizar o estado sem bloquear a entrada do usuário. Ações baseadas em transições adicionando suporte para funções assíncronas. A segunda é a API do formulário HTML.

“Usar uma ação React é muito parecido com usar uma ação de formulário HTML, exceto que em vez de passar uma URL para o suporte de ação, agora você pode passar uma função”, disse ele. “No exemplo mais básico, tudo o que você precisa fazer é passar uma função para a propriedade action e, quando o usuário envia o formulário, a ação é causada. Ao usar uma função de ação em vez de uma URL, você pode definir o comportamento da ação diretamente dentro do seu componente.”

Clark disse que houve “um ressurgimento de APIs inspiradas em ações na comunidade JavaScript, em grande parte graças às estruturas Remix e React”. As ações foram reintroduzidas como um padrão para comunicações servidor-cliente, acrescentou.

“Hoje em dia, parece que quase todo framework web JavaScript tem sua própria opinião sobre o padrão de ações”, disse ele. ”E por um bom motivo. Achamos que as ações são uma forma fantástica de construir aplicações e se encaixam perfeitamente no modelo de programação React.”

O que, observou ele, levantava a questão: se APIs baseadas em ação já existem em estruturas React, por que construí-las no React?

A equipe do React acredita que pode fazer ainda mais com as ações integrando-as ao React sem comprometer a capacidade de composição do Read, usando recursos como:

• Transmissão SSR
• Hidratação seletiva
• Suspense e transições

“Não há nada de especial em uma função de ação. Elas são funções regulares: você pode compô-las, pode escrever abstrações para elas da mesma forma que faria com qualquer outra função, pode definir a ação no cliente ou, se usar uma estrutura de componente de servidor, pode definir a ação no servidor através da diretiva use server e acesse sua camada de dados diretamente”, disse ele. “Você pode ter qualquer número de ações por página, por componente, por qualquer coisa, você pode trocar ações em tempo de execução.”

Esse nível de “combinabilidade máxima” é alcançado porque a equipe do React integrou “ações em cada camada do React, desde o tempo de execução do cliente até o renderizador SSR de streaming e o formato de dados dos componentes do servidor, todos trabalhando juntos para fornecer uma experiência perfeita”, acrescentou. .

“Nosso objetivo é fornecer um núcleo primitivo que meta-frameworks como Remix, Next e Redwood possam construir da mesma forma que atualmente constroem recursos como streaming e suspense”, disse ele.

Onde as ações de reação brilham

As ações no React se parecem muito com ações HTML, mas também se parecem com manipuladores de eventos como ao enviarou desmarqueClark disse.

“Apesar das semelhanças superficiais, as ações têm algumas habilidades importantes que as diferenciam dos manipuladores de eventos regulares”, continuou ele. “Uma dessas habilidades é o suporte para aprimoramento progressivo. As ações do formulário no React são interativas antes que a hidratação ocorra. Acredite ou não, isso funciona com todas as ações, não apenas com as ações definidas no servidor.”

Se o usuário interagir com uma ação do cliente antes de terminar a hidratação, o React irá sinalizar a ação e reproduzi-la assim que for transmitida, disse ele. Se o usuário interagir com uma ação do servidor, a ação poderá desencadear imediatamente uma navegação normal no navegador, sem hidratação ou JavaScript.

As ações também podem lidar com lógica assíncrona, disse ele.

“As ações do React têm suporte integrado para padrões de UX, como UI otimista e tratamento de erros”, disse ele. As ações tornam esses padrões UX complexos super simples, integrando-se profundamente com recursos do React, como suspense e transições. Eles podem ser compostos facilmente. Eles têm uma API unificada de cliente e servidor. Eles são interativos antes da hidratação e você pode implementar UX avançado em apenas algumas linhas de código.”

A postagem Por que as ações HTML são repentinamente uma tendência do JavaScript apareceu pela primeira vez no The New Stack.