Por que o SvelteJS é sem dúvida o melhor framework para novos desenvolvedores web

Qualquer desenvolvedor da web que faça isso há pelo menos alguns anos provavelmente ouvirá uma pergunta semelhante dia após dia:

Eu realmente quero me tornar um desenvolvedor web, mas não sei por onde começar. Alguma sugestão?

Cerca de 10 anos atrás, a resposta era muito simples. Basta criar index.html, adicionar algumas tags, deixar o título em vermelho com CSS e ativar o jQuery para lidar com cliques!

Oh, como tudo mudou. Agora estamos trabalhando com ferramentas de construção, roteamento do lado do cliente, estruturas especiais com tempo de execução sofisticado, vinculando "isso" em todos os lugares, literais de modelo, CSS-in-JS ... como escolher o que é mais importante?

Tudo isso levou a inúmeras variações sobre por onde começar com graus variados de "apenas entre agora e depois explicarei". Alguns incentivam os recém-chegados a aprender o React ou o Vue imediatamente para iniciar as práticas modernas. Enquanto outros gritam do topo das montanhas, os iniciantes devem sempre começar pelo básico. Na verdade, ambas as abordagens têm seus méritos. O primeiro pode atrair os recém-chegados a coisas como recarga a quente e componentes, correndo o risco de deixar muito para o lado. Enquanto o segundo faz com que os novatos entendam como o DOM funciona ao mesmo tempo, talvez distraia as pessoas com a complexidade do JS vanilla, do qual estamos abstraindo há muito tempo.

É por isso que precisamos de um meio termo. Uma maneira de começar o básico, absorvendo ao mesmo tempo conceitos modernos, como desenvolvimento baseado em componentes, CSS isolado versus em cascata, modelos, funções declarativas etc. etc.

Svelte, ao seu serviço

O SvelteJS é um cartucho relativamente novo na estrutura js de frameworks, que está apenas começando a atrair atenção. Alguém pode saber depois de publicar o State of JavaScript 2018 . Em suma, o Svelte pretende ser uma estrutura que não é realmente uma estrutura. Ele é baseado em uma ferramenta para compilar componentes no estágio de montagem, o que permite carregar na página apenas o necessário para exibir seu aplicativo. Isso significa que não há DOM virtual, não há estruturas em cima das estruturas e não há estrutura em tempo de execução .

Todos esses argumentos são bastante sérios para desenvolvedores mais experientes, mas a maioria dos iniciantes provavelmente não conseguiu ler o último parágrafo sem quebrar a cabeça. Felizmente, não é a mágica da compilação que torna o Svelte tão amigável para iniciantes, mas sua sintaxe.

Se você nunca viu o componente Svelte, aqui está um exemplo simples:

<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> /*   CSS */ .pretty { color: red; } </style> <script> /* ...        */ let name = "Ben"; </script> 

Vamos descobrir. Portanto, em primeiro lugar, vale a pena notar que tudo isso pode ser escrito mesmo em um arquivo .html normal, mesmo em um arquivo .svelte , se sua alma desejar. Também vemos algumas tags familiares que lembram o desenvolvimento sem uma estrutura: estilo e script . Os estilos e o código JS são escritos nessas tags para criar componentes adequadamente. Além disso, permite que o destaque de sintaxe funcione sem plug-ins de editor adicionais, como soluções CSS-in-JS. Além disso, o compilador Svelte é inteligente o suficiente para isolar qualquer estilo específico de componente por padrão. Portanto, você não terá estilos fluindo entre componentes.

Você também vê como algo mágico acontece com o nome da variável JavaScript. Este é um novo conceito brilhante para o Svelte 3, onde qualquer variável no script do seu componente é acessível a partir da marcação. Não temos uma sintaxe especial que precise ser aprendida para gerenciar o estado. Não há escopo Angular $ , nem React this.state , nem dados do Vue. Em vez disso, podemos simplesmente usar variáveis ​​comuns para descrever o estado, causando nova renderização sempre que seus valores mudarem.

Essa liberdade desse "jargão" sintático significa que a criação de um componente começa a se parecer com a criação de um CodePen, apenas sem a necessidade de pensar em como conectar a função JS declarativa a algum tipo de seletor DOM.

Outra coisa interessante é que os componentes Svelte são importados tão facilmente quanto os componentes tradicionais. Você pode simplesmente importar .html , pois o Svelte sabe como implantá-lo:

 <div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script> 

Legal, mas espere um minuto ...

Alguns leitores podem achar esse conceito tão impressionante quanto eu. Ao mesmo tempo, outros provavelmente têm seus próprios argumentos contra o uso dessa abordagem para ensinar iniciantes. Eles não estão curiosos sobre como a manipulação do DOM realmente funciona?

A resposta é ... possível. Mas quando alguém está apenas começando (pelo menos por experiência pessoal), você pode aceitar um pouco de abstração para criar mais rapidamente coisas legais.

Além disso, assim como algumas linguagens, como Java e JS, abstraíram o gerenciamento de ponteiros por meio da coleta de lixo, a maioria das ferramentas modernas de desenvolvimento da Web ignoraram a manipulação do DOM. Exceto nos casos extremos mais difíceis que os iniciantes provavelmente não precisarão. A propósito, se você está intrigado sobre o que é gerenciamento de ponteiro, acho que isso só prova meu ponto. Portanto, em vez de forçar os novatos a manipular o DOM ou aprender maneiras específicas de gerenciar o estado da estrutura, por que não deixá-las acessar variáveis ​​diretamente da marcação? Agora eles podem aprender os princípios básicos do gerenciamento estatal de componentes sem cair no luto.

