“`html
Padrões que deixam seu projeto escalável
Dominando a Arquitetura de Svelte
Uma abordagem prática para organizar componentes, estado, rotas e acessibilidade — para você crescer sem virar refém
do “é só mais um ajuste”.
1) Estruture o projeto por responsabilidade, não por tela
Em vez de agrupar por páginas (ex.: /pages/users), agrupe por domínio (ex.: /features/users).
Isso evita que telas diferentes compartilhem lógica duplicada.
Crie componentes pequenos e previsíveis: entrada via props, saída via eventos (ou callbacks).
Evite componentes “mega” que conhecem demais.
Deixe claro o que é UI (componentes), o que é lógica (services/stores) e o que é integração (fetch, adapters).
A arquitetura fica mais testável e menos acoplada.
Um exemplo de estrutura que costuma funcionar bem:
/src com features, lib e routes (ou equivalente do seu setup).
2) Estado no lugar certo: stores por escopo (e não “globais por padrão”)
Se o estado só importa dentro de um fluxo (ex.: um formulário multi-etapas), prefira um store criado no
escopo do módulo do recurso. Você mantém o resto do app mais “limpo”.
Ex.: autenticação, preferências do usuário, tema, catálogo “alto nível”.
Tudo que não é compartilhado vira churn e causa rerenders desnecessários.
Estado (o “o que está acontecendo”) deve ser separado dos efeitos (o “como buscar/enviar”).
Isso te permite trocar a camada de integração sem mexer na UI.
Dica: quando o store fica com lógica demais (handlers, retries, mapeamentos), mova para uma camada de serviço.
O store vira orquestrador de estado — não um monólito.
3) Rotas e carregamento: previsibilidade com layouts, loaders e componentes de página
Use layouts para garantir estrutura consistente (header, navegação, breadcrumbs).
O que varia fica na página; o que é comum fica no layout.
Decida onde buscar dados: no carregamento da rota (quando disponível no seu setup) ou no cliente.
Mantenha a decisão consistente para reduzir bugs de “estado duplicado”.
Mesmo que a página seja “um pouco de tudo”, trate-a como composição:
página monta estado + chama componentes de domínio, evitando código espalhado.
Um padrão que ajuda: páginas devem ter pouca lógica. Elas conectam o domínio à UI.
A lógica real fica em serviços/stores dentro do recurso correspondente.
4) Qualidade estrutural: acessibilidade, performance e convenções
Garanta foco visível, contraste, semântica correta e mensagens para leitores de tela.
Componentes reutilizáveis devem assumir responsabilidades acessíveis desde o início.
Use derivação com parcimônia. Se um cálculo é caro, trate como seleção/derivação e evite recalcular
toda renderização sem necessidade.
Padronize prefixos para diferenciar UI e lógica (ex.: Button, Card para UI;
userService, usecases para lógica). Isso diminui a curva do time.
O efeito colateral de uma boa convenção: revisões ficam mais rápidas, porque você sabe onde procurar e o que esperar.
Exemplo: store + serviço com estados explícitos (loading/error/success)
<!-- src/features/users/stores/usersStore.js (exemplo) -->
import { writable } from 'svelte/store';
function createUsersStore() {
const { subscribe, set } = writable({
items: [],
loading: false,
error: null
});
return {
subscribe,
async load({ page = 1, pageSize = 20 } = {}) {
set({ items: [], loading: true, error: null });
try {
const res = await fetch(`/api/users?page=${page}&pageSize=${pageSize}`);
if (!res.ok) throw new Error(`Erro HTTP ${res.status}`);
const data = await res.json();
set({ items: data.items ?? [], loading: false, error: null });
} catch (err) {
set({ items: [], loading: false, error: err instanceof Error ? err.message : String(err) });
}
}
};
}
export const usersStore = createUsersStore();
// src/features/users/services/usersService.js (opcional: melhor ainda delegar fetch)
export async function fetchUsers({ page, pageSize }) {
const res = await fetch(`/api/users?page=${page}&pageSize=${pageSize}`);
if (!res.ok) throw new Error(`Erro HTTP ${res.status}`);
return res.json();
}
Esse desenho evita “estado fantasma” na UI: você sempre sabe se está carregando, se houve erro e como renderizar o sucesso.
Quando você encaixa esse store em uma página, a arquitetura fica previsível.
“`
Sou Apaixonado pela programação e estou trilhando o caminho de ter cada diz mais conhecimento e trazer toda minha experiência vinda do Design para a programação resultando em layouts incríveis e idéias inovadoras! Conecte-se Comigo!