»

Conheça Svelte, o framework “compilador”

Última atualização:
maio 8, 2020

VueJS, Angular e React são nomes populares quando o assunto é framework para desenvolvimento de web apps. Eles popularizaram o conceito de DOM virtual, assim não é necessário atualizar o DOM diretamente. Há uma sincronização entre o dom virtual e real. A vantagem disso é que sua página só seria atualizada no momento que fosse realmente necessário. O processo de sincronização é chamado de reconciliação. Basicamente esse processo existe para facilitar o controle de estado da sua aplicação. Você especifica o state para o framework e ele vai garantir que o DOM real esteja nesse estado. Quando utilizamos essa abordagem precisamos de runtime, ou seja, quando você faz o build da sua aplicação uma porção de código do framework fica responsável por rodá-la.

Svelte

Svelte é um framework novo que não possui runtime, ou seja, ele funciona mais como um compilador do que um framework. Ele pega o seu código e compila para funcionar com a API nativa do browser. Nenhum código além da sua aplicação será rodado. Isso implica em outra característica do Svelte: o fato de não utilizar o virtual DOM. Segundo os próprios criadores do Svelte o virtual DOM é puramente uma sobrecarga. Isso acontece porque há um preço em se comparar o Virtual DOM com o real. O Virtual DOM não existe para tornar sua aplicação mais rápida, ele existe puramente, como já supracitado, para facilitar o controle de estado da aplicação.

De fato, o framework prova cumprir o seu papel. Em testes publicados no FreeCodeCamp pode-se observar que o tamanho final do build fica substancialmente menor que outros frameworks (imagem 1).

Ainda assim, em termos de performance ele tem se mostrado com desempenho comparável aos concorrentes. Algo que sempre fica como uma questão é se os testes iniciais de benchmark se manterão em projetos mais complexos. Essa questão acaba deixando o desenvolvedor em dúvida se vale a pena lançar mão de uma nova tecnologia pelo que ela promete e não se apoiar no antigo que já está consolidado no mercado.

Neste artigo o Svelte será introduzido brevemente, com o intuito de se ter uma visão geral do framework e sirva como um direcionador para a construção de um projeto. No final apresentarei o tradicional projeto de jogo da velha para demonstrar seus recursos.

O Jogo da Velha

Vamos desenvolver um pequeno jogo da velha. Vocês verão que escrever componentes em Svelte é basicamente escrever HTML, Css e JavaScript. Existe uma sintaxe específica do framework, mas ela é de fácil aprendizagem, simples e intuitiva.

A primeira parte do código é a definição de variáveis necessárias. Guardamos o vencedor como O ou X em winner e o jogador em turn. O board é guardado em uma variável dinâmica do Svelte, por isso o label “$”. Variáveis dinâmicas são assim definidas porque a alteração dessas implica na renderização do componente. É particularmente útil redesenhar tudo no momento de mudança do board em um jogo da velha, assim mantemos o que está desenhado sincronizado com a lógica. Podemos pensar como um watch para aqueles que vem do Vue.

A seguir temos duas funções, uma para jogar, que armazena o jogador na posição que estiver vazia e checa se houve alteração do vencedor. O operador de assimilação “=” é muito importante no Svelte, pois é como ele sabe que algo mudou e precisamos renderizar novamente.

A seguir temos a versão que verifica se as posições que indicam a vitória foram preenchidas e retorna os jogadores que ocupa essa posição e é, portanto, o vencedor.

A lógica do jogo é basicamente essa, o resto é o desenho do board em puro html e CSS para estilização.

Era possível utilizar mais recursos do Svelte, mas eu preferi não fazê-lo para mostrar que com JavaScript, HTML e CSS podemos construir nossos componentes. Há renderização condicional, tratamento para renderização de promisses de forma especial e muitos aspectos interessantes do framework.

Conclusão

Svelte é um framework novo que foge ao conceito de virtual DOM e runtime. Funciona mais como um compilador que “converte” os componentes feitos de forma declarativa para a API imperativa do browser. Os compila para um JavaScript otimizado e eficiente.