Svelte, além do hype.
Tiago Vilas Boas (Montanha)
Zé, Zé Pqueno e etc
- Desenvolvedor Front-End Sr na Dextra
- 12+ anos de experiência com TI
tiago@artesites.com.br
O Svelte foi criado em 2016 pelo Rich Harris, seu criador o define como uma nova linguagem de escrever componentes ao invés de um framework.
Framework que não é framework!?
A verdade sobre Svelte: https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934
- Escrita simples
- Escrever menos código
- Não utilizar Virtual DOM
- Verdadeiramente reativo
- Compile-time
Premissas
Rich Harris - Rethinking reactivity: https://www.youtube.com/watch?v=AdNJ3fydeao
Rich Harris - Rethinking reactivity: https://www.youtube.com/watch?v=AdNJ3fydeao
Reatividade?
Um exemplo mais simples sobre a reatividade é através de uma função no Excel onde um valor de uma célula modificada altera o estado de outras células relacionadas sem mudar os itens não relacionados.
Utilizando somente tecnologia web o Svelte interpreta seus componentes .svelte e através do rollup.js (ou webpack) retorna um bundle de javascript nativo para seu browser, ou seja, ele transforma templates HTML em DOM scripiting.
E o que ele faz?
Comparações dos pacotes (bundles)
| Framework | Quantidade JS Files | Tamanho do bundle JS (KB) | % |
|---|---|---|---|
| Svelte | 7 | 43.54 | 4 |
| Stencil | 10 | 120.06 | 12 |
| Outros Frameworks | |||
| Angular | 8 | 551.97 | 54 |
| React/Redux | 1 | 1,024.00 | 100 |
| Vue | 6 | 218.13 | 21 |
| Elm | 1 | 90.52 | 9 |
RealWorld App
RealWorld App: https://github.com/gothinkster/realworld
O Svelte não possui uma engine Virtual DOM, o mesmo tem o propósito de gerar todo código necessário e executar somente o necessário para renderizar o DOM real. (compile-time vs run-time)
Diga adeus ao Virtual DOM
Virtual DOM is pure overhead: https://svelte.dev/blog/virtual-dom-is-pure-overhead
Tá, e como começar?
Você consegue iniciar com o Svelte 3 (stable) através do REPL ou através do degit (Rick Harris) que copia estruturas de repositorios git.
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run devNo terminal:
package.json
{
"name": "svelte-app",
"version": "1.0.0",
"devDependencies": {
"npm-run-all": "^4.1.5",
"rollup": "^1.12.0",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^4.0.4",
"svelte": "^3.0.0"
},
"dependencies": {
"sirv-cli": "^0.4.4"
},
"scripts": {
"build": "rollup -c",
"autobuild": "rollup -c -w",
"dev": "run-p start:dev autobuild",
"start": "sirv public --single",
"start:dev": "sirv public --single --dev"
}
}
Sintaxe - Single File Component (SFC)
<!-- MyComponent.svelte -->
<script>
// logic of component
</script>
<style>
/* styles of component */
</style>
<!-- HTML Markup -->
Javascript
<!-- MyComponent.svelte -->
<script>
let count = 0;
function increment() {
count = count+=1;
}
</script>
<button on:click={increment}>
{count} click(s).
</button>
CSS (Scoped)
<!-- MyComponent.svelte -->
<style>
/*afeta os elementos <p>
somente deste componente*/
p {
color: purple;
font-family: 'Comic Sans MS';
font-size: 2em;
}
</style>
<p>Mussum ipsum cacilds,
vidis litro abertis. </p>
CSS (Global)
<!-- app.svelte -->
<style>
:global(body) {
/* isso se aplica ao <body> */
margin: 0;
}
div :global(strong) {
/* isso se aplicará a todos
os elementos <strong>,
em qualquer componente dentro
dos elementos <div> */
color: goldenrod;
}
</style>
Declaração reativa
<script>
let count = 0;
let double;
$: double = count*=2;
function inc() {
count = count+=1;
}
</script>
<h1>
Count: {count}, Double: {double}
</h1>
<button on:click={inc}>
Increment
</button>
Forms (Bindings)
<script>
let name = '';
let active = false;
</script>
<input type="text" bind:value={name}>
<input type="checkbox" bind:checked={active}>
Hello, my name is: {name}.
I'm active? { active ? 'Yes.' : 'No.' }
Stores
// store.js
import { writable } from 'svelte/store';
export const user = writable({
name: "Jose da Silva Sauro",
phone: "11 99991-1000",
email: "email@provedor.com"
})
Forms
<script>
import { user } from "./store.js";
</script>
<h1>Form</h1>
<form class="content">
<label>Nome</label>
<input type="text" bind:value={$user.name} />
<label>E-mail</label>
<input type="text" bind:value={$user.email} />
<label>Telefone</label>
<input type="text" bind:value={$user.phone} />
</form>
If-else (Block)
<script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{:else}
<button on:click={toggle}>
Log in
</button>
{/if}Each (Block)
<script>
let frameworks = [
{id: 0, name: 'Angular'},
{id: 1, name: 'React'},
{id: 2, name: 'Vue'}
]
</script>
<h1>Frameworks List</h1>
<ul>
{#each frameworks as {id, name}}
<li>
{id}: {name}
</li>
{/each}
</ul>
Await (Block)
{#await promise}
<p>...loading</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
Vantagens
- Simplicidade
- Poder de processamento
- Curva de aprendizado
- Menos dependências
- Arquitetura (SFC)
- Crescimento exponencial
Desvantagens
- Maturidade
- Comunidade pequena
- Libs em desenvolvimento
- Vagas no mercado
Case
Svelte é a solução mais simples e performática para hardwares limitados.
Ecosistema
- Sapper - template com suporte SSR e construção de PWAs
- Svero - rotas
- Svelte routing - rotas
- Svelte Testing Library - ferramentas de testes
- Svelte Native - apps mobile nativas ( Native Script ).
- Material - UI Frameworks
- Bulma - UI Frameworks
Quem já usa Svelte?
Aprender Svelte em Pt-BR
Referências
Dúvidas?
O que é Svelte JS?
By Tiago Vilas Boas
O que é Svelte JS?
Svelte é uma linguagem para descrever interfaces de usuário reativas utilizando uma abordagem diferente e podemos considera-lo como uma nova linguagem de escrever componentes ao invés de um framework.
