-
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