6

🔧 Compilador Svelte o futuro do Front-end

#JavaScript #TypeScript
Demys Lima
Demys Lima

Navegando pelos meus milhares de grupos de tecnologia, um comentário me chamou a atenção. Falava sobre um novo ‘framework’ para desenvolvimento, que prometia simplicidade e performance, tudo junto e misturado. Corri para o google para ver se essas promessas eram verídicas e o que eu descobri me impressionou muito. Então pretendo neste post compartilhar alguns dos pontos que acredito serem os mais significantes.


Sintaxe limpa e simples


Uma das coisas que me atraíram para o Vue, foi a simplicidade como funcionam as coisas. Por exemplo: você não precisa ficar gerenciando estado, porque o Vue faz isso; não tem HTML no meio do JS. Também temos um divisão das coisas, HTML fica no TEMPLATE, o JS no SCRIPT e CSS no STYLE.


O Svelte trouxe o mesmo padrão, contudo de uma forma muito mais enxuta, não precisamos dividir nosso script em Data, Method, Ciclos de vida, basta criar as coisas como se estivesse escrevendo em um arquivo javascript. Um componente Svelte é muito parecido com um arquivo HTML, onde colocamos um script e um style.


Tirei um exemplo do site do Svelte, para mostrar a comparação da sintaxe entre os principais frameworks. Veja a imagem a baixo, temos dois inputs e em seguida o resultado do input 1 e input 2 somados.


Não foi fornecido texto alternativo para esta imagem


Em React teríamos o seguinte código:

import React, { useState } from 'react';
	

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
	
  return (
	  <div>
	    <input type="number" value={a} onChange​={event => setA(+event.target.value)}/>
	    <input type="number" value={b} onChange={event => setB(+event.target.value)}/>
	
	    <p>{a} + {b} = {a + b}</p>
	  </div>
  );
	
};



Em Vue o código seria desta maneira:

<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">
	

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>
	

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>


E final em Svelte o código fica simplesmente desta forma:

<script>
  let a = 1;
  let b = 2;
</script>
	

<input type="number" bind:value={a}>

<input type="number" bind:value={b}>
	

<p>{a} + {b} = {a + b}</p>


O que temos acima são duas variáveis e a utilizamos diretamente no HTML, sem a necessidade de nenhum código a mais para isso.


Em Svelte a forma como lidamos com o HTML é um pouco diferente, ele traz alguns blocos para fazer condicionais e loop, porém ele trouxe uma novidade que é o Wait de uma promise diretamente no template. Veja o GIF a baixo.


Não foi fornecido texto alternativo para esta imagem


Não temos muitos blocos dentro do template para aprendermos, então fiz um resumo deles na imagem a seguir.


Não foi fornecido texto alternativo para esta imagem


E os tradicionais Binds se resumem em colocar um bind: na propriedade que deseja tornar dinâmica e/ou as {}, para evento basta colocar on: em qual deseja escutar. Vejamos alguns exemplos.


<input type="number" bind:value={quantity}>
	

<img {src} alt="{name} dancing">
	

<input type=radio bind:group={scoops} value={1}>
	

<select multiple bind:value={flavours}>
	  
<div on:mousemove={handleMousemove}>
 The mouse position is {m.x} x {m.y}
</div>
	  
<canvas bind:this={canvasElement}></canvas>
	  
<button on:click={handleClick}>
 Click me
</button>
	  
//Com modificadores
<form on:submit|preventDefault={handleSubmit}>
</form>
	  
<button on:click|once={handleClick}>Click me</button>


Até aqui tratamos somente em como o Svelte tornou o trabalho mais simples entre o template e os nossos scripts. Agora vamos avançar para um dos principais pontos fortes do Svelte.


Reatividade além da imaginação


Os desenvolvedores do Svelte criaram para nós as declarações reativas, e para mostrar esse conceito, vou mais uma vez recorrer a um exemplo do site.


Não foi fornecido texto alternativo para esta imagem


Basta colocarmos um $: em uma variável e ela passa a reagir a qualquer alteração feita em outra variável que passamos para ela. E não para por aí, também podemos criar blocos de códigos reativos.


Não foi fornecido texto alternativo para esta imagem


Quanto código teríamos que escrever para termos esses resultados? Agora nosso trabalho é apenas colocar o $: e o compilador vai gerar o código necessário para executar o que desejarmos.


Rich Harris o idealizador do Svelte, mostrou em uma talk todo o poder da reatividade ‘Sveldiana’, segue o vídeo: Rethink Reactivity


Como assim sem Virtual DOM?


O Virtual DOM surgiu como uma maneira mais produtiva de renderizar somente o necessário no DOM real, outra maneira de fazer isso, seria escrever um código bastante verboso ou simplesmente renderizar todo o DOM real.


Os frameworks atuais colocam uma engine no projeto para atualizar o Virtual DOM e depois fazer a comparação entre ele e o DOM Real e por fim, atualizar o DOM Real, um processo parecido com a figura a seguir.


Não foi fornecido texto alternativo para esta imagem


Em média 150kb em uma Web App com os frameworks tradicionais, são reservados para a engine do framework, isso quer dizer que se você não fizer nada no projeto, ele já vai com esses 150kb em média a mais, e depois quando estiver com o projeto em execução, ainda vai ter mais um espaço em memória reservado para o Virtual DOM. Para saber mais sobre essa comparação vejo o post do Claudio Holanda.


A proposta do Svelte é não ter uma engine para o projeto, mas sim gerar todo o código necessário para ele executar diretamente, então temos um projeto enxuto e inteligente o suficiente para renderizar somente o necessário no DOM Real. O fluxo fica parecido com a figura a baixo.


