Pular para conteúdo

Frontend com Svelte ⚡

"Svelte não usa um framework em tempo de execução — ele desaparece no build, deixando só código puro e rápido." — Provérbio Dev

🧭 Atalhos Rápidos

  • Aulas --- 16 aulas completas organizadas em 4 módulos práticos. Ver Trilha

  • Slides --- Slides interativos em Reveal.js para acompanhar cada aula. Acessar Slides

  • Quizzes --- Teste seus conhecimentos com quizzes interativos. Fazer Quizzes

  • Projetos --- Projetos práticos para construir seu portfólio. Ver Projetos

  • Exercícios --- Pratique com exercícios focados em código real. Praticar Agora

  • Setups --- Guias de instalação e configuração do ambiente Svelte. Configurar Ambiente

🗺️ Mapa da Jornada

O curso está estruturado para levar você do zero à construção de interfaces ultrarrápidas com Svelte:

  • Módulo 1 – Fundamentos: Desenvolvimento frontend moderno, introdução ao Svelte, estrutura de projeto e sintaxe básica, reatividade.
  • Módulo 2 – Componentes: Componentização, loops e condicionais, eventos e formulários, estilização e escopo de CSS.
  • Módulo 3 – Estado e API: Roteamento SPA na prática, stores e gerenciamento de estado, consumo de API REST, CRUD completo com API.
  • Módulo 4 – Produção: Ciclo de vida e performance, boas práticas e arquitetura frontend, build/deploy/produção, e o projeto final.

💡 Dicas de Sucesso

  1. Entenda a reatividade do Svelte: $: e as atribuições reativas funcionam diferente de outros frameworks — pratique até internalizar.
  2. Menos é mais: Svelte compila para JS puro, então evite dependências pesadas que anulam essa vantagem de performance.
  3. Explore as stores cedo: elas resolvem gerenciamento de estado de forma muito mais simples que em outros ecossistemas.

Pronto para começar? Ir para Aula 01

Plano de Ensino 🧭

Curso: Desenvolvimento Frontend com Svelte
Público-alvo: Estudantes de ADS, Ciência da Computação e Desenvolvedores de Software
Carga Horária: 20 Aulas (80 Horas Teórico-Práticas)

🎯 1. Objetivos do Curso

  • Compreender os fundamentos conceituais e arquiteturais de Desenvolvimento Frontend com Svelte.
  • Aplicar padrões de projeto, sintaxe moderna e boas práticas da indústria.
  • Desenvolver soluções completas através de exercícios práticos e desafios de projeto.

📚 2. Cronograma de Aulas (Matriz de 20 Semanas)

Aula Tema Central Atividades e Entregas
01 Introdução ao Desenvolvimento Frontend Moderno Teoria, Prática Guiada, Quiz e Exercícios
02 Introdução ao Svelte ️ Teoria, Prática Guiada, Quiz e Exercícios
03 Estrutura de Projeto e Sintaxe Básica Teoria, Prática Guiada, Quiz e Exercícios
04 Reatividade no Svelte Teoria, Prática Guiada, Quiz e Exercícios
05 Componentização Teoria, Prática Guiada, Quiz e Exercícios
06 Loops e Condicionais Teoria, Prática Guiada, Quiz e Exercícios
07 Eventos e Formulários ️ Teoria, Prática Guiada, Quiz e Exercícios
08 Estilização e Escopo de CSS Teoria, Prática Guiada, Quiz e Exercícios
09 Roteamento SPA na Prática ️ Teoria, Prática Guiada, Quiz e Exercícios
10 Stores e Gerenciamento de Estado Teoria, Prática Guiada, Quiz e Exercícios
11 Consumo de API REST Teoria, Prática Guiada, Quiz e Exercícios
12 CRUD Completo com API ️ Teoria, Prática Guiada, Quiz e Exercícios
13 Ciclo de Vida e Performance Teoria, Prática Guiada, Quiz e Exercícios
14 Boas Práticas e Arquitetura Frontend ️ Teoria, Prática Guiada, Quiz e Exercícios
15 Build, Deploy e Produção Teoria, Prática Guiada, Quiz e Exercícios
16 Projeto Final Teoria, Prática Guiada, Quiz e Exercícios
17 Reatividade Nativa com Stores e Runes Teoria, Prática Guiada, Quiz e Exercícios
18 Animações e Transições Integradas em Svelte Teoria, Prática Guiada, Quiz e Exercícios
19 Gerenciamento de Estado Global e Persistência Teoria, Prática Guiada, Quiz e Exercícios
20 Projeto Capstone: Aplicação Svelte Autônoma Ultrafast Teoria, Prática Guiada, Quiz e Exercícios

🧠 3. Metodologia de Ensino

  • Teoria Fundamentada: Aulas com conceitos detalhados, diagramas arquiteturais e sintaxe de referência.
  • Ciclo Teoria ⇄ Prática: Cada aula conta com Quiz Interativo (10 questões) para validação imediata, Lista de Exercícios Sanfonados (com Gabarito Explicado) e Desafio de Projeto Prático.
  • Laboratório Contínuo: Ambientes configurados passo a passo na seção de Setups da plataforma.

💼 4. Competências e Perfil Desenvolvido

  • Dominar as ferramentas e fluxos de desenvolvimento de Desenvolvimento Frontend com Svelte.
  • Resolver problemas técnicos de alta complexidade com código limpo e performático.
  • Construir portfólio prático com 20 projetos aplicados.

📊 5. Critérios de Avaliação

  • 20 Listas de Exercícios: Resolução individual dividida em Básico, Intermediário e Desafio.
  • 20 Quizzes Interativos: Validação formativa com feedback imediato via JavaScript.
  • 20 Desafios de Projetos: Aplicações práticas consolidando o aprendizado de cada unidade.

Aulas

Aulas do Curso

Bem-vindo à seção de aulas! Aqui você encontra todo o conteúdo do curso organizado em 5 módulos estruturados.

📚 Módulos do Curso

Aula 01 - Introdução ao Desenvolvimento Frontend Moderno 🌐

Objetivo

Objetivo: Compreender a evolução das tecnologias de frontend, entender o conceito de Single Page Applications (SPA) e como a reatividade mudou a forma de construir interfaces web modernas.

1. A Evolução do Frontend 🚀

O desenvolvimento web percorreu um longo caminho desde as páginas HTML estáticas dos anos 90 até as aplicações altamente interativas de hoje.

🏛️ Web 1.0: Páginas Estáticas (MPA)

Antigamente, cada clique em um link solicitava uma página inteira do servidor. * MPA (Multi-Page Application): Todo o processamento era feito no backend. * Experiência: Lenta, com "piscadas" brancas a cada navegação.

⚡ Web 2.0 e o Surgimento do AJAX

Com o AJAX, passamos a atualizar partes da página sem recarregá-la completamente. Isso abriu portas para redes sociais e apps como o Gmail.

📱 Era das SPAs (Single Page Applications)

Aplicações modernas carregam uma única página e usam JavaScript para trocar o conteúdo dinamicamente. * Vantagem: Fluidez de aplicativo nativo no navegador.

2. SPA vs MPA: Qual a diferença? ⚖️

Característica 🏛️ MPA (Tradicional) ⚡ SPA (Moderno)
Carregamento Páginas inteiras a cada clique Carrega uma vez, troca componentes
Processamento Focado no Servidor Focado no Navegador (Cliente)
Experiência Mais lenta, recarregamentos Fluida, transições suaves
SEO Nativo e fácil Exige configurações (SSR/SSG)

Fluxo de Comunicação (Mermaid)

graph LR
    subgraph "Modelo MPA"
        C1[Browser] -- "Solicita Pagina_A.html" --> S1[Servidor]
        S1 -- "Envia HTML Completo" --> C1
    end

    subgraph "Modelo SPA"
        C2[Browser] -- "Solicita dados (JSON)" --> S2[API]
        S2 -- "Envia apenas Dados" --> C2
        C2 -- "JavaScript renderiza UI" --> C2
    end

3. O Conceito de Reatividade 🧠

A reatividade é o "superpoder" dos frameworks modernos. Ela garante que, quando os dados mudam, a interface (UI) atualize automaticamente.

Conceito Chave

Em sistemas tradicionais, você precisava buscar o elemento no DOM e alterar seu texto manualmente. Em frameworks reativos como o Svelte, você apenas altera o valor da variável e o framework cuida do resto.

4. Frameworks Modernos: Onde o Svelte se encaixa? 🧩

Existem três grandes players no mercado (React, Vue, Angular), mas o Svelte trouxe uma abordagem revolucionária:

  • React/Vue: Usam o Virtual DOM (uma cópia da página na memória) para comparar mudanças no navegador.
  • Svelte: É um compilador. Ele transforma seu código em JavaScript puro e eficiente durante o build, eliminando a necessidade de uma "biblioteca" pesada rodando junto com o seu site.

5. Verificando o Ambiente 💻

Antes de começarmos, precisamos garantir que seu computador está pronto para o Svelte.

<div id="termynal" data-termynal>
    <span data-ty="input">node --version</span>
    <span data-ty="progress"></span>
    <span data-ty>v20.10.0</span>
    <span data-ty="input">npm --version</span>
    <span data-ty>10.2.3</span>
</div>

Atenção

Certifique-se de ter o Node.js instalado (versão 18 ou superior). Se não tiver, acesse o guia de Configuração de Ambiente.

6. Mini-Projeto: Seu Primeiro "App" Estático 🚀

Para sentir a diferença, vamos apenas visualizar a estrutura básica que o Vite (nossa ferramenta de build) cria para o Svelte.

  1. Abra seu terminal.
  2. Tente rodar o comando abaixo (não precisa criar agora, apenas observe):
$ npx create-vite meu-projeto --template svelte
$ cd meu-projeto
$ npm install
$ npm run dev

Dica

O Svelte é conhecido por ter "menos código". Você verá que um componente Svelte parece muito com uma página HTML normal, o que facilita muito o aprendizado.

7. Exercício de Fixação 📝

Responda para validar seu conhecimento:

  1. O que define uma Single Page Application (SPA)?
  2. Explique com suas palavras o que é reatividade no frontend.
  3. Qual o principal diferencial do Svelte em relação ao React e Vue (Dica: compile-time vs run-time)?

Próxima Aula: Vamos mergulhar no Svelte e entender como a compilação funciona! 🏗️

Aula 02 - Introdução ao Svelte 🏗️

Objetivo

Objetivo: Compreender o que torna o Svelte único, entender o processo de compilação e criar o seu primeiro projeto utilizando o Vite.

1. O que é o Svelte? 🧩

O Svelte é um framework para a criação de interfaces de usuário, mas com uma diferença fundamental: ele não carrega o peso de uma biblioteca no navegador.

Tradicionalmente, frameworks como React e Vue fazem a maior parte de seu trabalho no navegador do usuário (tempo de execução). O Svelte move esse trabalho para uma fase de compilação que acontece quando você constrói seu aplicativo.

🌟 Principais Vantagens:

  • Performance Absurda: O código resultante é JavaScript puro e altamente otimizado.
  • Menos Código: Você escreve muito menos para fazer a mesma coisa.
  • Sem Virtual DOM: Menos overhead de memória no navegador.

2. Como funciona a Compilação? ⚙️

Enquanto outros frameworks comparam o DOM "virtual" com o real para saber o que mudar, o Svelte gera código que sabe exatamente qual parte do DOM atualizar quando uma variável muda.

Fluxo de Trabalho (Mermaid)

graph TD
    subgraph "Frameworks Tradicionais (React/Vue)"
        A[Código JS] --> B[Biblioteca em Runtime]
        B --> C[Virtual DOM]
        C --> D[Patch no DOM Real]
    end

    subgraph "Svelte (O Compilador)"
        E[Código .svelte] --> F{Svelte Compiler}
        F -- "Build Time" --> G[JS Puro e Direto]
        G -- "Runtime" --> H[Update DOM Real]
    end

3. Virtual DOM vs Svelte 🥊

O Virtual DOM foi uma inovação incrível, mas ele consome recursos. O Svelte provou que podemos ser reativos sem precisar dele.

Característica Frameworks com VDOM Svelte
Peso do Bundle Maior (Apps precisam da biblioteca) Mínimo (Apenas seu código)
Mudanças Compara árvores de objetos Atualiza o nó específico via código gerado
Aprendizado Exige entender JSX ou Hooks complexos Quase HTML/JS puro

4. Criando seu Primeiro Projeto 🚀

Vamos usar o Vite, que é o "motor" mais moderno e rápido para desenvolvimento frontend.

<div id="termynal" data-termynal>
    <span data-ty="input">npm create vite@latest meu-primeiro-app -- --template svelte</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Done. Now run:</span>
    <span data-ty="input">cd meu-primeiro-app</span>
    <span data-ty="input">npm install</span>
    <span data-ty="input">npm run dev</span>
</div>

Nota

O comando acima cria uma estrutura base pronta para você começar a codar imediatamente.

5. Estrutura de Arquivos Base 📂

Após criar o projeto, você verá uma estrutura parecida com esta:

  • src/main.js: Ponto de entrada da aplicação.
  • src/App.svelte: O componente principal (onde a mágica acontece).
  • public/: Arquivos estáticos (imagens, ícones).
  • index.html: O arquivo HTML que carrega seu app.

6. Mini-Projeto: Ola Mundo com Estilo 🎨

Sua missão nesta aula é: 1. Criar seu projeto com o comando visto acima. 2. Abrir o arquivo App.svelte. 3. Alterar o texto dentro da tag <h1> para "Olá, Svelte!". 4. Rodar o projeto e ver a mudança no navegador.

Dica Visual

O VS Code com a extensão oficial do Svelte é obrigatório para ter coloração de código e sugestões inteligentes!

7. Exercício de Fixação 📝

  1. Por que dizemos que o Svelte é um compilador e não apenas uma biblioteca?
  2. Descreva uma desvantagem do uso do Virtual DOM.
  3. O que é o Vite e qual sua função no desenvolvimento com Svelte?

Próxima Aula: Vamos explorar a Sintaxe Básica e a Estrutura de um Componente! 📜

Aula 03 - Estrutura de Projeto e Sintaxe Básica 📜

Objetivo

Objetivo: Entender a anatomia de um componente Svelte, aprender como organizar seu código unindo lógica, estrutura e estilo em um só lugar, e dominar a exibição de dados dinâmicos.

1. Anatomia de um Componente Svelte 🧬

Diferente de outros frameworks onde você mistura HTML e JavaScript de forma complexa, um arquivo .svelte é extremamente organizado e intuitivo. Ele se divide em três partes principais:

1.1 O Script (<script>)

Onde fica toda a lógica JavaScript do seu componente (variáveis, funções, imports).

1.2 O Markup (HTML)

O corpo do seu componente. É HTML puro, com alguns "superpoderes" do Svelte.

1.3 O Style (<style>)

Onde você coloca o CSS. Importante: Por padrão, o CSS no Svelte é escopado, o que significa que ele só afeta o componente atual.

2. Visualizando a Estrutura (Mermaid) 📊

graph TD
    A[Arquivo .svelte] --> B["script (Lógica)"]
    A --> C["Markup (Estrutura HTML)"]
    A --> D["style (Aparência)"]

    subgraph "Exemplo Prático"
        B1["let nome = 'Mundo';"]
        C1["h1 Olá {nome} /h1"]
        D1["h1 { color: orange; }"]
    end

    B --- B1
    C --- C1
    D --- D1

3. Interpolação de Variáveis {} ✏️

Para exibir um valor do seu JavaScript no HTML, usamos as chaves {}. Isso é chamado de interpolação.

<script>
  let framework = "Svelte";
  let versao = 5;
</script>

<h1>Aprendendo {framework} na versão {versao}!</h1>

Conceito

Tudo o que estiver dentro das chaves é tratado como JavaScript puro. Você pode até fazer cálculos: {2 + 2} resultará em 4 na tela.

4. O Cinto de Utilidades: Estrutura do Projeto 📂

Ao abrir seu projeto no VS Code, você verá muitos arquivos. Vamos focar no essencial:

$ ls -F
node_modules/
public/
src/
  ├── assets/
  ├── lib/
  ├── App.svelte
  └── main.js
index.html
package.json
vite.config.js
  • src/App.svelte: É o coração da sua aplicação no início.
  • vite.config.js: Configurações da ferramenta que compila seu código.

5. Atributos Dinâmicos 🔗

Você também pode usar as chaves para definir atributos HTML, como o src de uma imagem ou o href de um link.

<script>
  let imagemSrc = "logo.png";
  let altText = "Logo do Svelte";
</script>

<img src={imagemSrc} alt={altText} />

6. Mini-Projeto: Perfil de Usuário Dinâmico 🚀

Sua missão agora: 1. No seu projeto, limpe o conteúdo de App.svelte. 2. No <script>, crie variáveis para nome, idade e urlFoto. 3. No markup, crie um card simples que exiba essas informações usando as chaves {}. 4. No <style>, adicione uma cor de fundo ao card.

Dica de Ouro

