Svelte: introdução

Neste capítulo você vai entender o modelo Svelte com fonte e JS já compilado para abrir sem instalador. O projeto-fio é o Ateliê Boa Viagem, ateliê digital fictício em Boa Viagem, Recife.

Seu ponto de partida

Use o exemplo 09-svelte-intro do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa.

Use servidor só em 127.0.0.1 quando o README do exemplo pedir HTTP local. Abrir ou testar não publica nada.

Como praticar

Leia → copie ou digite → mude uma coisa → preveja → salve → recarregue → confira. Restaure cada experiência antes da próxima. Faça as atividades antes de abrir as respostas comentadas.

Svelte compila na construção

Diferente de React/Vue no navegador, Svelte transforma .svelte em JavaScript eficiente. Neste volume você vê o fonte e roda a versão já compilada, sem obrigar npm na primeira abertura.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

<script>
  let titulo = 'Ateliê Boa Viagem';
</script>

<h1>{titulo}</h1>

Mude uma coisa e preveja

Altere titulo no arquivo compilado de referência e recarregue.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O h1 muda.

Se não acontecer

Edite o JS gerado desta etapa ou siga o README se usar compilador depois.

Reatividade com atribuição

Em Svelte, atribuir a uma variável let atualiza a view. Contadores ficam curtos.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

<button on:click={() => contagem += 1}>Pedidos: {contagem}</button>

Mude uma coisa e preveja

Comece contagem em 2.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O botão inicia em 2.

Se não acontecer

Confira a variável no script compilado.

Cada framework, um sotaque

React descreve UI como função do estado. Vue separa template e script com reatividade. Svelte empurra trabalho para o compilador. Escolha vem depois, no fechamento.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

React = biblioteca com runtime
Vue = framework progressivo
Svelte = compilador + runtime mínimo

Mude uma coisa e preveja

Anote em uma frase qual sotaque preferiu até agora.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Sua anotação pessoal; não há resposta única.

Se não acontecer

Não pule os exemplos anteriores.

Atividades

Atividade 1

Por que este volume entrega JS compilado no exemplo Svelte?

Atividade 2

Como a reatividade básica aparece no fonte Svelte?

Atividade 3

Svelte elimina a necessidade de entender HTML?

Respostas comentadas

Resposta da atividade 1

Para abrir e estudar sem instalar toolchain na primeira vez.

Resposta da atividade 2

Atribuições a variáveis let disparam atualização.

Resposta da atividade 3

Não; HTML/acessibilidade continuam necessários.

O arquivo completo

Referência do exemplo 09-svelte-intro, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Svelte intro — Ateliê Boa Viagem</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>
<a class="skip" href="#conteudo">Ir para o conteúdo</a>
<header>
<p><strong>Ateliê Boa Viagem</strong></p>
<nav aria-label="Principal"><ul class="nav"><li><a href="index.html" aria-current="page">Início</a></li></ul></nav>
</header>
<main id="conteudo">

<h1 id="titulo">Ateliê Boa Viagem</h1>
<button type="button" id="btn">Pedidos: <span id="n">0</span></button>
<script src="app.js"></script>

</main>
<footer><p>Conteúdo fictício. Estudo em 127.0.0.1.</p></footer>

</body>
</html>

app.js

let contagem = 0;
const n = document.getElementById('n');
document.getElementById('btn').addEventListener('click', () => {
  contagem += 1;
  n.textContent = String(contagem);
});