• O que é Svelte?

  • Diferenciais do Svelte

  • Pontos negativos

  • Exemplos

Agenda 📓

O que é Svelte? 🤔

  • Inglês para "esbelto" 🧐;

  • Funciona como um framework web, como React e Vue, mas é um compilador;

  • Permite criar aplicações web reativas e utilizando componentes;

  • Criado em 2017, mas vem crescendo muito:

    • Até abril de 2019 ➔ ~10k ⭐ no GitHub;

    • Hoje em dia ➔ ~37k ⭐.

  • Atualmente na versão 3.
     

<!-- Estrutura de um arquivo .svelte -->

<script>
// seu JS aqui
</script>

<style>
/* seu CSS aqui */
</style>

<!-- tags HTML aqui -->

<h1>...</h1>

<p>...</p>

<button>...</button>

Quais são os pontos positivos? 👍

não faz uso de virtual DOM ➔ mais rápido

⚡

👩‍💻

soluções usando a própria linguagem ➔

menos boilerplate, mais simples de aprender e codificar

// Alteração de estado com Svelte antigo

const { count } = this.get();
this.set({
  count: count + 1
});

// Bem próximo de React (pré-hooks)

const { count } = this.state;
this.setState({
  count: count + 1
});

// Com Svelte 3

let count = 0;
count += 1;

🦮

avisos sobre acessibilidade ➔ promove inclusão

🌊

CSS escopado por padrão ➔ evita "vazamento" de estilos para outros componentes

🎞️

transições builtin ➔ facilita a criação de transições

🧑🏿‍🤝‍🧑🏻

crescimento da popularidade ➔ comunidade maior e mais ativa

Mas e os negativos? 👎

👶

ferramenta nova ➔ ...

  • Menos material disponível;
  • Ecossistema pouco desenvolvido;
    • Sapper na versão 0.28.7;
    • svelte-native na versão 0.8.5 .
  • Incerteza sobre o futuro da ferramenta.

Exemplo Final

Obrigado!

Svelte | CodeLab Bits

By codelab@ime.usp.br

Made with Slides.com

Svelte | CodeLab Bits

  • 269

More from codelab@ime.usp.br