Como faço para estruturar projetos para escalabilidade
Quando o projeto é pequeno, podemos facilmente “despejar tudo em uma pasta” e trabalhar. Mas, à medida que o aplicativo cresce, o caos na estrutura começa a diminuir o desenvolvimento, complicar o apoio e impedir novos membros da equipe. Neste artigo, mostrarei como estruturar os projetos de front -end para serem escaláveis, previsíveis e convenientes para o trabalho em equipe. Princípios Antes de passar para a estrutura, sempre adendo a três regras :: Explícito é melhor do que implícito – uma pasta adicional é melhor que a mágica com importações obscuras. Os recursos são mais importantes que as camadas – em vez de “/componentes”, “/serviços”, tento destacar os módulos funcionais. Escalabilidade desde o primeiro dia – mesmo que o projeto seja pequeno, a estrutura deve permitir crescimento sem reestruturação. Estrutura básica do projeto SRC/ ├── APP/ # Configuração do nível do aplicativo │ ├── Provedores/ # Provedores de contexto, temas, roteadores │ ├── armazenamento/ # status global │ └── Config/ # Constantes). (Roteamento do nível da interface do usuário) ├── Utilitários compartilhados/ # reutilizáveis, componentes da interface do usuário, ajudantes └── Index.TSX # Ponto de entrada Digite Modo de tela Full Screen Sair Modo de tela completa Exemplo: entidades Os modelos de entidades/ armazena, APIs e componentes mínimos. Por exemplo, entidades/ TOMDO/: entidades/ └── TODO/ ├── API/ │ └── TODOAPI.TS # Operações de CRUD ├── Modelo/ │ ├ ulto Tipos.ts # Tipos de entidade Full │ └─ Store.ts # ZustAnd/ Redux status └─ Ui/ └─ T paradoM. entidades/TODO/API/TODOAPI.TS exportar const FetchTodos = async () => {const res = aguardar fetch (“/api/Todos”); retornar res.json (); }; Digite o modo de tela cheia de tela cheia de tela cheia Exemplo: Recurso Um recurso combina várias entidades para resolver um problema. Por exemplo, Recursos/Todolist/: Recursos/└── Todolist/├── UI/│ └── Todolist.TSX └── Modelo/└── Hooks.ts # ganchos locais Digite Modo FullScreen Exit Modo FullScreen // Recursos/TODOLIST/UI/TODOLIST.TSX IMPORTE {Usefflect; importar {fetchtodos} de “@/entities/TODO/API/TODOAPI”; importar {tdoitem} de “@/entities/TODO/UI/TODOITEM”; Função de exportação Todolist () {const [todos, setTodos] = Usestate ([]); useeffect (() => {fetchTodos (). Então (settodos);}, []); retornar (
))} div>); } Digite o modo de tela cheia de tela FullScreen Modo Exemplo: uma página Páginas Colete recursos e entidades em uma tela pronta. Páginas/└── Home/└── HomePage.TSX Digite Modo FullScreen Mode Função de exportação homepage () {return (
Minha tarefah1>
principal>); } Digite o modo de saída de tela cheia de tela cheia compartilhada – sempre em altitude compartilhada/ contém tudo o que não depende de uma entidade ou recurso específico: Botões de Ui/ # compartilhados/ ├─— UI/ #, shares shart shart shart shart shart shart shart shart shartfcreen Mode // ShartScret Functled Mode/ SHARTS SHARTST SHARTST SHARTS SHARTST SHARTST SHARTST SHARTST SHARTS/ Api Basic http Enter FullScreen Mode FullScreen(URL: String, Options?: requestInit): Promise {const res = aguarda buscar (url, opções); if (! Res.ok) lançar um novo erro (“erro de rede”); retornar res.json (); } Digite o modo de saída do modo de tela cheia por que funciona, é fácil para um novo desenvolvedor navegar: essenciais → Recursos → Página. O código pode ser dimensionado: novos recursos são adicionados sem revisar toda a arquitetura. Shared/ permanece compacto e previsível, sem vazar a lógica de negócios. Conclusão Essa estrutura cresceu de projetos reais, de pequenos projetos de animais de estimação a aplicações com dezenas de desenvolvedores. Não é o único correto, mas evita o “código de espaguete” e facilita a manutenção. E como você estrutura projetos? Compartilhe sua experiência nos comentários.👇
Fonte
Fonte
