5 anos atrás

Svelte: o framework JavaScript que não é um framework

“Ah não, mais um framework JavaScript :(”
Você, neste momento.

A já consagrada santíssima trindade dos frameworks JavaScript para criação de front-end é composta por Angular, Vue e React. Aí você me pergunta: o que o Svelte pode oferecer de diferente desses três gigantes?

E eu lhe respondo: um bundle final de 0kb.

Isso mesmo, o Svelte não é um framework, ele interpreta os arquivos “.svelte” e retorna um JavaScript puro, sem dependência de nenhum framework.

{
   "name": "svelte-app",
   "version": "1.0.0",
   "devDependencies":{
     "npm-run-all": "^4.1.5",
     "rollup":  "^1.10.1",
     "rollup-plugin-commonjs":  "^9.3.4",
     "rollup-plugin-livereload":  "^1.0.0",
     "rollup-plugin-node-resolve":  "^4.2.3",
     "rollup-plugin-svelte":  "^5.0.3",
     "rollup-plugin-terser":  "^4.0.4",
     "sirv-cli":  "^0.4.0",
     "svelte":  "^3.0.0"
    },
    "scripts": {
     "build": "rollup -c",
     "autobuild": "rollup -c -w",
     "dev": "run-p start: dev autobuild",
     "start": "sirv public",
     "start:dev": "sirv public --dev"
    }
 }

Nesse package.json de um projeto Svelte inicial vemos que ele só usa dependências de desenvolvimento (devDependencies). Não há nada nele que vai para o bundle final, apesar de ter todas as funções de um framework.

Calma, sei que é difícil de entrar na cabeça agora, mas depois que você entender o que ele faz você vai ficar de queixo caído.

Isso aqui é um component .svelte:

Se você conhece Vue isso é bem familiar para você, tirando um detalhe ou outro, não há nada de novo sob o sol. A diferença é que esse arquivo, quando compilado pelo o Svelte, criará um arquivo em js (bundle.js), que irá conter somente isso.

Na imagem acima o arquivo bundle.js tem 2,7KB. O resultado final tem somente o que é necessário para aqueles dois arquivos (App.svelte e Nested.svelte) funcionarem 100%.

Isso por sí só é algo incrível. Você só envia para o usuário o que ele vai precisar e tudo é altamente otimizado para rodar o seu app.

Uma coisa que os frameworks fazem é quebrar todas as suas funcionalidades básicas em arquivos separados, por exemplo o flux, transitions ou css transpiler, para ter um bundle final menor.

Se você for usar uma transição de animação no React você terá que instalar de um pacote separado. No Svelte, você encontra tudo lá dentro e no bundle final só o que você realmente usou é compilado.

“O React não é reativo de verdade. React é só o nome.”
ROLMES, Xeroque

*pikachu_surpreso.jpeg*

Se você já usou uma planilha do Excel você já usou algo que tem programação reativa.

Programação reativa, em poucas palavras, é uma variável que tem seu valor atrelado a outra variável, por exemplo uma célula no Excel que soma dois valores c2 = SUM(a2, b2).

Só de você alterar o valor da célula a2 ou b2 o valor da célula c2 é atualizado instantaneamente.

Simples, certo?

Isso é um conceito bem antigo e é usado na programação há décadas, no JavaScript não existe maneira simples e natural de se fazer isso.

Os frameworks resolveram esse problema com o gerenciamento de estado, no React nós temos o this.setState.

No Vue declaramos o objeto data na configuração do componente e internamente ele verifica mudanças com setters e getters. Acessamos essa variável pelo objeto do componente usando o this.

O Svelte coloca as variáveis reativas em primeiro plano, só é necessário declarar a variável com let ou const, já que ela já é reativa e está acessível dentro do template, simples assim.

Se você quiser que ela seja reativa com base em outra variável, como no exemplo do Excel que eu citei, o Svelte nos dá uma nova sintaxe que funciona como mágica:

**Tutorial Svelte**: teste isso direto no seu navegador.

Na linha 8 é usado o símbolo $: —“$:” é uma instrução JavaScript válida, não se preocupe com linters — para declarar a variável reativa sum, que sempre é resolvida quando a variável numbers sofre alguma alteração.

No Vue seria o equivalente a um objeto computed.

Sério, olha como isso é simples entender. Isso vai facilitar tantas coisas e resolver tantos problemas que você talvez nem saiba que tem.

Se isso não é a coisa mais linda que você viu nesse ano, eu não sei como te convencer de outra forma que o Svelte é incrível.

>> Leitura Recomendada: Confira nossa linha do tempo do Mercado Front-End

Conteúdo ocultar

1 CSS no Svelte

2 Status do Svelte

CSS no Svelte

/*
   No princípio Deus criou o céu e a Terra,
   porém na Terra não havia forma nem vida
   e um grande escuridão cobria o mar,
   então Deus disse:
 */
 universo{
 display: none;
   background-color: #000;
   width: 100%;
   height: 100%;
 }
 universo.luz{
 display: block;
 }
 universo.luz: :after {
 display: block;
   position: absolute;
   content: 'Big Bang';
   background-color: white;
   border-radius: 100%;
   opacity: 1;
   width: 100px;
   height: 100px;
 }

O CSS no Svelte tem o escopo dentro do componente. Todo o css que você escrever só afetará aquele arquivo. Isso é o padrão dele, ele já trata o css como parte integral daquele componente, o que no React é completamente negligenciado, tendo que recorrer a diversas ferramentas de terceiros.

Isso torna o desenvolvimento muito mais padronizado e limpo. Esse pensamento é diretamente inspirado no Vue, que também tem o css integrado com o componente em um único arquivo.

>> Leitura Recomendada: Você sabe quais são os principais erros de CSS que você não deve cometer?

Status do Svelte

A versão 3 do Svelte é muito recente (22/03/2019). A comunidade inteira está correndo para criar ferramentas para ele.

O Sapper é um framework feito usando o Svelte para a criação de SPA’s e renderização no servidor. Ele é inspirado no Next.js.

O SvelteNative é um framework para desenvolvimento de aplicações nativas Android e iOS inspirado no NativeScript-Vue.

Para testes automatizados temos o svelte-testing-library que tem todas as funções de teste do jest como describe, expect, test, etc.

Tudo isso e várias outras novidades front-end estão em desenvolvimento constante. Novas ferramentas surgem todo dia e o futuro do Svelte é bem promissor 🙂

“O JavaScript é como uma caixa de chocolates. Você nunca sabe o que vai encontrar.”
Forrest Gump – CEO da StartUp Camarões Bubba Gump

O Front-end é uma das áreas de desenvolvimento em que mais ocorrem mudanças e isso é o que a torna especial, te força a aprender coisas novas sempre.

Essa sensação de que a gente sempre está para trás o tempo todo, faz com a gente se debruçar sobre horas em documentações e vídeos no youtube tentando aprender a usar esse novo brinquedo que todo mundo está falando.

Isso que me motiva a continuar estudando sempre. O Svelte é a minha obsessão agora, como há algum tempo foi o Vue, antes o React, antes o Angular e muito antes o jQuery (e antes ainda outras como Phaser JS, Three JS, Box2D JS, e a lista segue).

Creio que em mais ou menos um ano o Svelte terá a mesma popularidade que o Vue tem agora (me cobrem sobre isso no futuro). Estará mais robusto e muitas empresas o terão como ferramenta principal de front-end.

Temos um grande case de sucesso do Svelte aqui no Brasil, que talvez você já tenha usado e não sabe 😉

Hoje existe mais de 200 mil maquininhas de pagamento de cartão da empresa de pagamentos Stone espalhadas pelo Brasil, que estão usando o Svelte, como o @kaisermann nos contou.

Ele testou com vários frameworks e o Svelte foi o que teve melhor desempenho em um sistema de baixo processamento com linux embarcado, que são as máquinas da Stone.

Isso pode ser um grande mercado em que o Svelte pode ter chances de dominar.

Os dispositivos de baixo desempenho, como as já citadas, máquinas de pagamento ou SmartWatches, SmartTV’s, Raspberry, etc. Qualquer dispositivo que precise de alto desempenho e um código moderno com baixo custo de processamento.

Tem muito mais coisas incríveis que ele faz que eu não me aprofundei nesse artigo, como funções async direto no template (async dentro do html :O), props, gerenciamento global de estado (stores), eventos do DOM, models, animações, life cycles, sugestão de melhorias do código na compilação, etc.