Novo projeto Wasm traz componentes da Web para linguagens de back-end

WebAssembly basicamente permite que linguagens não frontend, como Rust ou Python, sejam executadas em um navegador da web. Mas o desenvolvedor web e mantenedor do Enhance, Ryan Bethel, se perguntou: você poderia reverter esse paradigma e usar o Wasm para executar componentes web em ambientes Python ou Rust?

A resposta, ao que parece, é sim. Com alguns ajustes, é possível. Bethel e a equipe do Enhance resolveram os problemas e em 8 de abril lançaram o Enhance Wasm.

“Para que o ecossistema Wasm faça o que faz, Rust, Python, Java e todos esses outros tempos de execução também podem executar o Wasm”, explicou Brian LeRoux, CEO da Begin, que criou o Enhance, e desenvolvedor web por direito próprio. “Então agora podemos ir para o outro lado. Podemos pegar o código do navegador e executá-lo dentro de Java ou Python ou PHP ou Rust ou qualquer outra coisa. Estamos pegando o interpretador Enhance, que gera HTML a partir de definições de componentes da web, e o estamos compilando no Wasm.”

As implicações vão desde a resolução de problemas da web, como a reutilização de títulos em propriedades digitais de diferentes idiomas, até a possível criação de um design universal global onde botões, menus suspensos e outros elementos de design comuns possam ser reutilizados como componentes em vários idiomas, explicou LeRoux.

O desenvolvimento web volta para o navegador

Para entender como funciona, é útil conhecer o Enhance, uma estrutura HTML full stack de código aberto. E para entender por que o Enhance é importante, é útil considerar a adoção prolífica do JavaScript.

Há dez anos, havia cerca de 20 milhões de programadores – agora o GitHub estima esse número em 100 milhões de desenvolvedores, observou LeRoux. A maioria deles não se tornou programador aprendendo linguagens de programação de nível inferior, como Rust, afirmou ele, mas aprendendo HTML, CSS e JavaScript – e particularmente JavaScript, que é a linguagem de programação mais comumente usada há 11 anos consecutivos, de acordo com para a pesquisa de desenvolvedores do Stack Overflow.

“Nossa hipótese é que o novo maior segmento de desenvolvedores de software é front-end e muito do que eles aprenderam, francamente, também está desatualizado há cerca de dez anos”, disse LeRoux. “Existem muitas suposições sobre como precisamos construir para o frontend atualmente que são invalidadas pelo navegador.”

Mas os navegadores só continuaram a melhorar, observou LeRoux. Apesar disso, muitas das suposições em torno do frontend hoje são sobre a transpilação do JavaScript para que ele possa ser mais moderno e ter “sintaxes melhores para coisas como componentes e módulos”, disse ele.

“Boas notícias: os navegadores agora possuem componentes e módulos integrados”, continuou LeRoux. “Portanto, precisar de uma estrutura para isso é – na verdade, para cunhar um termo de nuvem – trabalho pesado e indiferenciado.”

O React cria muito código?

JavaScript, e especificamente React, trazem um monte de código para a festa para replicar componentes que o navegador já pode criar. Isso retarda a experiência dos usuários, disse ele.

“A filosofia da Enhance é voltar a escrever para a plataforma, escrevendo código de nível inferior para o navegador”, disse ele. isso não quer dizer que o navegador seja impecável e incrível. Há cortes de papel por toda parte e há dificuldades em usar coisas como componentes da web em grande escala, e você ouve falar disso por toda parte. Isso não é apenas FUD. Muita tinta (foi) derramada de pessoas reclamando sobre o estado da experiência do usuário, da experiência do desenvolvedor, por trabalhar com os primitivos do navegador de nível inferior; e, portanto, o objetivo geral do Enhance é tornar a construção divertida com componentes da web.”

Quando os desenvolvedores criam um componente web, eles tendem a escrever JavaScript que estende o elemento HTML, disse ele. Porém, a maioria dos elementos de uma página não são realmente interativos.

“Provavelmente 90% dos elementos em uma determinada página da web não escutam JavaScript, não enviam formulários, não interpretam eventos de rolagem ou interceptações, envios de formulários ou cliques ou qualquer outra coisa”, disse ele. “Portanto, queremos renderizar componentes da web no servidor e não queremos necessariamente executar o JavaScript do cliente.”

O Enhance oferece aos desenvolvedores uma página cheia de elementos personalizados, disse ele. Embora os desenvolvedores possam usar JavaScript, eles provavelmente não precisam dele, acrescentou LeRoux.

“Na verdade, você provavelmente não quer isso porque seu desempenho será realmente prejudicado por fazer todo esse trabalho extra”, acrescentou.

O site médio possui um ou dois megabytes de JavaScript. LeRoux apontou para a página inicial do Enhance, que, apesar das animações ricas, tem apenas quatro ou cinco kilobytes de JavaScript e depende de HTML e CSS.

“Nossa hipótese é que o novo maior segmento de desenvolvedores de software é frontend e muito do que eles aprenderam, francamente, também está desatualizado há cerca de dez anos.” -Brian LeRoux, desenvolvedor web e CEO da Begin

Esta é uma notícia radical para as pessoas que aprenderam que React JavaScript é necessário para construir um site. Um dos desafios que as pessoas enfrentam ao usar o Enhance é que, por exemplo, o React permitirá que você passe objetos complexos para atributos. HTML não permite isso; atributos são usados ​​apenas para passar estilos, não objetos complexos. Esse tipo de coisa costuma surpreender um desenvolvedor do React, disse ele.