Ok, vejo um exemplo básico, mas o Svelte deve ter alguns recursos específicos para que ele funcione.

Sem dúvida, é verdade, mas é muito menos do que você pensa. Uma parte da sintaxe do Svelte é para mapear elementos DOM de forma iterativa e condicional. Isso funciona de maneira muito semelhante ao mapa do JSX, mas sem todos esses colchetes aninhados nos quais os novatos (e eu) podem facilmente se perder. Aqui está a maneira básica que gera uma lista de elementos de uma matriz:

 <ul> {#each profiles as profile} <li>{profile.name}: {profile.role}</li> {/each} </ul> <script> const profiles = [ {name: 'Wes Bos', role: 'React extraordinaire'}, {name: 'Chris Coyier', role: 'Father of CodePen'}, {name: 'Cassidy Williams', role: 'Letting you know it's pi time'} ]; </script> 

Mais uma vez, entendo qualquer crítica em relação à sintaxe, mas gosto de como é fácil entender. Em vez de incorporar o JavaScript em nosso código HTML, simplesmente dizemos: ei, vamos percorrer esse array e criar um elemento para cada um deles.

Vale mencionar outro recurso do Svelte, do qual não estou tão entusiasmado: a sintaxe para transmitir adereços aos componentes. Sim, é totalmente funcional e fácil de aprender, mas, ao mesmo tempo, pode parecer mágico demais para o gosto de algumas pessoas. Para processar adereços, simplesmente os passamos para o componente onde quer que seja importado ...

 <!-- somewhere.html --> <Profile coolGuy="Scott Tolinski" /> 

... e obtemos essa variável como um "let" exportado:

 <!-- profile.html --> <p>{coolGuy}</p> <script> export let coolGuy = ''; </script> 

Compreendo perfeitamente que, para alguns, isso pareça um abuso de "exportação". Mas pelo menos isso corresponde a como os iniciantes devem conceituar os módulos: exportamos o que precisamos acessar fora do componente e importamos o que queremos usar em nosso componente.

Eu poderia superar essa estranheza ... mas e a etapa de compilação necessária?

Portanto, outra crítica sobre como começar a trabalhar com estruturas é a necessidade de usar um gerenciador de pacotes. O que significa ... inferno, use o terminal!

Escute, eu entendo que abrir essa coisa pode ser extremamente intimidador, com seu mono-fonte e assustador "cd" para navegar nos diretórios. Mas, honestamente, esse realmente não é um grande obstáculo quando você precisa de apenas uma equipe para executar. Além disso, o terminal integrado no VS Code facilita a introdução. Ele até abre na parte inferior da janela, diretamente no diretório do seu projeto!

O Svelte realmente oferece um iniciador para download , mas eu criei meu próprio modelo de iniciante que usa o Rollup para download direto. De fato, o arquivo de configuração tem menos de 30 linhas! Para um projeto básico do Svelte, estes são todos os diretórios e arquivos que você precisa:

/public
index.html
/src
index.html
app.js
rollup.config.js
package.json


Basta adicionar o comando para iniciar a etapa de compilação no package.json e pronto! É claro que você pode dizer que todos os módulos e arquivos adicionais de que outras estruturas precisam não são um problema se um iniciante não os tocar, mas, na minha opinião, quanto menos coisas adicionais, melhor para iniciantes.

Ok, bem, isso é legal e conveniente para iniciantes. Mas quão estável é esse quadro?

Essa é uma questão muito atual para uma estrutura jovem como o Svelte. Todos os exemplos que eu mostrei usam a sintaxe da versão 3 do Svelte, que ainda estava em versão beta. Por mais emocionante que fosse, eu esperaria mais alguns meses antes de correr com ele para a programação de seminários. No entanto, o Svelte oferece uma página de documentação realmente concisa para a versão 3 , o que pode facilitar para iniciantes.

Então, vamos dar uma olhada em alguns dos principais benefícios de aprender sobre desenvolvimento web com o Svelte:

1. Esta é uma estrutura de componentes com 0 plug-ins adicionais.
2. Ele gerencia o estado sem nenhum lixo comum
3. Usa isolamento de estilo sem usar CSS-in-JS (portanto, não é necessário nenhum plug-in de editor ou sintaxe estúpida)
4. Para começar, você precisa apenas de um script de construção muito simples.
5. Praticamente não há arquivos adicionais no projeto base

Obviamente, isso é perfeitamente normal se eu não conseguir convencê-lo neste artigo. Todos os bons artigos provocaram um pouco de controvérsia! Mas espero que este artigo, pelo menos, mostre a você como Svelte é legal e simples de aprender.

Obrigado por ler isso!

Sou desenvolvedor front-end da Web em processo de aprendizado, sempre mexendo com algo novo. Vou tentar publicar regularmente aqui, então escreva se quiser!

***

Do tradutor:

Obrigado por ler esta tradução! Espero que este artigo o incentive a olhar para o Svelte como uma ferramenta para treinamento ou mesmo um novo projeto.

Venha ao meu workshop de duas horas sobre o Svelte 3 no HolyJS Piter , de 24 a 25 de maio . Quem quer apenas acompanhar o desenvolvimento do Svelte - bem-vindo ao canal de telegrama em russo SvelteJS . Teremos o maior prazer em vê-lo!

E uma pequena pesquisa, sem referência à estrutura e tecnologia. Sua opinião é apenas interessante.