Pular para conteúdo

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