“O React encobriu como o navegador funciona e isso cria um vale misterioso e isso é realmente um aprendizado terrível para muitas pessoas”, disse ele. “Se você é um desenvolvedor web e cria sites com React há uma década, é um banho de água fria perceber que você não sabe como o navegador funciona e isso pode ser decepcionante e perturbador. Então eles passam por toda a gama de emoções, onde começam com raiva e depois se desesperam, depois aceitam e seguem em frente.”

Brian LeRoux, CEO da Begin e desenvolvedor, mostra o código usado no site Enhance.

Muitas razões para usar JavaScript desapareceram à medida que os navegadores progrediram, acrescentou.

“Podemos ser muito produtivos trabalhando com o básico da web”, disse LeRoux. ”Temos navegadores da Web com atualização automática e supercompatíveis com versões anteriores que podem carregar um site dos anos 90 tão bem quanto (podem) carregar um site de hoje, e nem precisamos mais pedir para ele atualizar, e não estamos mais aproveitando isso tanto quanto deveríamos.”

O Enhance é para aqueles que estão super focados no desempenho e desejam construir sites que durem, disse ele.

“Eu sinto que os frameworks JavaScript modernos quebram muito e são muito frágeis e todo ano há uma nova grande conferência onde eles anunciam todas as mudanças importantes e todos aplaudem; e eu digo, bem, você está torcendo pelo trabalho não planejado (…) para entregar uma página da web”, disse ele. “Portanto, há um exame de consciência a ser feito pela indústria, com certeza, sobre esse assunto.”

Criando Melhorar Wasm

Bethel leu sobre o experimento do Shopify usando Qwik.js, um tempo de execução JavaScript mais recente projetado para ser pequeno. O Shopify levantou a hipótese de que eles poderiam pegar o interpretador, compilá-lo com o Wasm, agrupá-lo com algum JavaScript e executar esse JavaScript em qualquer tempo de execução que suportasse o Wasm. Bethel e a equipe do Enhance queriam ver se poderiam seguir o outro caminho e executar componentes da web em outras linguagens.

A equipe pegou o interpretador Enhance, que gera HTML a partir de definições de componentes da web, e compilou-o no Wasm, explicou ele. Foram necessários cerca de dez protótipos para obter uma solução que funcionasse bem, disse ele – o ingrediente secreto veio de uma startup chamada Extism, uma estrutura multilíngue para construção com WebAssembly.

“O Extism nos deu a capacidade de realmente pegar esse código e executá-lo em todas essas plataformas diferentes rapidamente”, disse ele. “Wasmtime (um tempo de execução para WebAssembly), não conseguíamos trabalhar em Java, e havia outro que não conseguíamos trabalhar em PHP a menos que fizéssemos shell nativo, mas agora o temos funcionando em qualquer lugar. A ideia seria que você escrevesse um conjunto de componentes web e pudesse executá-los em qualquer back-end.”

A equipe apresentou o Enhance em uma postagem no blog de 8 de abril, chamando-o de “momento de avanço para o desenvolvimento de front-end”.

“A renderização do lado do servidor é um requisito fundamental para aplicações web personalizadas”, escreveu a equipe. “As organizações que priorizam a estabilidade, o desempenho e a acessibilidade dos padrões web executam cargas de trabalho em uma enorme variedade de tempos de execução de back-end. Agora podemos construir interfaces web nativas do navegador que cruzam o abismo do tempo de execução.”

Enhance Wasm, que é de código aberto, lançado com suporte para Node, Deno, Python, Ruby, PHP, Java, C#, Rust e Go.

Aprimore os casos de uso do Wasm

Após o lançamento, o Enhance viu os desenvolvedores usá-lo imediatamente para redirecionar estilos de títulos em propriedades da web. É particularmente útil em grandes empresas que cresceram através de aquisições e podem ter quatro ou cinco seções de tecnologia diferentes completamente divorciadas umas das outras, disse LeRoux. Por exemplo, sua esposa trabalha na grande empresa de tecnologia LaunchDarkly, que possui vários sistemas de startups adquiridas. É uma grande dor de cabeça manter um sistema de design entre eles porque eles têm um blog em PHP e um aplicativo Go e diferentes tecnologias implementadas nas diferentes propriedades digitais, disse ele.

“Se você tiver que manter um sistema de design em todas as coisas que você está reimplementando para cada um desses tempos de execução”, disse ele. “Com o Enhance Wasm, poderíamos fazer todas essas definições com componentes da web e executá-los em todas essas propriedades a partir de um conjunto de definições, e é por isso que isso é atraente.”

A equipe também conversou com o famoso designer Brad Frost, que tem a ideia de um sistema de design global semelhante ao Material do Google ou ao Lightning do Salesforce, mas destinado a ser usado por todos.

A equipe do Enhance também se juntou ao grupo de trabalho de componentes da Web do W3C e ao grupo Open UI.

“O objetivo final seria colocar muito disso no próprio navegador”, disse Le Roux. “Não deveríamos necessariamente compartilhar esses sistemas de design para botões – que já deveriam estar integrados à plataforma… Guias ou carrosséis ou acordeões ou o que quer que seja, todo site tem essas coisas. Ser capaz de ter um tipo de conjunto abençoado desses componentes que funcione em qualquer lugar, de preferência sem JavaScript cliente, seria bom.”

A postagem Novo projeto Wasm traz componentes da Web para linguagens de back-end apareceu pela primeira vez em The New Stack.