Ao iniciar um novo projeto de Single Page Application (SPA), uma das decisões mais cruciais é a organização das pastas do projeto. Uma estrutura bem definida pode simplificar o desenvolvimento, a manutenção e a colaboração com outros membros da equipe.
Neste artigo, explorarei uma estrutura de pastas para iniciar uma aplicação, visando torná-la flexível e escalável ao longo do desenvolvimento.
É importante notar que essa abordagem é especialmente útil para frameworks que não oferecem uma estrutura de pastas altamente opinativa por padrão.
Arquitetura dos diretórios
A seguir, apresento uma visualização da arquitetura de diretórios que recomendo para a organização de projetos de SPA:
/src
│
├── /core
│ ├── (Funcionalidades essenciais para inicializar a aplicação)
│
├── /components
│ ├── (Componentes de apresentação)
│
├── /widgets
│ ├── (Componentes independentes)
│
├── /services
│ ├── (Serviços para comunicar com a API)
│
├── /domain
│ ├── (Tipos e utilitários específicos da aplicação)
│
└── /routes
├── (Páginas da aplicação)
Essa estrutura proporciona uma separação clara de responsabilidades, facilitando o desenvolvimento, manutenção e escalabilidade do projeto.
Na continuação deste artigo, explicarei a responsabilidade de cada pasta.
/core
Esta pasta é utilizada para armazenar o código necessário para inicializar o seu aplicativo e carregar funcionalidades essenciais. Aqui residem os serviços essenciais, componentes e outras funcionalidades que são utilizadas em várias partes da aplicação.
/components
Aqui ficam os componentes reutilizáveis da sua aplicação focados na apresentação dos dados ao usuário.
/widgets
Os componentes nesta pasta são projetados para serem incorporados nas páginas de forma independente. Eles utilizam serviços para buscar os dados necessários e fazem uso de marcação e outros componentes para exibi-los.
O ideal é que esses componentes sejam customizáveis apenas em aspectos básicos de estilização, como cores, fontes e tamanhos. Eles não devem receber dados diretamente, pois devem ser capazes de buscar por conta própria.
/services
Nesta pasta, você deve colocar os serviços responsáveis por se comunicar com a API do seu backend. Esses serviços podem incluir lógica de autenticação, chamadas HTTP e manipulação de dados.
/domain
Esta pasta abriga tipos e utilitários específicos da aplicação. Aqui você encontrará definições de tipos de dados, funções, classes e lógica de negócios que são específicas para o domínio da aplicação.
/routes
Os componentes nesta pasta combinam outros componentes para criar páginas completas que são exibidas quando o usuário acessa determinadas URLs.
Dica Adicional:
Além da estrutura de pastas, uma prática complementar valiosa é ter um ou varios(em cada diretório) arquivos README.md contendo informações sobre o propósito de cada pasta, orientações de uso, e quaisquer outras informações relevantes para os desenvolvedores que interagem com o código no futuro.
Conclusão
Lembre-se de que não há uma abordagem única que funcione para todos os projetos. A estrutura apresentada neste artigo é apenas uma sugestão e pode ser adaptada conforme as necessidades específicas do seu projeto.
Experimente esta estrutura em seu próximo projeto e ajuste conforme necessário para atender às suas necessidades.
Espero que este artigo tenha sido útil para ajudá-lo a começar com o pé direito em seus projetos SPA!