Não foi fornecido texto alternativo para esta imagem


Como podemos ver na figura não temos uma engine, é o browser que trabalha diretamente com o Javascript para realizar as atualizações. Isso torna o Svelte o projeto Javascript mais performático até o momento.


Abaixo temos uma comparação dos bundles gerados pelos principais frameworks, veja como o Svelte se destaca nessa parte.


Font: https://pianomanfrazier.com/post/comparing-svelte-stencil/

Fonte: https://pianomanfrazier.com/post/comparing-svelte-stencil/


Não foi fornecido texto alternativo para esta imagem

Fonte: https://pianomanfrazier.com/post/comparing-svelte-stencil/


Veja essa conversa entre o Kaizermann e Rich Harris criador do Svelte.


Não foi fornecido texto alternativo para esta imagem

Fonte: https://blog.geekhunter.com.br/svelte-o-framework-javascript-que-nao-e-um-framework/


Trabalhando com Store


Para quem trabalha a algum tempo no front-end moderno, em algum momento teve que utilizar o Vuex ou o Redux, utilizar qualquer um destes não é um trabalho muito simples. Existe toda uma burocracia envolvida,mas com o tempo se tira de letra.


O Svelte por outro lado, tira toda a burocracia e traz o auto subscription para o template. E para mostrar o trabalho de stores fiz um código bem simples.


Store

import { writable } from "svelte/store"	

export const user = writable({
  nome: "Rich Harris",
  telefone: "92 99292-9292",
  email: "gmail@gmail.com"
})


Form

<script>
  import { user } from "./store.js";
</script>
	

<style>
  .content {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-column-gap: 10px;
  }
</style>
	

<h1>Form</h1>
<form class="content">
  <label>Nome</label>
  <input type="text" bind:value={$user.nome} />
  <label>E-mail</label>
  <input type="text" bind:value={$user.email} />
  <label>Telefone</label>
  <input type="text" bind:value={$user.telefone} />
</form>


View

<script>
  import { user } from "./store.js";
</script>
	
<style>
  .contant {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-column-gap: 10px;
  }
</style>
	
<h1>View</h1>
<div class="contant">
  <label>Nome</label>
  <label>{$user.nome}</label>
  <label>E-mail</label>
  <label>{$user.email}</label>
  <label>Telefone</label>
  <label>{$user.telefone}</label>
</div>


App

<script>
  import SForm from "./SForm.svelte";
  import SView from "./SView.svelte";
</script>
	

<SForm />
<hr />
<SView />



Resultado

Não foi fornecido texto alternativo para esta imagem


Com esse exemplo já é possível notar a incrível diferença de implementação e utilização do Store no Svelte. Aqui eu utilizei apenas o Writable, porém ainda temos os Readable, Derived e Custom. Todos tão simples quanto o Writable.


Transition, Animation e Motion


Além de todas essas novidades, o Svelte ainda se preocupa em facilitar o trabalho com transições, movimentos e animações, incluindo no seu core, várias libs que tratam desses detalhes, reduzindo o nosso trabalho manual.

Não foi fornecido texto alternativo para esta imagem

Não foi fornecido texto alternativo para esta imagem


Por se tratar de uma grande gama de opções, deixei apenas esse exemplo, mas você pode verificar todas na documentação oficial.


Libs UI e outros projetos


Para quem quer componentes prontos para usar, a comunidade não perdeu tempo, já temos algumas libs UI para colocar a mão na massa. São elas:


  • Svelma: lib desenvolvida com Bulma CSS Framework.
  • Svelte Material UI: como o próprio nome já denuncia, é desenvolvida em Material Design.
  • Sveltestrap: lib baseado no Bootstrap.
  • Smelte: lib criada com Tailwind.
  • Temos também a disposição projetos para Server Side Render(SSR) e mobile, que são:
  • Sapper: template pronta para SSR e construção de PWAs.
  • Svelte Native: uma iniciativa para construção de apps mobile nativas, é baseada em Native Script.
  • Sveltejs/gl: para criação de animações 3D, vejo uma exemplo neste link.


E dentro de todo esse ecossistema, temos alguns brasileiros contribuindo no Sapper e em algumas libs como a svelte-intlsvelte-i18nsvelte-loadable e em outros projetos.


São eles: o Cristóvão Trevisan e o Christian Kaisermann que é o mesmo do famoso twitter com Rich Harris.


Quem está utilizando?



Essas são algumas das empresas que estão adotando o Svelte na sua stack, e não faz muito tempo o próprio Spotify entrou na onda ‘Sveldiana’ incluindo ele em alguns de seus projetos. A IBM uma das grande corporações de tecnologia, não só adotou o Svelte em sua stack como também desenvolveu uma lib de componentes para ele, o Carbon.


Onde aprender com PT-BR


Para quem deseja aprender Svelte e não tem um bom inglês, pode acompanhar os seguintes canais e suas playlists dedicadas ao Svelte:


Entre também nas comunidades recém nascidas do Svelte Brasil. Eu estou em todas elas, porém mais ativo no Discord e Telegram.


Referências


https://svelte.dev/

svelte-o-framework-javascript-que-nao-e-um-framework

svelte-a-era-dos-frameworks-compiladores/

https://pianomanfrazier.com/post/comparing-svelte-stencil/

2
46276

Comentários (3)

1
Leonardo Souza

Leonardo Souza

06/04/2021 10:36

O convite para o Discord deu inválido

1
Demys Lima

Demys Lima

27/03/2021 14:03


Venha conhecer a nossa comunidade: https://sveltebrasil.dev/

Analista Desenvolvedor Full-stack Sênior e palestrante de tecnologia.

Brasil