Se o nome da variável for o mesmo do atributo, você pode usar o atalho: <img {src} /> em vez de <img src={src} />.

7. Exercício de Fixação 📝

  1. Quais são as três seções principais de um arquivo .svelte?
  2. O que acontece com o CSS definido dentro de um componente Svelte?
  3. Como exibimos o resultado da soma de duas variáveis no HTML do Svelte?

Próxima Aula: Vamos aprender sobre o coração do Svelte: a Reatividade! ⚡

Aula 04 - Reatividade no Svelte ⚡

Objetivo

Objetivo: Dominar o conceito de reatividade, aprender a usar a sintaxe $: para criar variáveis dependentes e entender como o Svelte atualiza a interface de forma cirúrgica.

1. O que é Reatividade? 🔄

Reatividade é a capacidade de um sistema responder a mudanças de dados. No Svelte, a reatividade é baseada em atribuições.

Quando você faz count = count + 1, o Svelte sabe que a variável count mudou e agenda uma atualização para todos os lugares onde ela é usada no HTML.

2. Declarações Reativas ($:) 🧠

Às vezes, queremos que uma variável seja recalculada automaticamente sempre que outra variável mudar. Para isso, usamos o prefixo $:.

<script>
  let count = 0;

  // Esta variável SEMPRE será o dobro de count
  $: dobrado = count * 2;
</script>

<button on:click={() => count++}>Clique: {count}</button>
<p>O dobro é {dobrado}</p>

Conceito

O símbolo $: pode ser lido como "sempre que as variáveis usadas aqui mudarem, execute isto de novo".

3. Blocos Reativos 🧱

Você não está limitado a apenas variáveis. Você pode usar $: para executar blocos inteiros de código ou condicionais reativas.

<script>
  let count = 0;

  $: {
    console.log("O contador mudou para:", count);
    if (count >= 10) {
      alert("Você clicou muito!");
      count = 0;
    }
  }
</script>

4. O Fluxo de Reatividade (Mermaid) 📊

graph TD
    A[Ação do Usuário/Evento] --> B[Alteração de Variável]
    B --> C{Compilador Svelte}
    C -- "Detecta dependências ($:)" --> D[Atualiza Variáveis Derivadas]
    D --> E[Sincroniza com o DOM Real]
    E --> F[Interface Atualizada]

5. Dica Pro: Debugging Reativo 💻

Uma forma muito comum e rápida de debugar no Svelte é usar o $: com o console.log.

<div id="termynal" data-termynal>
    <span data-ty="input">$: console.log(minhaVariavel)</span>
    <span data-ty="progress"></span>
    <span data-ty>O contador mudou para: 1</span>
    <span data-ty>O contador mudou para: 2</span>
</div>

6. Mini-Projeto: Calculadora de Área de Retângulo 🚀

Vamos aplicar a reatividade em um exemplo prático: 1. No seu App.svelte, crie duas variáveis: largura e altura (inicie com 10). 2. Crie uma declaração reativa para area que multiplique as duas. 3. No markup, crie dois campos de input vinculados a essas variáveis (usaremos bind:value, que veremos mais a fundo na Aula 07, mas tente usar agora!). 4. Exiba a área na tela. Ela deve mudar instantaneamente enquanto você digita.

Curiosidade

O $: é na verdade uma sintaxe válida do JavaScript chamada "Labeled Statement". O Svelte apenas deu um novo significado a ela para facilitar sua vida!

7. Exercício de Fixação 📝

  1. O que dispara uma atualização reativa no Svelte?
  2. Para que serve o prefixo $:?
  3. Como você criaria um alerta que só aparece quando uma variável nome estiver vazia, usando reatividade?

Próxima Aula: Vamos aprender a organizar nosso código com a Componentização! 🧩

Aula 05 - Componentização 🧩

Objetivo

Objetivo: Entender o conceito de componentes, aprender a quebrar sua interface em partes menores e reutilizáveis, e descobrir como passar dados entre elas usando Props.

1. O que são Componentes? 🏗️

Componentes são blocos de construção independentes de uma aplicação. Em vez de criar um arquivo HTML gigante, dividimos o site em partes como Navbar, Sidebar, CardProduto e Footer.

Por que usar componentes?

  • Reutilização: Crie um botão uma vez e use em todo o site.
  • Organização: Mais fácil de encontrar e consertar bugs em arquivos pequenos.
  • Manutenção: Alterar o estilo de um componente reflete em todas as suas instâncias.

2. Hierarquia de Componentes (Mermaid) 📊

graph TD
    App[App.svelte] --> Nav[Navbar.svelte]
    App --> Hero[HeroSection.svelte]
    App --> List[ProductList.svelte]
    List --> Item1[ProductCard.svelte]
    List --> Item2[ProductCard.svelte]
    List --> Item3[ProductCard.svelte]
    App --> Foot[Footer.svelte]

3. Criando e Importando Componentes 📥

Para usar um componente dentro de outro, precisamos importá-lo na seção <script>.

<script>
  import Header from './Header.svelte';
  import Button from './lib/Button.svelte';
</script>

<Header />
<main>
  <p>Conteúdo principal aqui.</p>
  <Button />
</main>

$ mkdir src/lib
$ touch src/lib/Card.svelte
$ # Agora seu componente está pronto para ser editado!

4. Passando Dados via Props (Props) 🎁

As Props (propriedades) permitem que o componente pai envie informações para o componente filho. No Svelte, declaramos uma prop usando a palavra-chave export.

No filho (Card.svelte):

<script>
  export let titulo = "Título Padrão";
  export let preco;
</script>

<div class="card">
  <h2>{titulo}</h2>
  <p>Preço: R$ {preco}</p>
</div>

No pai (App.svelte):

<Card titulo="Sapatilha" preco={50} />
<Card titulo="Tênis" preco={150} />

Conceito

O export let torna a variável "pública", permitindo que quem usa o componente defina seu valor.

5. Slots: Injetando Conteúdo 📥

Às vezes queremos que o componente seja um "container" para outros elementos. Usamos a tag <slot /> para isso.

<!-- Box.svelte -->
<div class="box">
  <slot></slot> <!-- O conteúdo do pai aparecerá aqui -->
</div>

6. Mini-Projeto: Galeria de Cards 🚀

Vamos colocar em prática: 1. Crie um novo arquivo chamado Card.svelte na pasta lib. 2. Defina props para nome, imagem e descricao. 3. No seu App.svelte, importe este componente. 4. Renderize três instâncias do Card com informações de linguagens de programação diferentes.

Dica

Use nomes de arquivos com a primeira letra maiúscula (PascalCase) para componentes, ex: MeuComponente.svelte. Isso é uma convenção forte no mundo Svelte!

7. Exercício de Fixação 📝

  1. Qual o comando no Svelte para transformar uma variável em uma Prop?
  2. Como você importa um componente chamado Footer.svelte que está na mesma pasta?
  3. Para que serve a tag <slot />?

Próxima Aula: Vamos aprender a lidar com listas e condições usando Loops e Condicionais! 🔁

Aula 06 - Loops e Condicionais 🔁

Objetivo

Objetivo: Aprender a controlar o que aparece na tela usando lógica condicional e como exibir listas de dados de forma dinâmica e eficiente.

