Este post de sexta-feira é dedicado à tradução de um artigo interessante divulgado ontem no
Medium . Decidi aprender um novo gênero de traduções para mim, por isso não chute muito se algo estiver errado em algum lugar. E, se possível, notifique sobre erros e erros de digitação no PM.
Obrigado e boa leitura!
Uma história de como os novos recursos da plataforma da Web e estruturas compiladas definem a próxima era do desenvolvimento da Web.
Foto:
Stefan BucherHoje, estruturas como
Angular ,
React e
Ember são essenciais para o desenvolvimento de aplicativos Web complexos. Na última década (
Angular foi lançado em 2010), o uso dessas estruturas se tornou o padrão de fato para muitos de nós. Eles nos ajudam a estruturar nosso código, gerenciar o estado dos aplicativos e criar interfaces complexas com base em componentes reutilizáveis.
No entanto, como você sabe, o JavaScript é o recurso da Web mais caro que afeta diretamente a interatividade de nossas páginas. E o tamanho do código JavaScript de nossos aplicativos da web é maior do que nunca. A página média da Web é maior que 3 MB, maior que o tamanho do jogo Doom original. Nós, como desenvolvedores, podemos ter Internet rápida e planos tarifários acessíveis, mas nossos usuários podem não ter tudo isso.
De acordo
com Alex Russell , exceder o tamanho de apenas 130 KB para todos os nossos recursos pode significar que é impossível atingir o intervalo de download de 5 segundos em uma rede móvel e de telefonia padrão. No entanto, algumas de nossas estruturas favoritas podem demorar mais por conta própria.
Podemos usar as vantagens que as estruturas nos dão, mas ao mesmo tempo evitar inchar o código? Tem comodidade para o desenvolvedor e, ao mesmo tempo, uma excelente experiência do usuário? Eu acredito nisso. E acredito que estamos entrando em uma nova era de desenvolvimento web, que será determinada por isso ... Uma era na qual nossos quadros começarão a desaparecer.
Svelte
Um exemplo dessa tendência é
Svelte , “a estrutura da interface do usuário que desaparece magicamente” (Artigo “A estrutura da interface do usuário que desaparece magicamente”
em Habré - aprox.).
Svelte é uma estrutura de "tempo de compilação" que não possui um tempo de execução específico no cliente. Estamos acostumados a enviar grandes pacotes JavaScript para nossos usuários e esperamos que seus navegadores analisem e executem scripts. Mas
Svelte não funciona assim. Em vez disso, ele compila seu aplicativo em pequenos módulos JavaScript independentes e independentes. Em outras palavras, quando o aplicativo for entregue aos seus usuários, o
Svelte desaparecerá!
Um exemplo de aplicativo desenvolvido com o
Svelte é o
Pinafore , um cliente
Mastodon PWA para a rede social descentralizada criada por
Nolan Lawson, da Microsoft. O Pinafore mostra
resultados muito rápidos no Teste de Página da Web e uma pontuação de 98 pontos no
Lighthouse .
O Svelte , por si só, é muito minimalista, mas também existe o
Sapper (
S Velte
App Mak
er - aprox.) - uma estrutura completa com base nela. Inspirado no Next.js, o
Sapper inclui renderização no servidor, separação de código, estilos de escopo, roteamento declarativo e recarga a quente. Além disso, o modelo inicial do
Sapper fornece o PWA por padrão, com um manifesto de aplicativo da web e um trabalhador de serviço com armazenamento em cache automático de recursos.
Perguntei a Nolan como ele se sentia ao usar
Svelte e
Sapper . Ele me disse que era um "sonho trabalhar com"
Svelte .
Sapper é "um pouco menos maduro" e teve alguns problemas com ele, mas também está satisfeito. Também comecei a usar essas duas estruturas para um novo projeto e, até agora, a combinação de funcionalidade e alta velocidade de operação realmente parece perfeita.
Estêncil
Svelte inspirou um projeto alternativo da Ionic:
Stencil .
Novamente, o objetivo é adotar os "melhores conceitos das estruturas mais populares", mas ao mesmo tempo alcançar um melhor desempenho:
“Com ... estruturas tradicionais e técnicas de agregação, a equipe estava lutando para atender às demandas de latência e tamanho de código dos Progressive Web Apps que funcionavam igualmente bem em redes rápidas e lentas, em uma diversidade de plataformas e dispositivos.” - stenciljs.com
Para entender em que consiste o
Stencil , encontrei uma
introdução útil
de Rob Bearman . Há também um
vídeo de
Maximilian . O resultado do
Stencil é um componente da Web padrão (mais sobre os componentes da Web abaixo), não específico para o
Stencil . Isso significa que você pode usá-lo em combinação com outra estrutura, se desejar (mas este artigo é sobre como as estruturas desaparecem, não se multiplicam!).
Separadamente, quero observar que, apesar do fato de a documentação do
Svelte não prestar muita atenção nisso, o componente
Svelte também pode ser compilado diretamente no Web Component (
aqui está um exemplo - se você definir
customElement aqui -
obtemos o resultado ). No entanto,
Rich Harris , o criador de
Svelte (e
Rollup e muitas outras coisas incríveis!) Me disse que ele não achava que houvesse benefícios especiais no uso desse recurso no momento.
O estêncil também se parece com o
polímero mais conhecido do Google, mas desaparece completamente na saída. No entanto, não usei muito o Polymer para comentar com mais detalhes. Talvez ele também mereça mais atenção. A
terceira versão mais
recente começou a usar os
módulos ES (mais sobre isso abaixo), em vez de
importações de
HTML e
npm em vez de
Bower . Há também um
PWA Starter Kit que recomenda
Alex Russell como a melhor ferramenta para criar aplicativos Web produtivos. Ele fornece um padrão
PRPL (envio, renderização, pré-cache, carregamento
lento ) imediatamente.
Angular da próxima geração
Agradeço a Rich Harris por me informar que a Angular também está seguindo essa tendência!
Os elementos angulares - uma inovação no
Angular 6 - permitem exportar componentes angulares como componentes da Web de autoajuste. No momento, ele ainda requer uma "versão mínima e independente do Angular", mas eles "funcionam em elementos personalizados que podem ser usados em aplicativos da Web criados com base em outras estruturas".
Além disso,
Ivy é um renderizador de nova geração em Angular, projetado para reduzir drasticamente o tamanho do código resultante. (Embora ainda valha a pena dar uma olhada: no espírito de competição amigável, Rich fez uma
comparação dos resultados de compilação
dos componentes
da Web de Svelte e Ivy!).
É muito legal que estruturas populares adotem essa abordagem, tornando seu código final também mais compacto. Esperamos que, à medida que mais e mais aplicativos da Web migrem para uma nova abordagem, isso tenha um grande impacto no desempenho da Internet como um todo.
Além disso, existem cada vez mais pré-requisitos para o fato de que em breve não precisaremos de estruturas. As estruturas podem, é claro, simplificar o desenvolvimento e continuar a fornecer complementos úteis, mas a própria plataforma da web oferece mais funcionalidades do que nunca ...
Plataforma da Web como estrutura
No meu artigo
“A Rube Goldberg Machine” e na
conversa subsequente, minha colega
Ada Rose Cannon descreveu como as novas funções CSS e JavaScript podem ser “consideradas como estruturas incorporadas na plataforma da web”.
Por exemplo, CSS Custom Properties (mais conhecidas como CSS Variables) pode significar que você não precisa mais de um pré-compilador de CSS como o
Sass . E o CSS Grid agora pode salvá-lo do carregamento do Bootstrap.
“Você não precisa de uma estrutura para usar o CSS Grid. CSS Grid é uma estrutura. ”
- Rachel Andrew
Componentes da Web
Os componentes da Web são particularmente fortes e são a chave para grande parte dessa tendência. Eles incluem os seguintes recursos - Elementos Personalizados, Shadow DOM e modelos HTML -
ainda não estão disponíveis em todos os lugares , mas, como
Ada diz , eles têm um suporte muito bom e
existem polyfiles que oferecem suporte ainda melhor, para que você possa usá-los hoje!
Ada e
Ruth John desenvolveram recentemente um aplicativo da web para visualizar músicas usando componentes da web e
compartilharam suas lições .
Além disso, você pode se sentir mais seguro com novos recursos como o Web Components se usar a renderização no servidor (SSR) e implementar o lado do cliente com o
Progressive Enhancement .
Minha preferência pessoal é criar uma ótima experiência de SSR e aprimorá-la para um aplicativo de página única.
- Canhão de Ada Rose
Módulos isomórficos de ES
Você também pode usar os
módulos ES agora! Novamente, o suporte ao navegador é muito bom e você pode oferecer suporte a navegadores mais antigos usando o
fallback "nomodule" .
De fato, se você concorda com a abordagem de aprimoramento progressivo do SSR +, pode usar os módulos ES sem precisar usar ferramentas de compilação para
transpilar para outros navegadores, pois navegadores mais antigos ainda podem funcionar sem JavaScript. E usando o carregador de módulo
ESM , também podemos
usar módulos ES diretamente no NodeJS .
Isso é ótimo porque podemos reutilizar nossos scripts no front-end e no back-end (ou seja, "renderização isomórfica"), sem dançar com um pandeiro. Podemos estruturar nosso código de front-end sem precisar colar nossos scripts, colocar muitas tags de script em uma página ou usar carregadores do lado do cliente.
Foi exatamente isso que Ada demonstrou em sua
primeira palestra no Twitch este mês. Há também uma
entrada de blog com explicações.
Espero poder compartilhar meus pensamentos quando começarmos a entrar em uma nova era de desenvolvimento web. Uma era menos dependente das estruturas tradicionais da interface do usuário, bibliotecas CSS e empacotadores. Uma época em que enviamos menos bytes e carregamos nossos aplicativos da web mais rapidamente. A era das estruturas ameaçadas.
Obrigado a Nolan Lawson, Rich Harris e Ada Rose Cannon por sua ajuda e inspiração para este artigo. Este artigo também está publicado aqui no meu blog pessoal.***
Por mim, quero observar que, infelizmente, no momento apenas eu em Habré escrevo sobre
Svelte . Portanto, em russo há bastante informação sobre esse maravilhoso quadro.
Se você o conheceu pela primeira vez, pode estar interessado em ler outros artigos sobre este tópico:
Quem deseja monitorar ativamente seu desenvolvimento - bem-vindo ao canal de telegrama em russo
SvelteJS . Teremos o maior prazer em vê-lo!
Parabéns a todos pelo verão e pelas vitórias de nossa equipe! Tenham um bom final de semana! Viva!