1. Renderização Condicional {#if} ❓

No Svelte, não usamos if dentro de tags de script para esconder elementos. Usamos blocos lógicos diretamente no HTML. Eles sempre começam com # e terminam com /.

<script>
  let logado = false;
</script>

{#if logado}
  <h1>Bem-vindo de volta!</h1>
  <button on:click={() => logado = false}>Sair</button>
{:else}
  <h1>Por favor, faça login.</h1>
  <button on:click={() => logado = true}>Entrar</button>
{/if}

2. Lógica de Decisão (Mermaid) 📊

graph TD
    A[Início do Bloco #if] --> B{Condição é verdadeira?}
    B -- Sim --> C[Renderiza conteúdo do IF]
    B -- Não --> D[Renderiza conteúdo do ELSE]
    C --> E[Fim do Bloco /if]
    D --> E

3. Iterando Listas com {#each} 📄

Para exibir uma lista de itens (como produtos ou tarefas), usamos o bloco {#each}.

<script>
  let frutas = ["Maçã", "Banana", "Morango", "Uva"];
</script>

<ul>
  {#each frutas as fruta}
    <li>{fruta}</li>
  {/each}
</ul>

Nota

Você também pode pegar o índice do item na lista: {#each frutas as fruta, i}. O i será 0, 1, 2...

4. O Fluxo de uma Lista Dinâmica 💻

<div id="termynal" data-termynal>
    <span data-ty="input">let tarefas = ['Estudar', 'Cozinhar']</span>
    <span data-ty="input">tarefas = [...tarefas, 'Dormir']</span>
    <span data-ty="progress"></span>
    <span data-ty># Svelte atualiza o DOM instantaneamente!</span>
</div>

5. Chaves nos Loops (Keyed each) 🔑

Sempre que a sua lista mudar (itens removidos ou reordenados), o Svelte precisa de uma forma de identificar cada item de forma única para manter a performance. Usamos um parêntese para passar a chave.

{#each produtos as produto (produto.id)}
  <Card {produto} />
{/each}

Dica de Performance

Sempre use uma chave única (como um ID do banco de dados) em vez do índice i se a sua lista puder ser alterada.

6. Mini-Projeto: Lista de Compras Inteligente 🚀

Sua missão: 1. Crie uma variável itensCompra que seja um array de objetos (ex: {id: 1, nome: 'Café', comprado: false}). 2. Use um {#each} para listar esses itens. 3. Use um {#if} dentro do loop para mostrar um emoji de "✅" se o item estiver comprado ou "❌" se não estiver. 4. Adicione um botão "Alternar" que mude o estado de comprado do item.

7. Exercício de Fixação 📝

  1. Como se fecha um bloco {#if} no Svelte?
  2. Qual a sintaxe para percorrer uma lista de usuarios e mostrar o nome de cada um?
  3. Para que serve a "chave" em um bloco {#each}?

Próxima Aula: Vamos aprender a interagir com o usuário através de Eventos e Formulários! ⌨️

Aula 07 - Eventos e Formulários ⌨️

Objetivo

Objetivo: Aprender a capturar interações do usuário, manipular eventos do DOM e dominar o Two-way Binding para criar formulários reativos e inteligentes.

1. Escutando Eventos com on: 👂

No Svelte, para escutar qualquer evento do DOM (como clique, movimento do mouse ou digitação), usamos a diretiva on:.

<script>
  let contador = 0;
  function incrementar() {
    contador += 1;
  }
</script>

<!-- Chamando uma função -->
<button on:click={incrementar}>
  Cliques: {contador}
</button>

<!-- Código inline -->
<button on:mouseenter={() => console.log('Mouse entrou!')}>
  Passe o mouse
</button>

2. Modificadores de Evento 🛠️

O Svelte facilita a vida permitindo adicionar modificadores aos eventos usando o caractere |.

  • on:click|once: O evento só dispara uma vez.
  • on:submit|preventDefault: Impede que a página recarregue ao enviar um formulário.
  • on:click|stopPropagation: Evita que o evento suba para os elementos pais.

3. Two-way Binding (bind:value) 🔄

Normalmente, a informação flui do JavaScript para o HTML. Com o bind:, fazemos a informação fluir nos dois sentidos. Se o usuário digita no input, a variável muda. Se a variável mudar no código, o input atualiza.

Fluxo de Dados (Mermaid)

graph LR
    subgraph "One-way (Padrão)"
        JS1[Variável JS] -- "Atualiza" --> UI1[Interface]
    end

    subgraph "Two-way (bind:value)"
        JS2[Variável JS] <--> UI2[Interface / Input]
    end
<script>
  let nome = "";
</script>

<input type="text" bind:value={nome} placeholder="Digite seu nome" />
<p>Seu nome é: {nome}</p>

4. Trabalhando com Grupos (Checkboxes e Radios) 🔘

O Svelte torna o trabalho com múltiplos inputs muito simples:

<script>
  let sabores = []; // Array para múltiplos checkboxes
  let tamanho = "M"; // String para rádio único
</script>

<label>
  <input type="radio" bind:group={tamanho} value="P" /> Pequeno
</label>
<label>
  <input type="radio" bind:group={tamanho} value="M" /> Médio
</label>

<p>Tamanho selecionado: {tamanho}</p>

5. Simulação de Formulário em Tempo Real 💻

<div id="termynal" data-termynal>
    <span data-ty="input">bind:value={email}</span>
    <span data-ty="progress"></span>
    <span data-ty># Digitando: r... i... c...</span>
    <span data-ty>email = 'ricardo@'</span>
    <span data-ty># Svelte valida instantaneamente!</span>
</div>

6. Mini-Projeto: Cadastro de Perfil 🚀

Sua missão hoje: 1. Crie um formulário com campos para nome, email e biografia (textarea). 2. Adicione um seletor (select) para o cargo (ex: Estudante, Professor, Desenvolvedor). 3. Use o bind:value em todos os campos. 4. Exiba abaixo do formulário um "Preview" do perfil que atualiza enquanto o usuário digita. 5. Adicione um botão de "Salvar" que limpe as variáveis ao ser clicado.

Atenção

Sempre use bind:value com cuidado em campos muito grandes para evitar problemas de performance, embora o Svelte lide muito bem com isso na maioria dos casos.

7. Exercício de Fixação 📝

  1. Como você impediria um formulário de recarregar a página ao ser enviado?
  2. Qual a diferença entre usar {valor} e bind:value={valor} em um input?
  3. Como capturamos vários valores selecionados em um grupo de checkboxes?

Próxima Aula: Vamos deixar tudo bonito com Estilização e Escopo de CSS! 🎨

Aula 08 - Estilização e Escopo de CSS 🎨

Objetivo

Objetivo: Entender como o Svelte isola estilos automaticamente, aprender a criar estilos globais quando necessário e dominar o uso de classes CSS dinâmicas.

1. CSS Escopado (Local) 🛡️

A característica mais amada do Svelte em relação ao estilo é o Escopo de CSS. Por padrão, qualquer estilo escrito dentro da tag <style> de um componente só afeta aquele componente.

Como funciona?

O Svelte adiciona uma classe única (ex: svelte-xyz123) a todos os elementos do seu componente e aos seus seletores CSS durante a compilação.

<style>
  p {
    color: blue; /* Só afetará parágrafos DESTE arquivo */
  }
</style>

<p>Eu sou azul!</p>

2. Visualizando o Escopo (Mermaid) 📊

graph TD
    A[Código Svelte] --> B{Compilador}
    B -- "HTML" --> C["p class='svelte-abc123'"]
    B -- "CSS" --> D["p.svelte-abc123 { color: blue }"]
    subgraph "Navegador"
        C
        D
    end

3. O Escopo Local na Prática 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># O Svelte transforma seu CSS</span>
    <span data-ty="progress"></span>
    <span data-ty>.btn { color: red }</span>
    <span data-ty># vira:</span>
    <span data-ty>.btn.svelte-hash { color: red }</span>
</div>

4. Estilos Globais 🌍

Às vezes, você quer que um estilo afete elementos fora do componente ou seletores de bibliotecas externas. Para isso, usamos o modificador :global().

<style>
  /* Afeta todos os <h1> da aplicação */
  :global(h1) {
    font-family: 'Arial';
  }

  /* Afeta um .card mesmo se estiver dentro de um componente filho */
  .container :global(.card) {
    border: 1px solid silver;
  }
</style>

5. Classes Condicionais 💡

O Svelte oferece um atalho sensacional para adicionar ou remover classes baseadas em uma condição: a diretiva class:nome.

<script>
  let ativo = true;
</script>

<style>
  .destaque {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<!-- Se 'ativo' for true, a classe 'destaque' é aplicada -->
<button 
  class:destaque={ativo} 
  on:click={() => ativo = !ativo}
>
  Alternar Destaque
</button>

6. Mini-Projeto: Toggle de Tema 🚀

Vamos criar um pequeno sistema de temas: 1. No seu componente, crie uma variável modoNoturno (booleano). 2. No <style>, defina uma classe .dark com fundo preto e texto branco. 3. No markup, use class:dark={modoNoturno} em uma div que envolva todo o conteúdo. 4. Crie um botão que inverta o valor de modoNoturno. 5. Adicione uma transição suave de cor usando CSS padrão.

Dica de Ouro

As variáveis CSS (--minha-cor) funcionam perfeitamente no Svelte e são ótimas para passar valores do JavaScript para o CSS de forma reativa!

7. Exercício de Fixação 📝

  1. Por que é seguro usar seletores simples como p ou h1 no Svelte?
  2. Como você aplicaria um estilo a um elemento que não pertence ao componente atual?
  3. Qual a vantagem da diretiva class:nome em relação à interpolação manual de classes?

Próxima Aula: Entrando no Módulo 3! Vamos aprender sobre o Roteamento SPA na Prática! 🗺️

Aula 09 - Roteamento SPA na Prática 🗺️

Objetivo

Objetivo: Compreender como funciona a navegação em uma Single Page Application, configurar rotas dinâmicas e aprender a transicionar entre páginas sem recarregar o navegador.

1. O que é Roteamento SPA? 🧭

Em um site tradicional, cada link leva a um novo arquivo HTML. Em uma SPA (Single Page Application), existe apenas um index.html. O roteador é o responsável por decidir qual componente mostrar baseado na URL que está no navegador.

Vantagens:

  • Velocidade: A transição é instantânea pois o HTML base já está carregado.
  • Estado Preservado: Você pode manter dados (como um player de música) tocando enquanto navega.

2. Fluxo de Navegação SPA (Mermaid) 📊

graph TD
    A[Usuário clica em Link] --> B[Roteador intercepta o clique]
    B --> C[URL muda no navegador]
    C --> D{Existe rota definida?}
    D -- Sim --> E[Destrói componente antigo]
    E --> F[Renderiza componente novo]
    D -- Não --> G[Mostra Página 404]

3. Instalando um Roteador 💻

No Svelte puro, uma das opções mais simples e robustas para SPAs é o svelte-spa-router.

<div id="termynal" data-termynal>
    <span data-ty="input">npm install svelte-spa-router</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Pacote instalado com sucesso!</span>
</div>

4. Configurando as Rotas 🛠️

Para configurar, criamos um mapa que liga "Caminhos" a "Componentes".

<script>
  import Router from 'svelte-spa-router';
  import Home from './routes/Home.svelte';
  import Sobre from './routes/Sobre.svelte';
  import NotFound from './routes/NotFound.svelte';

  const routes = {
    '/': Home,
    '/sobre': Sobre,
    '*': NotFound // Rota curinga para 404
  };
</script>

<Router {routes} />

Para navegar, usamos links comuns, mas com uma diretiva especial para garantir que o roteador trate o clique sem recarregar a página.

<script>
  import { link } from 'svelte-spa-router';
</script>

<nav>
  <a href="/" use:link>Início</a>
  <a href="/sobre" use:link>Sobre</a>
</nav>

Conceito

A diretiva use:link evita o comportamento padrão do navegador de recarregar a página completa.

6. Mini-Projeto: Mini Blog SPA 🚀

Sua missão: 1. Instale o svelte-spa-router. 2. Crie uma pasta src/routes. 3. Crie os componentes Home.svelte e Sobre.svelte dentro dessa pasta. 4. No App.svelte, configure o roteador e crie um menu de navegação simples. 5. Adicione um componente NotFound.svelte para lidar com caminhos inexistentes.

Dica

Você pode passar parâmetros na URL como /perfil/:id. O roteador entregará o id para o componente automaticamente!

7. Exercício de Fixação 📝

  1. Por que a página não "pisca" branco ao navegar em uma SPA?
  2. Qual a função da rota * no objeto de configuração?
  3. Como o roteador sabe qual componente exibir se só existe um arquivo index.html?

Próxima Aula: Vamos aprender a compartilhar dados entre componentes distantes com Stores e Estado! 📦

Aula 10 - Stores e Gerenciamento de Estado 📦

Objetivo

Objetivo: Aprender a compartilhar dados entre componentes distantes sem "perfurar" a hierarquia com Props, dominando o uso das Svelte Stores para gerenciar o estado global da aplicação.

1. O Problema: Prop Drilling 🪚

Quando um dado precisa sair do topo da aplicação e chegar a um componente muito profundo, temos que passar esse dado por todos os componentes intermediários. Isso se chama Prop Drilling e torna o código difícil de manter.

A Solução: Stores

Uma Store é um objeto que guarda um valor e permite que qualquer componente da aplicação se "inscreva" para receber atualizações quando esse valor mudar.

2. Writable Stores: O Coração do Estado 💓

A writable store permite que você leia e escreva dados.

// store.js
import { writable } from 'svelte/store';

export const contador = writable(0);

Como manipular:

  • .set(val): Define um novo valor.
  • .update(n => n + 1): Atualiza baseado no valor atual.
  • .subscribe(val => ...): Escuta as mudanças.

3. Fluxo de Dados com Store (Mermaid) 📊

graph LR
    S[Store Global] --> C1[Componente A]
    S --> C2[Componente B]
    S --> C3[Componente C]

    C2 -- "Atualiza Dado" --> S
    S -- "Notifica todos" --> C1
    S -- "Notifica todos" --> C3

4. O Atalho Mágico: O Cifrão $ ✨

Abrir e fechar inscrições manualmente com .subscribe dá trabalho e pode causar vazamento de memória. O Svelte tem um atalho: basta colocar um $ na frente do nome da store no HTML ou script.

<script>
  import { contador } from './store.js';
</script>

<h1>O valor atual é: {$contador}</h1>
<button on:click={() => $contador++}>Incrementar</button>

Conceito

O $ faz o Auto-subscription: ele se inscreve quando o componente aparece e se desinscreve automaticamente quando o componente é destruído.

5. Criando e Usando uma Store 💻

<div id="termynal" data-termynal>
    <span data-ty="input">import { writable } from 'svelte/store';</span>
    <span data-ty="input">export const user = writable({name: 'Visitante'});</span>
    <span data-ty="progress"></span>
    <span data-ty># No componente:</span>
    <span data-ty>$user = {name: 'Ricardo'};</span>
</div>

6. Mini-Projeto: Carrinho de Compras Global 🚀

Sua missão: 1. Crie um arquivo cartStore.js e exporte uma writable store chamada carrinho (iniciando como um array vazio). 2. No componente Produto.svelte, adicione um botão que dê um update na store adicionando um novo item. 3. No componente Navbar.svelte, exiba o total de itens no carrinho usando {$carrinho.length}. 4. Certifique-se de que, ao adicionar um produto, o número na Navbar atualize instantaneamente!

Dica

Você também pode criar Derived Stores (Lojas Derivadas) que dependem de outras stores. Ex: uma store totalPreco que calcula a soma de tudo que está no carrinho.

7. Exercício de Fixação 📝

  1. O que é Prop Drilling e como as Stores resolvem isso?
  2. Diferencie os métodos .set() e .update() de uma writable store.
  3. Qual a importância de usar o prefixo $ ao acessar uma store em um componente?

Próxima Aula: Vamos conectar nosso app ao mundo real com o Consumo de API REST! 🌐

Aula 11 - Consumo de API REST 🌐

Objetivo

Objetivo: Aprender a conectar sua aplicação Svelte ao mundo externo, realizando requisições HTTP para APIs reais, tratando estados de carregamento e erros de forma elegante com o bloco {#await}.

1. O que é uma API REST? 📡

Uma API (Application Programming Interface) permite que seu frontend "converse" com um servidor para buscar ou salvar dados. Usamos o protocolo HTTP e o formato JSON para essa conversa.

2. Fazendo requisições com fetch 🎣

O JavaScript moderno possui a função fetch nativa para fazer requisições. No Svelte, geralmente fazemos isso dentro de uma função async.

async function buscarDados() {
  const resposta = await fetch('https://api.exemplo.com/dados');
  if (resposta.ok) {
    return await resposta.json();
  } else {
    throw new Error('Falha ao carregar dados');
  }
}

3. Fluxo de Requisição Assíncrona (Mermaid) 📊

sequenceDiagram
    participant B as Browser (Svelte)
    participant A as API Externa
    B->>B: Inicia Estado 'Carregando'
    B->>A: GET /produtos
    A-->>B: Retorna JSON (Produtos)
    B->>B: Inicia Estado 'Sucesso'
    B->>B: Renderiza Lista na UI

4. O Superpoder do Svelte: {#await} ⏳

Diferente de outros frameworks onde você precisa criar várias variáveis de estado (loading, error, data), o Svelte tem um bloco nativo que resolve tudo isso de uma vez.

<script>
  let promessa = buscarDados();
</script>

{#await promessa}
  <p>⏳ Carregando dados...</p>
{:then dados}
  <ul>
    {#each dados as item}
      <li>{item.nome}</li>
    {/each}
  </ul>
{:catch erro}
  <p style="color: red">❌ Erro: {erro.message}</p>
{/await}

5. Simulação de Chamada de API 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Iniciando requisição para API...</span>
    <span data-ty="progress"></span>
    <span data-ty>GET https://api.api-ninjas.com/v1/quotes</span>
    <span data-ty>Status: 200 OK</span>
    <span data-ty># Dados recebidos! Atualizando a tela...</span>
</div>

6. Mini-Projeto: Gerador de Citações Aleatórias 🚀

Vamos colocar em prática: 1. Escolha uma API pública simples (ex: https://api.quotable.io/random ou https://dog.ceo/api/breeds/image/random). 2. No seu componente, crie uma função async que busque um dado dessa API. 3. Use o bloco {#await} para mostrar uma mensagem de carregamento e o resultado final. 4. Adicione um botão "Próxima" que chame a função novamente para atualizar o dado.

Dica

Ao clicar no botão "Próxima", basta fazer: promessa = buscarDados();. O Svelte detectará que a promessa mudou e voltará para o estado de carregamento automaticamente!

7. Exercício de Fixação 📝

  1. Para que serve a palavra-chave await no JavaScript?
  2. Quais são os três estados possíveis dentro de um bloco {#await}?
  3. Como o Svelte decide quando mostrar o bloco {:then}?

Próxima Aula: Vamos construir uma aplicação completa com CRUD Completo e Integração! 🏗️

Aula 12 - CRUD Completo com API 🏗️

Objetivo

Objetivo: Consolidar os conhecimentos de componentes, eventos, binding e APIs para construir uma aplicação funcional completa (CRUD), lidando com a persistência de dados em um servidor.

1. O que é um CRUD? 📝

CRUD é um acrônimo para as quatro operações básicas de gerenciamento de dados: * Create (Criar) -> POST * Read (Ler/Listar) -> GET * Update (Atualizar) -> PUT / PATCH * Delete (Apagar) -> DELETE

2. Ciclo de Vida do CRUD em uma SPA (Mermaid) 📊

graph TD
    A[Lista de Itens] -->|Clique em Novo| B[Formulário de Criação]
    B -->|Submit POST| C{Servidor}
    C -->|Sucesso| A
    A -->|Clique em Editar| D[Formulário de Edição]
    D -->|Submit PUT| C
    A -->|Clique em Excluir| E[Confirmação]
    E -->|Submit DELETE| C

3. Listagem e Exclusão 🗑️

Para listar, usamos o {#each}. Para excluir, chamamos uma função que faz o DELETE e atualiza a lista local.

async function excluir(id) {
  const res = await fetch(`https://api.com/itens/${id}`, { method: 'DELETE' });
  if (res.ok) {
    // Remove da lista local para atualizar a tela instantaneamente
    itens = itens.filter(i => i.id !== id);
  }
}

4. Criação e Envio de JSON 📤

Ao criar um item, precisamos enviar o body da requisição como uma string JSON e definir o cabeçalho correto.

async function salvar() {
  await fetch('https://api.com/itens', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ nome: novoNome })
  });
  // Recarregar a lista ou adicionar o item retornado
}

5. Simulação de Operação CRUD 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Enviando novo registro...</span>
    <span data-ty="progress"></span>
    <span data-ty>POST /tasks { "title": "Aprender Svelte" }</span>
    <span data-ty>Status: 201 Created</span>
    <span data-ty># Item adicionado com sucesso!</span>
</div>

6. Mini-Projeto: Gerenciador de Contatos 🚀

Vamos construir um sistema de contatos completo: 1. Listagem: Busque uma lista de contatos de uma API de testes (ex: JSONPlaceholder). 2. Criação: Adicione um formulário no topo para inserir o nome e telefone. 3. Remoção: Cada contato na lista deve ter um botão "Excluir". 4. Feedback: Mostre um aviso de "Salvando..." enquanto a API processa o pedido.

Dica de UX

Após uma operação de sucesso (como deletar), você pode simplesmente filtrar o array local em vez de fazer uma nova requisição GET. Isso deixa a aplicação muito mais rápida para o usuário!

7. Exercício de Fixação 📝

  1. Quais os métodos HTTP correspondentes a cada letra do acrônimo CRUD?
  2. Por que precisamos do header Content-Type: application/json ao enviar dados?
  3. Como você atualizaria um item da lista local após receber a confirmação de sucesso do servidor?

Próxima Aula: Vamos entender como otimizar a performance com o Ciclo de Vida e Performance! 🚀

Aula 13 - Ciclo de Vida e Performance ⏳

Objetivo

Objetivo: Entender os momentos em que um componente "nasce", "vive" e "morre" no navegador, e como usar as funções de ciclo de vida para gerenciar recursos e otimizar a performance da aplicação.

1. O que é o Ciclo de Vida? 🧬

Todo componente no Svelte passa por fases. Conhecer essas fases permite que você execute código no momento exato (ex: buscar dados assim que o usuário entra na página).

As principais funções:

  1. onMount: Executa logo após o componente ser renderizado pela primeira vez no DOM.
  2. onDestroy: Executa logo antes do componente ser destruído (removido da tela).
  3. beforeUpdate: Executa momentos antes do DOM ser atualizado.
  4. afterUpdate: Executa logo após o DOM ser sincronizado com os dados.

2. Fases do Componente (Mermaid) 📊

graph TD
    A[Início] --> B[Script Executado]
    B --> C[Renderização Initial]
    C --> D[onMount]
    D --> E{Dados mudaram?}
    E -- Sim --> F[beforeUpdate]
    F --> G[Sincroniza DOM]
    G --> H[afterUpdate]
    H --> E
    E -- Não --> I[Componente removido]
    I --> J[onDestroy]
    J --> K[Fim]

3. O Poder do onMount 🔌

O onMount é a função mais utilizada. É o lugar perfeito para: * Fazer chamadas de API. * Interagir com bibliotecas externas (como mapas ou gráficos). * Focar em um campo de input automaticamente.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    console.log("O componente está pronto!");
    // Código de inicialização aqui
  });
</script>

4. Limpeza e Performance com onDestroy 🧹

Muitos bugs e lentidões acontecem porque esquecemos de "limpar" a bagunça ao sair de uma página.

import { onDestroy } from 'svelte';

const intervalo = setInterval(() => {
  console.log('Rodando...');
}, 1000);

// Se não limparmos, o intervalo continuará rodando para sempre!
onDestroy(() => {
  clearInterval(intervalo);
});

5. Simulação de Ciclo de Vida 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Componente carregado no DOM</span>
    <span data-ty="progress"></span>
    <span data-ty>onMount executado!</span>
    <span data-ty="input"># Usuário mudou de rota</span>
    <span data-ty>onDestroy: Limpando memória...</span>
    <span data-ty>✔ Componente removido com segurança.</span>
</div>

6. Mini-Projeto: Monitor de Performance (Timer) 🚀

Sua missão hoje: 1. Crie um componente que exiba um cronômetro na tela (segundos passando). 2. Use um setInterval iniciado dentro de uma função. 3. Garanta que o cronômetro pare e limpe o intervalo ao sair do componente usando onDestroy. 4. Adicione um onMount que mostre um alert("Bem-vindo ao Timer!") apenas uma vez.

Atenção

Não limpar timers ou listeners de eventos pode causar Memory Leaks, fazendo seu site ficar lento ou até travar o navegador do usuário após algum tempo de uso.

7. Exercício de Fixação 📝

  1. Qual a diferença entre o script principal do componente e a função onMount?
  2. Por que devemos usar onDestroy ao trabalhar com setInterval ou addEventListener globais?
  3. Quando o afterUpdate é disparado?

Próxima Aula: Vamos subir o nível com Boas Práticas e Arquitetura Frontend! 🏛️

Aula 14 - Boas Práticas e Arquitetura Frontend 🏛️

Objetivo

Objetivo: Elevar o nível do seu código frontend aplicando princípios de Clean Code, organizando seu projeto de forma profissional e garantindo que sua aplicação seja fácil de escalar e manter.

1. Organização de Pastas Profissional 📂

À medida que o seu app cresce, colocar tudo em src vira um caos. Uma arquitetura padrão ajuda a equipe a se localizar.

Estrutura Sugerida:

  • src/lib/: Componentes reutilizáveis (botões, inputs, cards).
  • src/routes/: Componentes que representam páginas inteiras.
  • src/stores/: Arquivos de gerenciamento de estado global.
  • src/assets/: Imagens, fontes e CSS global.
  • src/utils/: Funções auxiliares (formatadores de data, validadores).
$ ls -F src/
assets/
components/
routes/
stores/
utils/
App.svelte
main.js

2. Arquitetura de Projeto Svelte (Mermaid) 📊

graph TD
    A[App.svelte] --> R[Routes]
    R --> P1[Home.svelte]
    R --> P2[Perfil.svelte]
    P1 --> C[Components /lib]
    P2 --> C
    C --> S[Stores]
    P1 --> S
    P2 --> S

3. Padronização de Código (Naming) ✏️

  • Componentes: Use PascalCase.svelte (ex: UserCard.svelte).
  • Variáveis e Funções: Use camelCase (ex: let isLoading = true).
  • Stores: Use nomes descritivos (ex: authStore.js).
  • Pastas: Use kebab-case ou camelCase (ex: user-profile/).

4. Separação de Interesses (SOC) 🧠

Evite colocar lógica pesada de JavaScript dentro do HTML. Se uma função tem mais de 10 linhas, considere movê-la para um arquivo .js separado na pasta utils.

Princípio DRY

Don't Repeat Yourself: Se você está copiando e colando o mesmo código em três componentes, transforme esse código em um componente reutilizável ou em uma função utilitária.

5. Dica de Performance: Lazy Loading 💻

Não carregue tudo de uma vez. Carregue apenas o que o usuário vai ver.

// Exemplo de carregamento dinâmico de componente (conceitual)
const MeuComponentePesado = async () => (await import('./Pesado.svelte')).default;

6. Mini-Projeto: Refatorando o Caos 🚀

Sua missão: 1. Pegue o código de um dos mini-projetos anteriores. 2. Mova as funções de formatação de data ou moeda para um arquivo src/utils/formatters.js. 3. Mova o componente principal para src/routes/Main.svelte. 4. Certifique-se de que todos os imports continuam funcionando. 5. O App.svelte agora deve ser apenas o "orquestrador", importando o roteador ou o componente principal.

Dica

Um componente "limpo" deve ser lido como um livro. O <script> conta a história (lógica), o markup mostra a cena (estrutura) e o <style> dá o tom (aparência).

7. Exercício de Fixação 📝

  1. Por que devemos separar componentes em uma pasta lib ou components?
  2. O que significa o acrônimo SoC (Separation of Concerns)?
  3. Como o Clean Code ajuda no trabalho em equipe em um projeto frontend?

Próxima Aula: Hora de colocar o site no ar! Build, Deploy e Produção! 🚀

Aula 15 - Build, Deploy e Produção 🚀

Objetivo

Objetivo: Aprender a transformar seu código de desenvolvimento em um pacote otimizado para produção, gerenciar segredos com variáveis de ambiente e colocar sua aplicação no ar para o mundo todo ver.

1. O que é o Build de Produção? 🏗️

Durante o desenvolvimento (npm run dev), o Vite prioriza a velocidade e facilita o seu trabalho. Para o usuário final, precisamos priorizar a performance e o tamanho do arquivo.

O comando npm run build faz: * Minificação: Remove espaços e encurta nomes de variáveis. * Tree Shaking: Remove código que não está sendo usado. * Otimização de Imagens: Reduz o peso dos arquivos estáticos.

2. Diferença entre Dev e Prod (Mermaid) 📊

graph LR
    subgraph "Desenvolvimento (Local)"
        D1[Código Sujo] --> D2[Vite Dev Server]
        D2 --> D3[Navegador]
    end

    subgraph "Produção (Mundo)"
        P1[Código Limpo] -- "npm run build" --> P2[Pasta /dist]
        P2 -- "Upload" --> P3[Servidor Web / CDN]
        P3 --> P4[Usuário Final]
    end

3. Variáveis de Ambiente (.env) 🔐

Nunca coloque senhas ou chaves de API diretamente no código. Use arquivos .env. No Svelte (via Vite), as variáveis devem começar com VITE_.

# Arquivo .env
VITE_API_URL=https://api.meusite.com
VITE_CHAVE_SECRETA=123456

// Acessando no código
const url = import.meta.env.VITE_API_URL;

4. Rodando o Build Localmente 💻

<div id="termynal" data-termynal>
    <span data-ty="input">npm run build</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Vite v5.0.0 built in 1.4s</span>
    <span data-ty># Uma pasta /dist foi criada!</span>
    <span data-ty="input">npm run preview</span>
    <span data-ty># Testando a versão final no localhost:4173</span>
</div>

5. Onde hospedar meu App? 🌍

Existem serviços que fazem o deploy automático assim que você envia o código para o GitHub:

  1. Vercel / Netlify: Os favoritos para Svelte. Basta conectar o repositório e pronto.
  2. GitHub Pages: Ótimo para sites estáticos e portfólios.
  3. Hospedagem Comum: Você pode apenas dar upload na pasta /dist via FTP.

Nota

A maioria desses serviços oferece um plano gratuito vitalício para projetos pequenos e estudantes.

6. Mini-Projeto: Launch Day 🚀

Sua missão final antes do projeto: 1. Crie um repositório no GitHub para o seu projeto atual. 2. Crie uma conta na Vercel ou Netlify. 3. Conecte seu repositório do GitHub ao serviço escolhido. 4. Veja o build acontecer automaticamente e compartilhe o link do seu site!

Dica de Segurança

Adicione o arquivo .env ao seu .gitignore. Você deve configurar as variáveis de ambiente manualmente no painel de controle da Vercel/Netlify.

7. Exercício de Fixação 📝

  1. Qual a função da pasta /dist gerada após o build?
  2. Por que devemos prefixar variáveis de ambiente com VITE_?
  3. O que é "Minificação" e como ela ajuda o usuário final?

Próxima Aula: O grande encerramento! Projeto Final do Curso 🏆

Aula 16 - Projeto Final 🏆

Objetivo

Objetivo: Aplicar TODO o conhecimento adquirido (Reatividade, Componentes, Stores, Roteamento e APIs) para construir uma aplicação web robusta, funcional e profissional utilizando Svelte.

1. O Desafio: "Svelte Connect" 🚀

Chegou a hora de consolidar seu aprendizado. Você deve escolher um dos temas abaixo para desenvolver sua aplicação final:

📑 Sistema de Tarefas (Task Manager)

  • Funcionalidades: Login, criar categorias, adicionar/remover tarefas, marcar como concluído e salvar tudo em uma API.

📊 Dashboard Administrativo

  • Funcionalidades: Visualização de métricas (gráficos), listagem de usuários de uma API, edição de perfis e controle de tema (Dark Mode).

🛒 Pequeno E-commerce

  • Funcionalidades: Catálogo de produtos vindo de API, filtro por categoria, carrinho de compras (Store) e resumo do pedido.

2. Mapa Mental do Curso (Mermaid) 📊

mindmap
  root((Svelte Master))
    Fundamentos
      Compilação
      Sintaxe .svelte
      Reatividade
    UI e Componentes
      Props
      Slots
      Eventos e Binding
      Estilo Escopado
    Ecossistema
      Roteamento SPA
      Svelte Stores
      Fetch API
    Produção
      Arquitetura
      Build e Otimização
      Deploy

3. Requisitos Obrigatórios 📋

Seu projeto deve conter pelo menos: - [ ] Componentização: Mínimo de 5 componentes reutilizáveis. - [ ] Reatividade: Uso de declarações reativas ($:) e binding de formulários. - [ ] Estado Global: Pelo menos uma Svelte Store (ex: Carrinho ou Perfil do Usuário). - [ ] Consumo de API: Realizar pelo menos uma operação de GET e uma de POST/PUT/DELETE. - [ ] Roteamento: Uso de roteador SPA com pelo menos 3 rotas diferentes. - [ ] Estilização: Uso correto de escopo de CSS e um layout responsivo (mobile-friendly).

4. Dicas para Excelência ✨

  • UX/UI: Use o que você aprendeu em Design para criar algo "limpo" e atraente.
  • Tratamento de Erros: Se a API falhar, não deixe a tela em branco! Mostre uma mensagem amigável para o usuário.
  • README: Capriche na documentação do projeto no GitHub.
  • Performance: Verifique no onDestroy se você limpou todos os recursos necessários.

5. Conclusão da Jornada 🎓

<div id="termynal" data-termynal>
    <span data-ty="input"># Finalizando o curso de Svelte...</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Módulo de Fundamentos Concluído</span>
    <span data-ty>✔ Módulo de Arquitetura Concluído</span>
    <span data-ty>✔ Projeto Final Publicado</span>
    <span data-ty>🚀 Parabéns, Desenvolvedor Svelte!</span>
</div>

6. Onde continuar? 📚

O Svelte é uma porta de entrada. Para os próximos passos, recomendamos: 1. SvelteKit: O framework Full-Stack oficial para aplicações de grande escala. 2. TypeScript: Para adicionar tipagem e segurança ao seu código. 3. Tailwind CSS: Para uma estilização rápida e moderna.

Mensagem Final

Dominar o Svelte é entender que o navegador deve trabalhar menos para o usuário ver mais. Continue praticando e construindo interfaces incríveis!

FIM DO CURSO 🚀🚀🚀 Desejamos muito sucesso na sua jornada como Desenvolvedor Frontend!

Aula 17 - Reatividade Nativa com Stores e Runes ⚡

Objetivo Pedagógico

Objetivo: Compreensão da reatividade orientada a compilador do Svelte, transição de stores legadas para o novo sistema universal de Runes ($state, $derived, $effect).

📑 1. Fundamentos Teóricos & Análise Técnica

O grande diferencial arquitetural do Svelte em relação a frameworks como React e Vue reside na eliminação do DOM Virtual (vDOM). Enquanto outros frameworks processam a reconciliação e o cálculo de diferenças em tempo de execução no navegador, o Svelte atua como um Compilador. Ele transforma o código declarativo em instruções JavaScript altamente otimizadas que manipulam diretamente os nós do DOM quando os dados mudam.

A partir do Svelte 5, o modelo reativo foi unificado sob o paradigma das Runes — primitivas sintáticas reconhecidas pelo compilador que funcionam universalmente, tanto dentro de arquivos .svelte quanto em arquivos JavaScript/TypeScript puros (.svelte.js): 1. $state(): Declara um valor reativo observável pelo compilador. 2. $derived(): Cria expressões derivadas que se recalculam automaticamente e com memoização profunda quando suas fontes sofrem mutação. 3. $effect(): Executa efeitos colaterais de sincronização com o DOM ou APIs do navegador após a renderização. 4. $props(): Declara as propriedades recebidas pelo componente de forma tipada e com suporte a valores padrão.

📐 Arquitetura Conceitual & Diagrama de Fluxo

flowchart LR
    subgraph FrameworksTradicionais ["Frameworks com Virtual DOM"]
        State1["Estado Muda"] --> VDOM["Gera Nova Árvore vDOM"]
        VDOM --> Diff["Diffing / Reconciliação (CPU)"]
        Diff --> Patch["Patch Cirúrgico no DOM"]
    end
    subgraph SvelteCompilador ["Svelte 5 (Compilador + Runes)"]
        Rune["$state(valor) Muda"] --> DirectCode["Instrução JS Compilada Executada Imediatamente no DOM!"]
    end
    style FrameworksTradicionais fill:#ffebee,stroke:#c62828
    style SvelteCompilador fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Compilação em Tempo de Build: Zero custo de overhead de vDOM no navegador do cliente. - Reatividade Universal: Runes podem ser exportadas de módulos .svelte.ts para compartilhar estado global sem bibliotecas externas. - Rastreamento Fino de Propriedades: Mutações em propriedades de objetos aninhados disparam apenas as atualizações necessárias. - Desempenho Extremo: Menor tamanho de bundle do mercado e tempos de resposta imediatos em testes de benchmark.

🛠️ 2. Implementação Prática em Svelte 5 Runes e Stores

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// Counter.svelte (Svelte 5 com Runes)
<script lang="ts">
  // 1. Definição de Props com Rune $props()
  let { initialValue = 0 }: { initialValue?: number } = $props();

  // 2. Estado Reativo com $state()
  let count = $state(initialValue);

  // 3. Valor Computado com $derived()
  let double = $derived(count * 2);

  // 4. Efeito Reativo com $effect()
  $effect(() => {
    console.log(`[Svelte Rune Effect] O contador agora é: ${count}`);
  });

  function increment() {
    count += 1; // Mutação direta e limpa!
  }
</script>

<div class="counter-card">
  <h2>Valor: {count}</h2>
  <p>Dobro do Valor: {double}</p>
  <button onclick={increment}>Incrementar (+1)</button>
</div>

💡 Análise Passo a Passo do Código

  1. Rune $state: let count = $state(0) instrui o compilador a instrumentar atribuições a count para atualizar o DOM.
  2. Mutação Limpa: count += 1 é sintaxe JavaScript padrão sem necessidade de chamadas a setCount() ou setters verbosos.
  3. Derivação Declarativa: $derived(count * 2) monitora dependências automaticamente sem necessidade de arrays de dependência manuais.

🎯 3. Próximos Passos & Sequência Didática

Aula 18 - Animações e Transições Integradas em Svelte 🎭

Objetivo Pedagógico

Objetivo: Utilização das diretivas nativas de animação do Svelte (transition, in, out, animate), coordenadas físicas com spring e tweened.

📑 1. Fundamentos Teóricos & Análise Técnica

Uma das maiores vantagens da arquitetura de compilação do Svelte é o suporte de primeira classe a transições e animações nativas, sem a necessidade de adicionar bibliotecas pesadas de animação de terceiros ao pacote final da aplicação.

O compilador Svelte fornece diretivas especializadas integradas diretamente na sintaxe do template: 1. transition:fn: Aplica animação tanto na entrada (mount) quanto na saída (destroy) do elemento no DOM. 2. in:fn e out:fn: Permitem comportamentos visuais assimétricos (ex: um elemento surge com efeito fade suave, mas é dispensado com um deslocamento slide rápido). 3. animate:flip: Implementa o algoritmo FLIP (First, Last, Invert, Play) para animar automaticamente a reordenação suave de itens em listas ({#each}) quando ocorrem deleções ou ordenações. 4. Módulos de Física (svelte/motion): Primitivas como tweened e spring simulam propriedades físicas como rigidez (stiffness) e amortecimento (damping), conferindo realismo mecânico às interações.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    Item["Item Adicionado / Removido da Lista"] --> SvelteEngine["Motor de Transições Nativo"]
    SvelteEngine --> Directives{"Diretiva Aplicada"}
    Directives -->|transition:fade| Fade["Interpolação de Opacidade (CSS Keyframes Gerados)"]
    Directives -->|animate:flip| FLIP["Cálculo de Coordenadas FLIP e Animação Fluida"]
    Directives -->|motion:spring| Spring["Cálculo Físico com Inércia e Amortecimento"]
    style Item fill:#e3f2fd,stroke:#1565c0
    style SvelteEngine fill:#fff3e0,stroke:#e65100
    style FLIP fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Zero Bibliotecas Externas: Efeitos de alta fidelidade visual integrados nativamente ao compilador. - Algoritmo FLIP Automático: Reordenação de listas sem cálculos manuais de coordenadas pelo desenvolvedor. - Transições Parametrizadas: Controle de duração, atraso (delay) e curvas de aceleração (easing). - Eventos de Ciclo de Vida da Animação: Gatilhos onintrostart, onoutroend para coordenar encadeamentos complexos.

🛠️ 2. Implementação Prática em Svelte Motion e Transitions

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// AnimatedList.svelte (Transições Nativas e FLIP em Svelte)
<script lang="ts">
  import { fade, slide } from 'svelte/transition';
  import { flip } from 'svelte/animate';

  let items = $state([
    { id: 1, title: 'Planejar Arquitetura' },
    { id: 2, title: 'Desenvolver Componentes' },
    { id: 3, title: 'Testes de Acessibilidade' }
  ]);

  function removeItem(id: number) {
    items = items.filter(i => i.id !== id);
  }
</script>

<ul class="task-list">
  {#each items as item (item.id)}
    <!-- Transição assimétrica e animação FLIP de reordenação -->
    <li in:fade={{ duration: 200 }} 
        out:slide={{ duration: 250 }} 
        animate:flip={{ duration: 300 }}>
      <span>{item.title}</span>
      <button onclick={() => removeItem(item.id)}>Remover</button>
    </li>
  {/each}
</ul>

💡 Análise Passo a Passo do Código

  1. Chave de Identidade Obrigatória: O identificador (item.id) no bloco {#each} é indispensável para que o algoritmo FLIP rastreie a posição de cada nó.
  2. Transições In e Out Independentes: in:fade e out:slide criam uma experiência visual assimétrica e refinada.
  3. Animate FLIP: Ao remover um item intermediário, os elementos adjacentes deslizam suavemente para preencher o espaço vazio.

🎯 3. Próximos Passos & Sequência Didática

Aula 19 - Gerenciamento de Estado Global e Persistência 💾

Objetivo Pedagógico

Objetivo: Construção de lojas de estado reativas compartilhadas utilizando módulos .svelte.ts, integração com Web Storage e sincronização multi-abas.

📑 1. Fundamentos Teóricos & Análise Técnica

No Svelte 5, o gerenciamento de estado global transcendeu a necessidade de APIs especiais como writable() ou bibliotecas externas como Redux. Como as Runes operam universalmente em qualquer arquivo com a extensão .svelte.ts, um estado global nada mais é do que uma classe ou objeto regular exportado contendo campos $state().

Essa simplicidade elimina qualquer atrito arquitetural: 1. Qualquer componente que importar a instância da classe terá acesso imediato aos mesmos dados reativos. 2. O compilador garante que alterações nos campos da classe disparam re-renderizações cirúrgicas apenas nos componentes que consomem tais propriedades. 3. A persistência em localStorage ou sessionStorage pode ser facilmente encapsulada com sincronização reativa através do evento window.addEventListener('storage'), permitindo que diferentes abas do navegador reflitam mudanças de estado em tempo real.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    StoreFile["appState.svelte.ts (Instância Global com Runes)"] --> CompHeader["Header.svelte (Consome Usuário)"]
    StoreFile --> CompCart["CartView.svelte (Consome Itens)"]
    StoreFile --> Storage["Local Storage do Navegador"]
    Storage -.->|Evento storage| OtherTab["Outra Aba do Navegador Sincronizada!"]
    CompCart -->|Mutação Direta| StoreFile
    style StoreFile fill:#e3f2fd,stroke:#1565c0
    style Storage fill:#fff3e0,stroke:#e65100
    style CompCart fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Ausência de Boilerplate: Classes TypeScript normais com $state tornam-se lojas de estado completas. - Sincronização entre Janelas: Uso do evento nativo storage para sincronizar sessões abertas simultaneamente. - Acesso Fora de Componentes: Funções de serviço e utilitários podem ler e alterar a store diretamente. - Performance Incomparável: Sem vDOM e sem seletores manuais; o rastreamento é feito pelo compilador.

🛠️ 2. Implementação Prática em Svelte Universal Stores

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// authStore.svelte.ts (Loja de Estado Global com Persistência em Svelte 5)
// Estado global puro compartilhado via .svelte.ts
class AuthManager {
  user = $state<string | null>(localStorage.getItem('auth_user'));
  isAuthenticated = $derived(this.user !== null);

  login(username: string) {
    this.user = username;
    localStorage.setItem('auth_user', username);
  }

  logout() {
    this.user = null;
    localStorage.removeItem('auth_user');
  }
}

// Exporta uma única instância singleton
export const auth = new AuthManager();

💡 Análise Passo a Passo do Código

  1. Instância Compartilhada: Ao exportar auth = new AuthManager(), todos os arquivos compartilham a mesma referência em memória.
  2. Rune $derived Integrada: isAuthenticated computa a condição booleana instantaneamente e notifica a interface.
  3. Persistência Transparente: O localStorage é atualizado conjuntamente com o estado sem requerer plugins ou bibliotecas externas.

🎯 3. Próximos Passos & Sequência Didática

Aula 20 - Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🏆

Objetivo Pedagógico

Objetivo: Construção de uma aplicação web de alto desempenho em Svelte 5, com roteamento, formulários reativos, lojas universais e pontuação máxima em Web Vitals.

📑 1. Fundamentos Teóricos & Análise Técnica

O Projeto Capstone da Especialização em Svelte consolida a maestria do estudante no desenvolvimento de aplicações web ultravelozes com compilador reativo. O desafio consiste em projetar e implementar um Catálogo de E-Commerce Interativo, combinando carregamento instantâneo, animações FLIP em carrinhos de compra e gerenciamento de estado persistente.

O projeto avalia as seguintes competências técnicas: 1. Domínio das Runes do Svelte 5: Uso exclusivo de $state, $derived, $effect e $props. 2. Micro-interações com Motion: Transições fluidas ao adicionar e remover produtos do pedido sem travamentos. 3. Persistência Universal: Manutenção do carrinho de compras em armazenamento local com sincronização reativa. 4. Métricas de Performance Excepcionais: Bundle JavaScript final inferior a 25KB e pontuação 100 no Google Lighthouse em Desempenho e Acessibilidade.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    App["App.svelte (Shell Principal)"] --> Catalog["ProductCatalog.svelte (Grid Responsivo)"]
    App --> Cart["CartDrawer.svelte (Animações FLIP e Transições)"]
    Catalog --> Store["cartStore.svelte.ts (Runes Reativas)"]
    Cart --> Store
    Store --> LocalStorage["Persistência no Navegador"]
    style App fill:#e3f2fd,stroke:#1565c0
    style Catalog fill:#fff3e0,stroke:#e65100
    style Store fill:#e8f5e9,stroke:#2e7d32
    style Cart fill:#f3e5f5,stroke:#7b1fa2

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Arquitetura Zero vDOM: Maximização de eficiência energética e temporal em dispositivos móveis modestos. - Experiência de Uso Instantânea: Ausência perceptível de atraso em ações de clique ou filtragem de catálogo. - Tratamento Completo de Estados de Borda: Feedback visual para listas vazias, carregamento de imagens e falhas. - Código Limpo e Elegante: Redução de até 40% nas linhas de código quando comparado a implementações equivalentes em outros frameworks.

🛠️ 2. Implementação Prática em Svelte 5, SvelteKit e Arquitetura Reativa

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// ProductCard.svelte (Componente Integrado do Projeto Capstone)
<script lang="ts">
  import { auth } from './authStore.svelte';

  let { title, price, onAdd }: { title: string; price: number; onAdd: () => void } = $props();
</script>

<div class="product-card">
  <h3>{title}</h3>
  <p class="price">R$ {price.toFixed(2)}</p>
  {#if auth.isAuthenticated}
    <button onclick={onAdd} class="btn-buy">Adicionar ao Carrinho</button>
  {:else}
    <span class="login-warn">Faça login para comprar</span>
  {/if}
</div>

💡 Análise Passo a Passo do Código

  1. Uso de $props(): Interface limpa e tipada para comunicação de dados com o componente pai.
  2. Integração com Store Global: auth.isAuthenticated consome a loja global sem necessidade de assinaturas complexas.
  3. Template Declarativo: Controle condicional direto com blocos {#if} compilados nativamente.

🎯 3. Próximos Passos & Sequência Didática

Exercícios

🏋️ Exercícios do Curso

Lista completa das 20 unidades de exercicios organizadas em 5 módulos didáticos.

Exercícios 01 - Introdução ao Frontend Moderno 🌐

🟢 Básicos

  1. Conceito: Diferencie MPA (Multi-Page Application) de SPA (Single Page Application) com suas palavras.
  2. História: Por que o surgimento do AJAX foi tão importante para a evolução das interfaces web?

🟡 Intermediários

  1. Processamento: Em uma SPA, onde ocorre a maior parte do processamento da interface? No servidor ou no navegador do cliente? Justifique.
  2. Reatividade: Explique o que acontece com a interface de um framework reativo quando o valor de uma variável vinculada a ela é alterado.

🔴 Desafio

  1. Análise Comparativa: Imagine que você está criando um site de notícias simples (apenas texto e imagens estáticas) e um painel de controle de uma corretora de valores (dados mudando a cada segundo).
    • Qual modelo (MPA ou SPA) você escolheria para cada um?
    • Quais seriam os prós e contras de usar uma SPA para o site de notícias em termos de SEO?

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Conceito **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Desenvolvimento Frontend Moderno**, o conceito abordado (Conceito) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: História **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Desenvolvimento Frontend Moderno**, o conceito abordado (História) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Processamento **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Desenvolvimento Frontend Moderno**, o conceito abordado (Processamento) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Reatividade **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Desenvolvimento Frontend Moderno**, o conceito abordado (Reatividade) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Análise Comparativa **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Desenvolvimento Frontend Moderno**, o conceito abordado (Análise Comparativa) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 02 - Introdução ao Svelte 🏗️

🟢 Básicos

  1. Diferencial: Qual a principal diferença entre o Svelte e frameworks como React ou Vue em relação ao seu funcionamento?
  2. Vite: Quais as vantagens de usar o Vite para criar um projeto Svelte em vez de ferramentas mais antigas?

🟡 Intermediários

  1. Compilação: Explique por que o fato de o Svelte ser um "compilador" faz com que o pacote final enviado ao usuário seja menor.
  2. Virtual DOM: O Svelte utiliza Virtual DOM? Explique como ele atualiza as informações na tela de forma diferente.

🔴 Desafio

  1. Hands-on - Primeiro Projeto:
    • Use o comando npm create vite@latest para criar seu primeiro projeto Svelte.
    • Navegue até a pasta, instale as dependências e rode o projeto.
    • Abra o arquivo App.svelte, mude o texto do título para "Meu Primeiro App Svelte" e verifique a atualização instantânea no navegador.
    • Qual arquivo é o "ponto de entrada" (entry point) do JavaScript na estrutura gerada pelo Vite?

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Diferencial **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Svelte ️**, o conceito abordado (Diferencial) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Vite **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Svelte ️**, o conceito abordado (Vite) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Compilação **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Svelte ️**, o conceito abordado (Compilação) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Virtual DOM **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Svelte ️**, o conceito abordado (Virtual DOM) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Hands-on - Primeiro Projeto **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao Svelte ️**, o conceito abordado (Hands-on - Primeiro Projeto) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 03 - Estrutura de Projeto e Sintaxe Básica 🧱

🟢 Básicos

  1. Anatomia: Quais são as 3 seções principais que compõem um arquivo .svelte?
  2. Interpolação: Como exibimos o valor de uma variável JavaScript dentro do HTML no Svelte?

🟡 Intermediários

  1. Atributos Dinâmicos: Como você passaria o valor de uma variável chamada caminhoImagem para o atributo src de uma tag <img>?
  2. Lógica no Script: Dentro da tag <script>, crie uma variável nome e uma função dizerOla() que imprima uma mensagem no console usando essa variável.

🔴 Desafio

  1. Mini-Componente de Perfil:
    • Crie um arquivo App.svelte que tenha variáveis para nome, idade e profissao.
    • No HTML (markup), exiba esses dados dentro de uma div com classe card.
    • Adicione um estilo básico na tag <style> para que o card tenha uma borda, sombra e um pouco de espaçamento (padding).
    • O que acontece se você declarar uma variável com let mas não usá-la em lugar nenhum do HTML? O Svelte dá algum aviso?

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Anatomia **Resposta Comentada:** - **Fundamentação:** No contexto de **Estrutura de Projeto e Sintaxe Básica**, o conceito abordado (Anatomia) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Interpolação **Resolução e Implementação:** 
// Solução de referência para: Interpolação
function solucaoExercicio() {
    console.log("Executando validação de: Estrutura de Projeto e Sintaxe Básica");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estrutura de Projeto e Sintaxe Básica**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Atributos Dinâmicos **Resposta Comentada:** - **Fundamentação:** No contexto de **Estrutura de Projeto e Sintaxe Básica**, o conceito abordado (Atributos Dinâmicos) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Lógica no Script **Resolução e Implementação:** 
// Solução de referência para: Lógica no Script
function solucaoExercicio() {
    console.log("Executando validação de: Estrutura de Projeto e Sintaxe Básica");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estrutura de Projeto e Sintaxe Básica**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Mini-Componente de Perfil **Resposta Comentada:** - **Fundamentação:** No contexto de **Estrutura de Projeto e Sintaxe Básica**, o conceito abordado (Mini-Componente de Perfil) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 04 - Reatividade no Svelte ⚡

🟢 Básicos

  1. Gatilho: O que dispara uma atualização automática na interface do Svelte? (Dica: pense no operador =).
  2. Sintaxe $:: Para que serve o prefixo $: no Svelte?

🟡 Intermediários

  1. Variáveis Dependentes: Crie um exemplo de código onde uma variável total é sempre igual à soma de preco e taxa, usando reatividade.
  2. Logs Reativos: Como você usaria a sintaxe $: para imprimir o valor de uma variável no console toda vez que ela mudar?

🔴 Desafio

  1. Lógica de Negócio Reativa: Crie um componente que simule um carrinho de compras simples:
    • Tenha uma variável quantidade (inicie em 1) e uma variável precoUnitario (ex: 50.0).
    • Crie uma variável reativa subtotal que calcule o preço total.
    • Crie um bloco reativo $: { ... } que verifique: se o subtotal passar de 100, exiba um aviso (pode ser um texto na tela ou um console.log) dizendo "Você ganhou frete grátis!".
    • Adicione botões para aumentar e diminuir a quantidade.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Gatilho **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade no Svelte ⚡**, o conceito abordado (Gatilho) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Sintaxe $: **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade no Svelte ⚡**, o conceito abordado (Sintaxe $:) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Variáveis Dependentes **Resolução e Implementação:** 
// Solução de referência para: Variáveis Dependentes
function solucaoExercicio() {
    console.log("Executando validação de: Reatividade no Svelte ⚡");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Reatividade no Svelte ⚡**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Logs Reativos **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade no Svelte ⚡**, o conceito abordado (Logs Reativos) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Lógica de Negócio Reativa **Resposta Comentada:** - **Fundamentação:** No contexto de **Reatividade no Svelte ⚡**, o conceito abordado (Lógica de Negócio Reativa) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 05 - Componentização 🧩

🟢 Básicos

  1. Conceito: Por que dividir uma aplicação em componentes é melhor do que ter um único arquivo gigante?
  2. Importação: Escreva a linha de código necessária para importar um componente chamado Header.svelte que está dentro da pasta lib.

🟡 Intermediários

  1. Props: Como você declara uma variável em um componente filho para que o componente pai possa enviar um valor para ela?
  2. Slots: Imagine que você criou um componente Moldura.svelte. Como você faria para que qualquer conteúdo colocado dentro dele (como um texto ou outra imagem) apareça em um lugar específico do seu HTML?

🔴 Desafio

  1. Pai e Filho na Prática:
    • Crie um componente chamado Produto.svelte.
    • Ele deve receber 3 props: nome, preco e disponivel (booleano).
    • No seu App.svelte, use o componente Produto três vezes, passando dados diferentes para cada um.
    • No componente Produto, adicione um estilo que mude a cor do nome para cinza caso o produto não esteja disponivel.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Conceito **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentização**, o conceito abordado (Conceito) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Importação **Resolução e Implementação:** 
// Solução de referência para: Importação
function solucaoExercicio() {
    console.log("Executando validação de: Componentização");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Componentização**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Props **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentização**, o conceito abordado (Props) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Slots **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentização**, o conceito abordado (Slots) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Pai e Filho na Prática **Resposta Comentada:** - **Fundamentação:** No contexto de **Componentização**, o conceito abordado (Pai e Filho na Prática) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 06 - Loops e Condicionais 🔁

🟢 Básicos

  1. Sintaxe If: Como iniciamos e como fechamos um bloco condicional if no Svelte?
  2. Sintaxe Each: Escreva a estrutura básica de um bloco each para percorrer uma lista chamada cores.

🟡 Intermediários

  1. Else If: Crie um exemplo de bloco condicional que verifique uma variável nota e exiba: "Aprovado" (> 7), "Recuperação" (entre 5 e 7) ou "Reprovado" (< 5).
  2. Índice no Each: Como você faz para acessar a posição (índice 0, 1, 2...) de um item dentro de um loop each?

🔴 Desafio

  1. Lista de Filmes Reativa:
    • Crie um array de objetos chamado filmes, onde cada objeto tem titulo e visto (booleano).
    • Use um loop {#each} para listar todos os filmes.
    • Use um {#if} dentro do loop: se o filme já foi visto, risque o nome do filme (ou use um emoji ✅); se não, mostre um botão "Marcar como Visto".
    • Implemente a lógica do botão para que, ao clicar, o status visto desse filme mude para true e a tela atualize.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Sintaxe If **Resposta Comentada:** - **Fundamentação:** No contexto de **Loops e Condicionais**, o conceito abordado (Sintaxe If) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Sintaxe Each **Resolução e Implementação:** 
// Solução de referência para: Sintaxe Each
function solucaoExercicio() {
    console.log("Executando validação de: Loops e Condicionais");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Loops e Condicionais**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Else If **Resolução e Implementação:** 
// Solução de referência para: Else If
function solucaoExercicio() {
    console.log("Executando validação de: Loops e Condicionais");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Loops e Condicionais**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Índice no Each **Resolução e Implementação:** 
// Solução de referência para: Índice no Each
function solucaoExercicio() {
    console.log("Executando validação de: Loops e Condicionais");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Loops e Condicionais**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Lista de Filmes Reativa **Resposta Comentada:** - **Fundamentação:** No contexto de **Loops e Condicionais**, o conceito abordado (Lista de Filmes Reativa) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 07 - Eventos e Formulários ⌨️

🟢 Básicos

  1. Evento Click: Qual a diretiva usada para escutar um clique em um botão no Svelte?
  2. Input Binding: Para que serve a diretiva bind:value e qual a diferença entre ela e apenas passar uma variável para o atributo value?

🟡 Intermediários

  1. Prevent Default: Como você impediria um formulário de recarregar a página ao ser enviado, usando apenas um modificador de evento do Svelte?
  2. Múltiplos Inputs: Imagine um conjunto de 3 botões do tipo "Radio" para escolher um tamanho (P, M, G). Como você vincularia todos eles a uma única variável chamada tamanhoSelecionado?

🔴 Desafio

  1. Formulário de Feedback Dinâmico:
    • Crie um formulário com um campo de nome e um comentario (textarea).
    • Crie uma variável reativa contagemCaracteres que mostre quantos caracteres o usuário já digitou no comentário.
    • Impeça o botão "Enviar" de ser clicado (atribute disabled) se o nome estiver vazio ou se o comentário tiver menos de 10 caracteres.
    • Ao enviar, exiba uma mensagem de sucesso na tela e limpe os campos.
    • O que acontece se você remover o bind:value e tentar ler os dados através de uma função? Qual abordagem é mais simples no Svelte?

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Evento Click **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Formulários ⌨️**, o conceito abordado (Evento Click) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Input Binding **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Formulários ⌨️**, o conceito abordado (Input Binding) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Prevent Default **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Formulários ⌨️**, o conceito abordado (Prevent Default) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Múltiplos Inputs **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Formulários ⌨️**, o conceito abordado (Múltiplos Inputs) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Formulário de Feedback Dinâmico **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos e Formulários ⌨️**, o conceito abordado (Formulário de Feedback Dinâmico) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 08 - Estilização e Escopo de CSS 🎨

🟢 Básicos

  1. Escopo: O que significa dizer que o CSS no Svelte é "escopado" por padrão?
  2. Global: Como você define uma regra CSS dentro de um componente para que ela afete elementos em toda a aplicação?

🟡 Intermediários

  1. Classes Condicionais: Escreva a sintaxe da diretiva class: para aplicar a classe ativo apenas se a variável estaLigado for verdadeira.
  2. Variáveis CSS: Como você passaria o valor de uma variável JavaScript para uma propriedade CSS (ex: background-color) de forma que ela mude dinamicamente?

🔴 Desafio

  1. Card de Tema Dinâmico:
    • Crie um componente CardNoticia.svelte.
    • Adicione uma prop chamada urgente (booleano).
    • No <style>, crie uma classe .perigo com fundo vermelho e texto branco.
    • Use a diretiva class:perigo para que o card mude de aparência se a prop urgente for verdadeira.
    • Adicione uma animação de "piscar" (keyframes) que também só seja ativada caso a notícia seja urgente.
    • Como o Svelte lida com seletores de ID (ex: #meu-id) em comparação com seletores de classe? O escopo funciona da mesma forma?

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Escopo **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilização e Escopo de CSS**, o conceito abordado (Escopo) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Global **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilização e Escopo de CSS**, o conceito abordado (Global) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Classes Condicionais **Resolução e Implementação:** 
// Solução de referência para: Classes Condicionais
function solucaoExercicio() {
    console.log("Executando validação de: Estilização e Escopo de CSS");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estilização e Escopo de CSS**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Variáveis CSS **Resolução e Implementação:** 
// Solução de referência para: Variáveis CSS
function solucaoExercicio() {
    console.log("Executando validação de: Estilização e Escopo de CSS");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estilização e Escopo de CSS**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Card de Tema Dinâmico **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilização e Escopo de CSS**, o conceito abordado (Card de Tema Dinâmico) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 09 - Roteamento SPA na Prática 🗺️

🟢 Básicos

  1. Definição: Por que uma SPA não recarrega a página ao clicar em um link interno?
  2. Instalação: Qual o comando para instalar o svelte-spa-router no seu projeto?

🟡 Intermediários

  1. Configuração: Como você define uma rota curinga (fallback) para exibir uma página "404 - Não Encontrado"?
  2. Links: Se você usar a tag <a href="/sobre">, a página irá recarregar. O que deve ser adicionado a essa tag para que o roteador trate a navegação?

🔴 Desafio

  1. Sistema de Navegação Dinâmico:
    • Crie um objeto routes que tenha as páginas: Home, Contato e Perfil.
    • No componente Perfil, use o parâmetro de rota para que a URL seja /perfil/:usuario.
    • Exiba na tela a mensagem: "Bem-vindo ao perfil de [usuario]!", onde [usuario] vem da URL.
    • Crie um menu lateral (Sidebar) que use um loop {#each} para gerar os links de navegação a partir de um array de objetos.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Definição **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento SPA na Prática ️**, o conceito abordado (Definição) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Instalação **Resolução e Implementação:** 
// Solução de referência para: Instalação
function solucaoExercicio() {
    console.log("Executando validação de: Roteamento SPA na Prática ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Roteamento SPA na Prática ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Configuração **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento SPA na Prática ️**, o conceito abordado (Configuração) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Links **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento SPA na Prática ️**, o conceito abordado (Links) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Sistema de Navegação Dinâmico **Resposta Comentada:** - **Fundamentação:** No contexto de **Roteamento SPA na Prática ️**, o conceito abordado (Sistema de Navegação Dinâmico) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 10 - Stores e Gerenciamento de Estado 📦

🟢 Básicos

  1. Utilidade: Em qual situação é melhor usar uma Store em vez de passar dados via Props?
  2. Atalho: O que o caractere $ faz quando colocado antes do nome de uma store em um componente Svelte?

🟡 Intermediários

  1. Update vs Set: Quando você deve usar o método .update() em vez do .set() em uma writable store?
  2. Inscrição Manual: Escreva o código para se inscrever (subscribe) manualmente em uma store chamada tema e salvar o valor em uma variável local. Não esqueça de mencionar como você faria para "desinscrever".

🔴 Desafio

  1. Sistema de Autenticação Centralizado:
    • Crie um arquivo auth.js com uma store user que guarda um objeto (pode iniciar como null).
    • Crie dois componentes: Login.svelte e Dashboard.svelte.
    • No Login, ao clicar em um botão, atualize a store com um usuário fictício (ex: {nome: 'Fulano', email: 'fulano@teste.com'}).
    • No App.svelte, use um {#if $user} para alternar entre mostrar o Login ou o Dashboard.
    • No Dashboard, exiba o nome do usuário vindo da store e adicione um botão "Logoff" que limpe a store.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Utilidade **Resposta Comentada:** - **Fundamentação:** No contexto de **Stores e Gerenciamento de Estado**, o conceito abordado (Utilidade) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Atalho **Resposta Comentada:** - **Fundamentação:** No contexto de **Stores e Gerenciamento de Estado**, o conceito abordado (Atalho) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Update vs Set **Resolução e Implementação:** 
// Solução de referência para: Update vs Set
function solucaoExercicio() {
    console.log("Executando validação de: Stores e Gerenciamento de Estado");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Stores e Gerenciamento de Estado**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Inscrição Manual **Resolução e Implementação:** 
// Solução de referência para: Inscrição Manual
function solucaoExercicio() {
    console.log("Executando validação de: Stores e Gerenciamento de Estado");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Stores e Gerenciamento de Estado**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Sistema de Autenticação Centralizado **Resposta Comentada:** - **Fundamentação:** No contexto de **Stores e Gerenciamento de Estado**, o conceito abordado (Sistema de Autenticação Centralizado) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 11 - Consumo de API REST 🌐

🟢 Básicos

  1. Fetch: Qual o método HTTP padrão usado pela função fetch() se você não especificar nenhum?
  2. JSON: Por que precisamos chamar .json() após receber a resposta de um fetch?

🟡 Intermediários

  1. Bloco Await: Escreva a estrutura básica do bloco {#await} do Svelte, incluindo o estado de carregamento e o tratamento de erro.
  2. Async/Await: Transforme uma sequência de .then() e .catch() em uma função usando as palavras-chave async e await.

🔴 Desafio

  1. Buscador de Personagens:
    • Use a API pública do Rick and Morty (https://rickandmortyapi.com/api/character).
    • Crie um input de texto para o usuário digitar um nome.
    • Use o {#await} para buscar os personagens que coincidam com esse nome sempre que o usuário clicar em um botão "Buscar".
    • Exiba a imagem e o nome do personagem retornado.
    • Adicione uma verificação: se a API não encontrar nada, exiba "Nenhum personagem encontrado".

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Fetch **Resolução e Implementação:** 
// Solução de referência para: Fetch
function solucaoExercicio() {
    console.log("Executando validação de: Consumo de API REST");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Consumo de API REST**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: JSON **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de API REST**, o conceito abordado (JSON) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Bloco Await **Resolução e Implementação:** 
// Solução de referência para: Bloco Await
function solucaoExercicio() {
    console.log("Executando validação de: Consumo de API REST");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Consumo de API REST**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Async/Await **Resolução e Implementação:** 
// Solução de referência para: Async/Await
function solucaoExercicio() {
    console.log("Executando validação de: Consumo de API REST");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Consumo de API REST**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Buscador de Personagens **Resposta Comentada:** - **Fundamentação:** No contexto de **Consumo de API REST**, o conceito abordado (Buscador de Personagens) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 12 - CRUD Completo com API 🏗️

🟢 Básicos

  1. CRUD: O que significa cada letra da sigla CRUD?
  2. Métodos HTTP: Quais métodos HTTP (GET, POST, etc) são usados para Criar e Atender (Ler) dados?

🟡 Intermediários

  1. Headers: Por que é necessário enviar o cabeçalho Content-Type: application/json ao realizar um POST para uma API?
  2. Refresh Local: Por que é uma boa prática filtrar a lista local ao deletar um item em vez de fazer uma nova requisição de "Listar tudo" ao servidor?

🔴 Desafio

  1. Gerenciador de Estoque:
    • Imagine uma API de produtos: https://api-estoque.com/produtos.
    • Escreva o código da função salvarProduto(novoProduto) que faz um POST com os dados do produto.
    • Escreva o código da função atualizarPreco(id, novoPreco) que faz um PATCH enviando apenas o novo preço.
    • Como você lidaria com o estado de "Salvando..." no botão para evitar que o usuário clique duas vezes seguidas e envie dados duplicados?

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: CRUD **Resposta Comentada:** - **Fundamentação:** No contexto de **CRUD Completo com API ️**, o conceito abordado (CRUD) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Métodos HTTP **Resolução e Implementação:** 
// Solução de referência para: Métodos HTTP
function solucaoExercicio() {
    console.log("Executando validação de: CRUD Completo com API ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **CRUD Completo com API ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Headers **Resposta Comentada:** - **Fundamentação:** No contexto de **CRUD Completo com API ️**, o conceito abordado (Headers) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Refresh Local **Resposta Comentada:** - **Fundamentação:** No contexto de **CRUD Completo com API ️**, o conceito abordado (Refresh Local) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Gerenciador de Estoque **Resposta Comentada:** - **Fundamentação:** No contexto de **CRUD Completo com API ️**, o conceito abordado (Gerenciador de Estoque) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 13 - Ciclo de Vida e Performance ⏳

🟢 Básicos

  1. Mount: O que acontece quando o código é colocado dentro da função onMount?
  2. Destroy: Em qual momento a função onDestroy é executada?

🟡 Intermediários

  1. Memória: Por que é perigoso deixar um setInterval rodando sem limpá-lo no onDestroy?
  2. Atualização: Diferencie as funções beforeUpdate e afterUpdate. Em que cenário você usaria cada uma?

🔴 Desafio

  1. Relógio com Alarme:
    • Crie um componente que exiba o horário atual (HH:MM:SS) e atualize a cada segundo.
    • Use onMount para iniciar o cronômetro.
    • Adicione uma variável alarme (string no formato HH:MM).
    • Use um bloco reativo $: { ... } para verificar se o horário atual é igual ao alarme. Se for, mostre um alerta na tela.
    • Garanta que o intervalo seja limpo no onDestroy.
    • Como você otimizaria esse componente para que ele não consumisse processamento desnecessário se o usuário mudar de aba? (Pesquise sobre visibilitychange).

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Mount **Resolução e Implementação:** 
// Solução de referência para: Mount
function solucaoExercicio() {
    console.log("Executando validação de: Ciclo de Vida e Performance ⏳");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Ciclo de Vida e Performance ⏳**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Destroy **Resolução e Implementação:** 
// Solução de referência para: Destroy
function solucaoExercicio() {
    console.log("Executando validação de: Ciclo de Vida e Performance ⏳");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Ciclo de Vida e Performance ⏳**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Memória **Resposta Comentada:** - **Fundamentação:** No contexto de **Ciclo de Vida e Performance ⏳**, o conceito abordado (Memória) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Atualização **Resposta Comentada:** - **Fundamentação:** No contexto de **Ciclo de Vida e Performance ⏳**, o conceito abordado (Atualização) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Relógio com Alarme **Resposta Comentada:** - **Fundamentação:** No contexto de **Ciclo de Vida e Performance ⏳**, o conceito abordado (Relógio com Alarme) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 14 - Boas Práticas e Arquitetura Frontend 🏛️

🟢 Básicos

  1. Pastas: Qual a utilidade da pasta lib ou components em um projeto Svelte profissional?
  2. Nomenclatura: Qual o padrão de escrita (naming convention) recomendado para nomes de arquivos de componentes?

🟡 Intermediários

  1. SOC: Explique o princípio de Separação de Interesses (SoC) aplicado a um componente .svelte.
  2. REUSABILIDADE: Cite 3 elementos de uma aplicação que você transformaria em componentes reutilizáveis para seguir o princípio DRY.

🔴 Desafio

  1. Refatoração de Arquitetura: Imagine que você tem um arquivo App.svelte com 500 linhas de código, contendo: lógica de autenticação, o menu lateral, o rodapé e a lista de produtos.
    • Como você dividiria esse arquivo em pelo menos 4 novos arquivos?
    • Onde você colocaria a lógica de autenticação para que ela pudesse ser acessada por qualquer componente (em uma pasta utils, stores ou lib)?
    • Escreva como ficaria a nova estrutura de pastas do seu projeto após essa refatoração.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Pastas **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura Frontend ️**, o conceito abordado (Pastas) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Nomenclatura **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura Frontend ️**, o conceito abordado (Nomenclatura) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: SOC **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura Frontend ️**, o conceito abordado (SOC) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: REUSABILIDADE **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura Frontend ️**, o conceito abordado (REUSABILIDADE) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Refatoração de Arquitetura **Resposta Comentada:** - **Fundamentação:** No contexto de **Boas Práticas e Arquitetura Frontend ️**, o conceito abordado (Refatoração de Arquitetura) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 15 - Build, Deploy e Produção 🚀

🟢 Básicos

  1. Build: Qual o comando usado para gerar a versão final do seu site para o usuário?
  2. Variáveis .env: Qual o prefixo obrigatório para variáveis de ambiente que devem ser lidas pelo Svelte via Vite?

🟡 Intermediários

  1. Minificação: Explique por que o arquivo CSS ou JS final gerado pelo build parece estar "embaralhado" ou sem espaços.
  2. Hospedagem: Qual a diferença entre hospedar um site no GitHub Pages (estático) e em uma plataforma como Vercel ou Netlify (com integração com repositório)?

🔴 Desafio

  1. Preparação para Produção:
    • Imagine que seu app consome uma API de desenvolvimento (localhost:3000) e uma de produção (api.meusite.com).
    • Como você configuraria seus arquivos .env para que o código troque automaticamente a URL da API ao fazer o build?
    • Por que é uma falha de segurança gravíssima enviar o arquivo .env para o repositório público do GitHub?
    • Pesquise e explique o que são "Environment Variables" nas configurações de um painel como a Vercel.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Build **Resolução e Implementação:** 
// Solução de referência para: Build
function solucaoExercicio() {
    console.log("Executando validação de: Build, Deploy e Produção");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Build, Deploy e Produção**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Variáveis .env **Resposta Comentada:** - **Fundamentação:** No contexto de **Build, Deploy e Produção**, o conceito abordado (Variáveis .env) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Minificação **Resposta Comentada:** - **Fundamentação:** No contexto de **Build, Deploy e Produção**, o conceito abordado (Minificação) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Hospedagem **Resposta Comentada:** - **Fundamentação:** No contexto de **Build, Deploy e Produção**, o conceito abordado (Hospedagem) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Preparação para Produção **Resposta Comentada:** - **Fundamentação:** No contexto de **Build, Deploy e Produção**, o conceito abordado (Preparação para Produção) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 16 - Projeto Final 🏆

🟢 Básicos

  1. Recapitulação: Cite os 3 conceitos do Svelte que você considerou mais impactantes durante o curso.
  2. Próximos Passos: O que é o SvelteKit e por que ele seria seu próximo passo de estudo?

🟡 Intermediários

  1. Análise de Requisitos: Pegue a proposta do seu Projeto Final. Liste quais serão os 3 principais componentes que você precisará criar para ele.
  2. Estado Global: Qual dado do seu projeto final será guardado em uma Svelte Store? Por que ele não pode ser apenas uma variável local?

🔴 Desafio

  1. Plano de Execução: Elabore um cronograma (roadmap) de como você vai construir seu projeto final:
    • Fase 1: Estrutura de pastas e navegação básica (Aulas 02, 09, 14).
    • Fase 2: Criação dos componentes visuais e estilização (Aulas 03, 05, 08).
    • Fase 3: Lógica de dados, Stores e integração com API (Aulas 04, 10, 11, 12).
    • Fase 4: Polimento, tratamento de erros e Deploy (Aulas 13, 15).
    • Quais ferramentas externas (bibliotecas de ícones, frameworks CSS, APIs de teste) você planeja utilizar?

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Recapitulação **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final**, o conceito abordado (Recapitulação) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Próximos Passos **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final**, o conceito abordado (Próximos Passos) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Análise de Requisitos **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final**, o conceito abordado (Análise de Requisitos) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Estado Global **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final**, o conceito abordado (Estado Global) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Plano de Execução **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final**, o conceito abordado (Plano de Execução) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Projetos

🚀 Projetos do Curso

Lista completa das 20 unidades de projetos organizadas em 5 módulos didáticos.

Projeto 01 - Setup e Inspeção Moderno 🌐

Objetivo: Preparar o terreno para o desenvolvimento frontend e entender como os sites que visitamos são construídos "por baixo do capô".

🚀 Desafio

  1. Instalação do Node.js: Instale a versão LTS do Node.js em sua máquina.
  2. Verificação no Terminal:
    • Abra o terminal (cmd, powershell ou bash).
    • Digite node -v e npm -v para garantir que ambos estão instalados.
  3. Inspeção de Site (DévTools):
    • Acesse um site de sua preferência (ex: YouTube, GitHub ou o site do curso).
    • Clique com o botão direito e selecione "Inspecionar".
    • Vá na aba Network (Rede) e atualize a página.
    • Tente identificar se o site é uma SPA (ele carrega dados sem recarregar a página ao clicar em menus?) ou uma MPA (ele pisca a cada clique?).
  4. Editor de Código: Instale o VS Code e as extensões "Svelte for VS Code" e "Prettier".

📤 O que entregar?

  • Print (screenshot) do terminal mostrando as versões do Node e NPM.
  • Um texto curto (3 linhas) descrevendo se o site que você inspecionou parece ser uma SPA ou MPA e o porquê.
  • Print do VS Code com as extensões instaladas.

Projeto 02 - Meu Primeiro App (Counter 2.0) 🏗️

Objetivo: Criar e rodar seu primeiro projeto Svelte usando o Vite e entender a estrutura de pastas.

🚀 Desafio

  1. Criação: Execute o comando npm create vite@latest meu-primeiro-app -- --template svelte.
  2. Instalação: Entre na pasta e execute npm install.
  3. Execução: Rode o projeto com npm run dev.
  4. Modificação:
    • Abra o arquivo App.svelte.
    • Altere o contador para que ele aumente de 2 em 2 em vez de 1 em 1.
    • Adicione um novo botão "Zerar" que resete o contador para 0.
    • Mude a cor do texto do contador para uma cor de sua escolha no <style>.

📤 O que entregar?

  • Screenshot do seu navegador rodando o projeto com o botão "Zerar" visível.
  • O trecho de código (script e markup) que você alterou para o contador funcionar de 2 em 2.

Projeto 03 - Cartão de Visitas Digital 🧱

Objetivo: Praticar a sintaxe básica do Svelte, interpolação de variáveis e estilização de componentes.

🚀 Desafio

Crie uma página de "Cartão de Visitas" que contenha: 1. Estrutura: Use um arquivo .svelte único para o projeto. 2. JavaScript: - Variáveis para nome, bio, urlFoto e um array de linksRedesSociais. 3. Markup (HTML): - Exiba a imagem (usando src={urlFoto}). - Exiba o nome dentro de uma tag <h1>. - Exiba a biografia em um parágrafo. 4. Estilo (CSS): - Centralize o cartão na tela. - Adicione uma sombra (box-shadow) e uma borda arredondada. - Estilize os links para parecerem botões.

📤 O que entregar?

  • O arquivo App.svelte completo ou o link do repositório no GitHub.
  • Uma screenshot do cartão finalizado no navegador.

Projeto 04 - Calculadora de IMC Reativa ⚡

Objetivo: Aplicar os conceitos de reatividade automática e declarações reativas ($:) em um cenário real.

🚀 Desafio

Crie uma Calculadora de Índice de Massa Corporal (IMC): 1. Entradas: Crie dois sliders (input type="range") ou campos numéricos para Peso e Altura. 2. Cálculo Reativo: - Use a sintaxe $: para criar uma variável imc que calcula o valor automaticamente: peso / (altura * altura). 3. Classificação Reativa: - Use outro bloco $: para definir uma variável resultadoTexto (ex: "Abaixo do peso", "Peso Normal", "Sobrepeso"). 4. Interface: - Exiba os valores de peso e altura enquanto o usuário move os sliders. - Exiba o valor do IMC com apenas duas casas decimais (.toFixed(2)). - Mude a cor do texto do resultado dependendo da gravidade (ex: Vermelho para obesidade).

📤 O que entregar?

  • Arquivo App.svelte.
  • Screenshot da calculadora funcionando com um valor de IMC calculado.

Projeto 05 - Dashboard de Perfil 🧩

Objetivo: Praticar a criação de componentes independentes e a passagem de dados entre eles usando Props.

🚀 Desafio

Crie um dashboard de perfil que utilize pelo menos 3 componentes diferentes: 1. Componente Avatar.svelte: Recebe uma prop urlImagem e exibe a imagem circular. 2. Componente InfoUsuario.svelte: Recebe nome, cargo e localizacao e exibe esses dados estilizados. 3. Componente RedesSociais.svelte: Recebe um array de strings com links e os lista como ícones ou botões. 4. Main (App.svelte): Importe os 3 componentes e monte o layout do dashboard.

📤 O que entregar?

  • A pasta src/lib contendo os componentes criados.
  • Arquivo App.svelte.
  • Screenshot do dashboard finalizado.

Projeto 06 - Lista de Tarefas (To-Do List) 🔁

Objetivo: Dominar o controle de fluxo ({#if}, {#each}) para gerenciar listas dinâmicas de dados.

🚀 Desafio

Crie uma aplicação de Lista de Tarefas (To-Do List) funcional: 1. Estado: Crie um array de objetos tarefas (ex: [{id: 1, texto: 'Estudar', concluida: false}]). 2. Listagem: Use o {#each} para renderizar cada tarefa. 3. Lógica: - Se a tarefa estiver concluída, exiba-a com um risco (text-decoration: line-through). - Adicione um botão para "Remover" a tarefa da lista. - Adicione um botão para "Alternar" o status entre concluída/pendente. 4. Feedback: Se a lista estiver vazia, exiba uma mensagem amigável: "Uhul! Nenhuma tarefa pendente.".

📤 O que entregar?

  • Arquivo App.svelte com a lógica e o markup.
  • Screenshot demonstrando a lista com pelo menos uma tarefa concluída e a mensagem de "Lista Vazia" (ao remover tudo).

Projeto 07 - Simulador de Financiamento ⌨️

Objetivo: Aplicar o Two-way Binding (bind:value) para criar um formulário interativo de simulação financeira.

🚀 Desafio

Crie um simulador de financiamento de veículo: 1. Inputs: - Nome do cliente (texto). - Valor do veículo (número). - Valor da entrada (número). - Número de parcelas (select: 12x, 24x, 36x, 48x). 2. Lógica: - Use o bind:value em todos os campos. - Calcule o valor da parcela mensal (considere uma taxa de juros fixa de 2% ao mês sobre o saldo devedor). 3. Validação: - O botão "Simular" só deve aparecer se o valor da entrada for menor que o valor do veículo. - Se a entrada for zero, exiba um aviso: "Atenção: Financiamentos sem entrada possuem juros maiores.".

📤 O que entregar?

  • Arquivo App.svelte.
  • Screenshot com os dados preenchidos e o valor da parcela calculado na tela.

Projeto 08 - Mini Design System 🎨

Objetivo: Praticar a estilização de componentes, o isolamento de CSS e o uso de classes condicionais.

🚀 Desafio

Crie um "Mini Design System" composto por botões e alertas reutilizáveis: 1. Botão Estilizado: - Crie um componente Button.svelte que receba uma prop tipo (primario, secundario, perigo). - Use class:nomeClasse={condicao} para mudar a cor do botão baseado no tipo. 2. Alerta Dinâmico: - Crie um componente Alerta.svelte que tenha um <slot> para a mensagem. - Adicione uma animação de "fade-in" quando o alerta aparecer. 3. Página de Demonstração: - No App.svelte, coloque várias instâncias dos botões e alertas para demonstrar as variações de cores e estilos.

📤 O que entregar?

  • Pasta src/lib com os componentes de estilo.
  • Screenshot da página de demonstração mostrando as cores diferentes dos botões.

Projeto 09 - SPA de Catálogo de Filmes 🗺️

Objetivo: Implementar o roteamento em uma aplicação Svelte para simular a navegação entre múltiplas páginas.

🚀 Desafio

Crie um catálogo de filmes com 3 páginas: 1. Home (/): Exibe uma mensagem de boas-vindas e os filmes em destaque. 2. Sobre (/sobre): Explica o propósito do site. 3. Detalhes (/filme/:id): Exibe o ID do filme selecionado na URL. 4. Menu de Navegação: Deve estar visível em todas as páginas e usar use:link do svelte-spa-router.

📤 O que entregar?

  • Arquivo App.svelte com a configuração das rotas.
  • Screenshot da página de "Detalhes" mostrando um ID numérico na URL e no texto da página.

Projeto 10 - Sistema de Idiomas Global 📦

Objetivo: Usar Svelte Stores para gerenciar uma configuração que precisa estar acessível em todos os componentes (Internacionalização básica).

🚀 Desafio

Crie um seletor de idiomas que mude os textos do site globalmente: 1. Store: Crie uma store idioma (iniciando como 'pt'). 2. Componente Seletor.svelte: Um conjunto de botões que altera o valor da store. 3. Componentes Variados: - No Header, exiba "Bem-vindo" ou "Welcome". - No Footer, exiba "Contato" ou "Contact". 4. Auto-subscription: Use o prefixo $ para acessar o valor da store de forma simplificada.

📤 O que entregar?

  • Arquivo src/stores/idiomaStore.js.
  • Screenshot do site em Português e outro em Inglês (após clicar no botão).

Projeto 11 - Buscador de Repositórios GitHub 🌐

Objetivo: Integrar o frontend com a API real do GitHub, tratando estados de carregamento com o bloco {#await}.

🚀 Desafio

Crie um buscador de repositórios públicos: 1. Input: O usuário digita o nome de um usuário do GitHub. 2. Chamada de API: Busque os repositórios usando a URL: https://api.github.com/users/[USUARIO]/repos. 3. Interface: - Use {#await} para mostrar um ícone de carregamento ou o texto "Buscando...". - No bloco {:then}, liste o nome de cada repositório e a quantidade de estrelas (stargazers_count). - No bloco {:catch}, mostre a mensagem: "Usuário não encontrado ou erro de conexão".

📤 O que entregar?

  • Arquivo App.svelte contendo a função de fetch e o bloco await.
  • Screenshot da lista de repositórios carregada na tela.

Projeto 12 - Sistema de Gestão de Contatos 🏗️

Objetivo: Construir uma aplicação CRUD completa que interaja com uma API para persistir dados.

🚀 Desafio

Crie um gerenciador de contatos (Agenda): 1. Listagem (Read): Busque os contatos de uma API (ex: JSONPlaceholder). 2. Adicionar (Create): Um formulário que faz um POST e atualiza a lista. 3. Excluir (Delete): Um botão em cada contato que faz um DELETE e remove o item da tela. 4. Feedback: Desabilite o botão de enviar enquanto a requisição estiver em curso para evitar duplicidade.

📤 O que entregar?

  • Código completo do componente principal.
  • Screenshot do console do navegador (aba Network) mostrando a requisição POST sendo enviada com sucesso.

Projeto 13 - Timer com Histórico ⏳

Objetivo: Gerenciar recursos do navegador usando funções de ciclo de vida (onMount e onDestroy) para evitar vazamentos de memória.

🚀 Desafio

Crie uma ferramenta de produtividade (Pomodoro simplificado): 1. Timer: Um cronômetro regressivo que inicia em 25:00. 2. Ciclo de Vida: - O timer deve iniciar apenas quando o componente for montado. - O intervalo (setInterval) deve ser obrigatoriamente limpo quando o usuário mudar de rota ou fechar o componente. 3. Histórico: - Toda vez que o timer chegar a zero, adicione o horário da conclusão em um array de "Sessões Concluídas". - Exiba esse histórico em uma lista.

📤 O que entregar?

  • Arquivo App.svelte contendo as funções onMount e onDestroy.
  • Screenshot do timer rodando e da lista de sessões concluídas.

Projeto 14 - Reorganizando o Dashboard 🏛️

Objetivo: Aplicar padrões de arquitetura e organização de arquivos para tornar um projeto desorganizado em algo profissional.

🚀 Desafio

Refatore seu projeto da Aula 05 (Dashboard de Perfil) seguindo as boas práticas: 1. Estrutura: - Mova todos os componentes visuais para src/lib/components. - Mova a lógica de dados (como arrays de ícones ou formatadores) para src/utils. 2. Padronização: - Renomeie os arquivos para seguir o padrão PascalCase.svelte (ex: UserCard.svelte). 3. Componente Base: - No App.svelte, mantenha apenas a importação dos componentes e a montagem do layout. - Use um <Layout> decorativo se possível para envolver a aplicação.

📤 O que entregar?

  • Print da estrutura de pastas do VS Code aberta (src expandida).
  • O arquivo App.svelte refatorado e limpo.

Projeto 15 - Portfólio no Ar 🚀

Objetivo: Publicar um projeto real na internet, configurando variáveis de ambiente e o processo de build.

🚀 Desafio

Escolha seu melhor mini-projeto feito até aqui e coloque-o em produção: 1. GitHub: Suba o código para um novo repositório público. 2. Variáveis: Se seu projeto usa alguma API, crie um arquivo .env (ex: VITE_API_URL=...) e certifique-se de que ele está no .gitignore. 3. Deploy: - Conecte o repositório na Vercel ou Netlify. - Configure as "Environment Variables" no painel da plataforma. 4. Build: Verifique se o build foi concluído com sucesso e se o site está acessível via URL pública.

📤 O que entregar?

  • Link do seu projeto rodando (URL da Vercel/Netlify).
  • Link do repositório no GitHub.

Projeto 16 - Consolidação Final 🚩

Objetivo: Realizar a entrega final do projeto escolhido na Aula 16, aplicando todos os requisitos técnicos exigidos.

🚀 Desafio

Este é o momento de finalizar sua aplicação escolhida (Task Manager, Dashboard ou E-commerce): 1. Revisão Final: Verifique se todos os requisitos (Componentes, Reatividade, Store, API, Roteamento e Estilo) foram atendidos. 2. Polimento: Adicione feedback de carregamento (loading) e tratamento de erros amigáveis. 3. Documentação: Escreva um arquivo README.md no seu repositório explicando: - O que o projeto faz. - Como rodar localmente (npm install -> npm run dev). - Quais tecnologias foram usadas.

📤 O que entregar?

  • Link do repositório final no GitHub.
  • Vídeo curto (screencast de até 1 minuto) ou GIF demonstrando as principais funcionalidades da aplicação funcionando.
  • Screenshot da estrutura final de componentes e stores.

Quizzes

🧠 Quizzes de Fixação

Lista completa das 20 unidades de quizzes organizadas em 5 módulos didáticos.

🧠 Quiz 01 – Introdução ao Desenvolvimento Frontend Moderno 🌐

  1. Qual é o conceito fundamental e objetivo principal de Introdução ao Desenvolvimento Frontend Moderno 🌐?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Introdução ao Desenvolvimento Frontend Moderno 🌐?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Introdução ao Desenvolvimento Frontend Moderno 🌐, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Introdução ao Desenvolvimento Frontend Moderno 🌐?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Introdução ao Desenvolvimento Frontend Moderno 🌐 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Introdução ao Desenvolvimento Frontend Moderno 🌐, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Introdução ao Desenvolvimento Frontend Moderno 🌐?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Introdução ao Desenvolvimento Frontend Moderno 🌐 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Introdução ao Desenvolvimento Frontend Moderno 🌐 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Introdução ao Desenvolvimento Frontend Moderno 🌐 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 02 – Introdução ao Svelte 🏗️

  1. Qual é o conceito fundamental e objetivo principal de Introdução ao Svelte 🏗️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Introdução ao Svelte 🏗️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Introdução ao Svelte 🏗️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Introdução ao Svelte 🏗️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Introdução ao Svelte 🏗️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Introdução ao Svelte 🏗️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Introdução ao Svelte 🏗️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Introdução ao Svelte 🏗️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Introdução ao Svelte 🏗️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Introdução ao Svelte 🏗️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 03 – Estrutura de Projeto e Sintaxe Básica 📜

  1. Qual é o conceito fundamental e objetivo principal de Estrutura de Projeto e Sintaxe Básica 📜?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Estrutura de Projeto e Sintaxe Básica 📜?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Estrutura de Projeto e Sintaxe Básica 📜, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Estrutura de Projeto e Sintaxe Básica 📜?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Estrutura de Projeto e Sintaxe Básica 📜 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Estrutura de Projeto e Sintaxe Básica 📜, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Estrutura de Projeto e Sintaxe Básica 📜?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Estrutura de Projeto e Sintaxe Básica 📜 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Estrutura de Projeto e Sintaxe Básica 📜 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Estrutura de Projeto e Sintaxe Básica 📜 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 04 – Reatividade no Svelte ⚡

  1. Qual é o conceito fundamental e objetivo principal de Reatividade no Svelte ⚡?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Reatividade no Svelte ⚡?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Reatividade no Svelte ⚡, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Reatividade no Svelte ⚡?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Reatividade no Svelte ⚡ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Reatividade no Svelte ⚡, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Reatividade no Svelte ⚡?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Reatividade no Svelte ⚡ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Reatividade no Svelte ⚡ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Reatividade no Svelte ⚡ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 05 – Componentização 🧩

  1. Qual é o conceito fundamental e objetivo principal de Componentização 🧩?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Componentização 🧩?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Componentização 🧩, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Componentização 🧩?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Componentização 🧩 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Componentização 🧩, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Componentização 🧩?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Componentização 🧩 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Componentização 🧩 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Componentização 🧩 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 06 – Loops e Condicionais 🔁

  1. Qual é o conceito fundamental e objetivo principal de Loops e Condicionais 🔁?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Loops e Condicionais 🔁?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Loops e Condicionais 🔁, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Loops e Condicionais 🔁?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Loops e Condicionais 🔁 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Loops e Condicionais 🔁, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Loops e Condicionais 🔁?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Loops e Condicionais 🔁 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Loops e Condicionais 🔁 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Loops e Condicionais 🔁 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 07 – Eventos e Formulários ⌨️

  1. Qual é o conceito fundamental e objetivo principal de Eventos e Formulários ⌨️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Eventos e Formulários ⌨️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Eventos e Formulários ⌨️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Eventos e Formulários ⌨️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Eventos e Formulários ⌨️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Eventos e Formulários ⌨️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Eventos e Formulários ⌨️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Eventos e Formulários ⌨️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Eventos e Formulários ⌨️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Eventos e Formulários ⌨️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 08 – Estilização e Escopo de CSS 🎨

  1. Qual é o conceito fundamental e objetivo principal de Estilização e Escopo de CSS 🎨?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Estilização e Escopo de CSS 🎨?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Estilização e Escopo de CSS 🎨, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Estilização e Escopo de CSS 🎨?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Estilização e Escopo de CSS 🎨 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Estilização e Escopo de CSS 🎨, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Estilização e Escopo de CSS 🎨?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Estilização e Escopo de CSS 🎨 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Estilização e Escopo de CSS 🎨 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Estilização e Escopo de CSS 🎨 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 09 – Roteamento SPA na Prática 🗺️

  1. Qual é o conceito fundamental e objetivo principal de Roteamento SPA na Prática 🗺️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Roteamento SPA na Prática 🗺️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Roteamento SPA na Prática 🗺️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Roteamento SPA na Prática 🗺️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Roteamento SPA na Prática 🗺️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Roteamento SPA na Prática 🗺️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Roteamento SPA na Prática 🗺️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Roteamento SPA na Prática 🗺️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Roteamento SPA na Prática 🗺️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Roteamento SPA na Prática 🗺️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 10 – Stores e Gerenciamento de Estado 📦

  1. Qual é o conceito fundamental e objetivo principal de Stores e Gerenciamento de Estado 📦?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Stores e Gerenciamento de Estado 📦?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Stores e Gerenciamento de Estado 📦, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Stores e Gerenciamento de Estado 📦?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Stores e Gerenciamento de Estado 📦 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Stores e Gerenciamento de Estado 📦, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Stores e Gerenciamento de Estado 📦?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Stores e Gerenciamento de Estado 📦 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Stores e Gerenciamento de Estado 📦 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Stores e Gerenciamento de Estado 📦 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 11 – Consumo de API REST 🌐

  1. Qual é o conceito fundamental e objetivo principal de Consumo de API REST 🌐?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Consumo de API REST 🌐?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Consumo de API REST 🌐, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Consumo de API REST 🌐?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Consumo de API REST 🌐 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Consumo de API REST 🌐, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Consumo de API REST 🌐?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Consumo de API REST 🌐 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Consumo de API REST 🌐 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Consumo de API REST 🌐 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 12 – CRUD Completo com API 🏗️

  1. Qual é o conceito fundamental e objetivo principal de CRUD Completo com API 🏗️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de CRUD Completo com API 🏗️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em CRUD Completo com API 🏗️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em CRUD Completo com API 🏗️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de CRUD Completo com API 🏗️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em CRUD Completo com API 🏗️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em CRUD Completo com API 🏗️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a CRUD Completo com API 🏗️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar CRUD Completo com API 🏗️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a CRUD Completo com API 🏗️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 13 – Ciclo de Vida e Performance ⏳

  1. Qual é o conceito fundamental e objetivo principal de Ciclo de Vida e Performance ⏳?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Ciclo de Vida e Performance ⏳?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Ciclo de Vida e Performance ⏳, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Ciclo de Vida e Performance ⏳?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Ciclo de Vida e Performance ⏳ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Ciclo de Vida e Performance ⏳, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Ciclo de Vida e Performance ⏳?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Ciclo de Vida e Performance ⏳ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Ciclo de Vida e Performance ⏳ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Ciclo de Vida e Performance ⏳ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 14 – Boas Práticas e Arquitetura Frontend 🏛️

  1. Qual é o conceito fundamental e objetivo principal de Boas Práticas e Arquitetura Frontend 🏛️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Boas Práticas e Arquitetura Frontend 🏛️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Boas Práticas e Arquitetura Frontend 🏛️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Boas Práticas e Arquitetura Frontend 🏛️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Boas Práticas e Arquitetura Frontend 🏛️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Boas Práticas e Arquitetura Frontend 🏛️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Boas Práticas e Arquitetura Frontend 🏛️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Boas Práticas e Arquitetura Frontend 🏛️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Boas Práticas e Arquitetura Frontend 🏛️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Boas Práticas e Arquitetura Frontend 🏛️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 15 – Build, Deploy e Produção 🚀

  1. Qual é o conceito fundamental e objetivo principal de Build, Deploy e Produção 🚀?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Build, Deploy e Produção 🚀?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Build, Deploy e Produção 🚀, Deploy e Produção 🚀, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Build, Deploy e Produção 🚀?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Build, Deploy e Produção 🚀 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Build, Deploy e Produção 🚀, Deploy e Produção 🚀, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Build, Deploy e Produção 🚀?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Build, Deploy e Produção 🚀 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Build, Deploy e Produção 🚀 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Build, Deploy e Produção 🚀 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 16 – Projeto Final 🏆

  1. Qual é o conceito fundamental e objetivo principal de Projeto Final 🏆?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Projeto Final 🏆?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Projeto Final 🏆, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Projeto Final 🏆?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Projeto Final 🏆 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Projeto Final 🏆, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Projeto Final 🏆?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Projeto Final 🏆 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Projeto Final 🏆 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Projeto Final 🏆 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 17 – Reatividade Nativa com Stores e Runes 🚀

  1. Qual o propósito principal de Reatividade Nativa com Stores e Runes 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Reatividade Nativa com Stores e Runes 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Reatividade Nativa com Stores e Runes 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Reatividade Nativa com Stores e Runes 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Reatividade Nativa com Stores e Runes 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Reatividade Nativa com Stores e Runes 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Reatividade Nativa com Stores e Runes 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Reatividade Nativa com Stores e Runes 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Reatividade Nativa com Stores e Runes 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Reatividade Nativa com Stores e Runes 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 18 – Animações e Transições Integradas em Svelte 🚀

  1. Qual o propósito principal de Animações e Transições Integradas em Svelte 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Animações e Transições Integradas em Svelte 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Animações e Transições Integradas em Svelte 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Animações e Transições Integradas em Svelte 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Animações e Transições Integradas em Svelte 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Animações e Transições Integradas em Svelte 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Animações e Transições Integradas em Svelte 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Animações e Transições Integradas em Svelte 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Animações e Transições Integradas em Svelte 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Animações e Transições Integradas em Svelte 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 19 – Gerenciamento de Estado Global e Persistência 🚀

  1. Qual o propósito principal de Gerenciamento de Estado Global e Persistência 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Gerenciamento de Estado Global e Persistência 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Gerenciamento de Estado Global e Persistência 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Gerenciamento de Estado Global e Persistência 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Gerenciamento de Estado Global e Persistência 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Gerenciamento de Estado Global e Persistência 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Gerenciamento de Estado Global e Persistência 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Gerenciamento de Estado Global e Persistência 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Gerenciamento de Estado Global e Persistência 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Gerenciamento de Estado Global e Persistência 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 20 – Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀

  1. Qual o propósito principal de Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Projeto Capstone: Aplicação Svelte Autônoma Ultrafast 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

Slides

Configuração

Configuração do Ambiente 🛠️

Siga os guias abaixo para preparar seu computador para o desenvolvimento Svelte moderno.

Tip

Dica: Comece sempre pelo Setup 01. Sem o Node.js, as outras ferramentas não funcionarão corretamente.

Setup 01: Node.js e Gerenciadores de Pacotes 🟢

O Svelte requer o ambiente Node.js para rodar o compilador e as ferramentas de build (Vite).

1. Instalando o Node.js

  1. Acesse o site oficial: nodejs.org.
  2. Baixe a versão LTS (Long Term Support) - é a mais estável.
  3. Siga o instalador padrão do seu Sistema Operacional.

2. Verificando a Instalação

Abra o seu terminal (CMD, PowerShell ou Terminal do Linux/Mac) e digite: 

node -v
npm -v
Você deverá ver as versões instaladas (ex: v20.x.x).

3. Gerenciadores Alternativos (Opcional)

Embora o npm venha instalado, muitos desenvolvedores preferem o PNPM por ser mais rápido e economizar espaço em disco. 

npm install -g pnpm

4. NVM (Dica de Pro) 💡

Se você trabalha em vários projetos, instale o NVM (Node Version Manager). Ele permite trocar de versão do Node com um comando. - Windows: nvm-windows. - Linux/Mac: nvm.

Próximo Passo: Instalar o VS Code e Extensões 💻

Setup 02: VS Code e Extensões 💻

O Visual Studio Code é a ferramenta recomendada para desenvolver com Svelte devido ao excelente suporte da comunidade.

1. Instalando o VS Code

  1. Baixe em: code.visualstudio.com.
  2. Instale seguindo as recomendações padrões.

2. Extensões Essenciais para Svelte 🧩

Abra o menu de extensões (Ctrl+Shift+X) e instale:

  1. Svelte for VS Code: Oferece realce de sintaxe e autocompletar. (Obrigatória!)
  2. Prettier - Code formatter: Para organizar seu código automaticamente.
  3. Tailwind CSS IntelliSense: Se você for usar Tailwind.
  4. Error Lens: Ajuda a ver erros direto na linha de código.

3. Configurando o Formatter

Para que o Prettier formate seus arquivos .svelte corretamente: 1. Abra as configurações (Ctrl+,). 2. Pesquise por Default Formatter. 3. Selecione Prettier - Code Formatter. 4. Ative a opção Format on Save.

4. Temas Recomendados (Opcional)

  • One Dark Pro
  • Dracula Official
  • Catppuccin

Próximo Passo: Vite e Estrutura de Projeto 🚀

Setup 03: Vite e Estrutura de Projeto ⚡

O Svelte moderno utiliza o Vite para um desenvolvimento extremamente rápido.

1. Criando um Novo Projeto

No terminal, na pasta onde deseja salvar seus estudos, execute: 

npm create vite@latest meu-projeto-svelte -- --template svelte
1. Entre na pasta: cd meu-projeto-svelte. 2. Instale as dependências: npm install. 3. Rode o projeto: npm run dev.

2. Entendendo a Estrutura 📂

  • node_modules/: Onde ficam as bibliotecas instaladas.
  • public/: Arquivos estáticos (imagens, ícones).
  • src/: Onde você passará 99% do seu tempo.
    • App.svelte: O componente principal.
    • main.js: O ponto de entrada que inicia o Svelte.
  • package.json: A lista de dependências e scripts do projeto.

3. Versionamento com Git

Sempre inicie um repositório Git para seus projetos: 

git init
git add .
git commit -m "Primeiro commit"

4. SvelteKit vs Svelte puro

Neste curso, focamos no Svelte puro com Vite para aprender a base. Projetos maiores e complexos (com rotas no servidor) usam o SvelteKit.

Próximo Passo: DevTools e Debugging 🔍

Setup 04: Svelte DevTools e Debugging 🔍

Para debugar aplicações Svelte de forma eficiente, as ferramentas nativas do navegador são ótimas, mas a extensão oficial do Svelte é ainda melhor.

1. Svelte DevTools

Esta extensão adiciona uma aba "Svelte" ao seu console do desenvolvedor (F12), permitindo inspecionar o estado e as props de cada componente em tempo real. - Chrome: Link Chrome Web Store. - Firefox: Link Firefox Add-ons.

2. Inspecionando Elementos

Com o DevTools instalado: 1. Abra seu projeto rodando em localhost:5173. 2. Abra o console (F12). 3. Vá na aba Svelte. 4. Selecione um componente na árvore para ver suas variáveis atuais.

3. O comando console.log() 📢

No Svelte, você pode usar o log dentro das tags reativas para rastrear mudanças: 

<script>
  let contador = 0;
  $: console.log("O contador mudou para:", contador);
</script>

4. Error Lens no VS Code

Se você seguiu o Setup 02, o Error Lens mostrará erros de sintaxe instantaneamente na tela, sem que você precise rodar o código para descobrir o erro.

Finalizado! Agora seu ambiente está pronto para brilhar com Svelte. ✨

Sobre

Sobre o Curso

🎓 Desenvolvimento Frontend com Svelte

Este curso foi projetado para capacitar desenvolvedores na criação de interfaces web modernas, rápidas e eficientes utilizando o Svelte, um dos frameworks mais inovadores do ecossistema JavaScript.

🎯 Objetivos do Curso

  • Reatividade Nativa --- Compreender como o Svelte move o trabalho para o tempo de compilação, eliminando o Virtual DOM.

  • Componentização --- Dominar a criação de componentes reutilizáveis, encapsulamento de estilos e comunicação entre elementos.

  • Gerenciamento de Estado --- Aprender a utilizar Svelte Stores para gerenciar dados globais de forma simples e poderosa.

  • Integração com APIs --- Conectar o frontend a serviços externos, realizando operações CRUD e tratando estados de carregamento.

📚 O Que Você Vai Aprender

Módulo 1 – Fundamentos e Reatividade

  • Evolução do Frontend e SPA
  • O compilador Svelte vs Virtual DOM
  • Sintaxe Básica e Interpolação
  • Declarações Reativas ($:)

Módulo 2 – Componentização e UI

  • Props e Slot System
  • Loops (#each) e Condicionais (#if)
  • Eventos e Two-way Binding
  • Estilização Local e Global

Módulo 3 – Ecossistema e Estado

  • Roteamento SPA
  • Writable e Derived Stores
  • Consumo de Fetch API e Async/Await
  • Implementação de CRUD Completo

Módulo 4 – Avançado e Produção

  • Ciclo de Vida (onMount, onDestroy)
  • Performance e Lazy Loading
  • Arquitetura de Projetos Frontend
  • Build, Deploy e Variáveis de Ambiente

🛠️ Metodologia

Foco 100% prático. Cada aula introduz um conceito que é imediatamente aplicado em um mini-projeto. Ao final, você terá desenvolvido uma aplicação administrativa completa, pronta para o mercado.

Pronto para dominar o Svelte? Começar Agora

Roadmap do Projeto: Frontend com Svelte 🚀

Este documento rastreia a evolução do curso.

✅ Fase 1: Planejamento (Concluído)

  • Definição Syllabus (16 Aulas)
  • Escolha do Stack (Svelte + Vite)
  • Configuração MkDocs Material com Paleta Teal/Amber

✅ Fase 2: Conteúdo Base (Em Progresso)

  • [/] Criação das 16 Aulas (Markdown + Mermaid)
  • [/] Criação dos 16 Quizzes (Interativos)
  • [/] Criação dos 16 Conjuntos de Exercícios (2B, 2I, 1D)
  • [/] Criação dos 16 Slides (RevealJS)

✅ Fase 3: Projetos e UX

  • Definição dos 16 Projetos evolutivos
  • Implementação de exemplos TermynalJS
  • Diagramação Mermaid corrigida

🚀 Fase 4: Lançamento e Manutenção

  • Build Final --strict
  • Deploy GitHub Pages (gh-pages)
  • Testes de UX e Acessibilidade

Status Atual: Refatoração em Progresso Última Atualização: 22/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de Desenvolvimento Frontend com Svelte. Aqui você encontra recursos adicionais para apoiar seus estudos e aprofundar seu conhecimento técnico.

  • Slides

    • Acompanhe o conteúdo teórico com slides dinâmicos.

  • Exercícios

    • Pratique os conceitos de reatividade e componentes.

  • Quizzes

    • Valide seu aprendizado com testes rápidos por módulo.

  • Projetos

    • Construa um ecossistema completo para seu portfólio.

  • Ambiente

    • Guias de instalação (Docker, IDEs, Postman).

🏷️ Índice de Tags Didáticas

Navegue pelas aulas, exercícios e projetos do curso organizados por temas, tecnologias e conceitos fundamentais:

tags.md:145-167/name

Versão para Impressão

Esta página foi gerada automaticamente para impressão.