JSagon NodeJS Framework

Construa aplicações eficientes e escaláveis de maneira simples e rápida.

Estrutura - Pastas e arquivos

A JSagon Framework por padrão fornece uma arquitetura e estrutura de pastas e arquivos para facilitar o desenvolvimento e futura escalabilidade de acordo com o crescimento do projeto. Essa estrutura leva em consideração uma série de avaliações de projetos, sejam eles do Github, sites, cursos, entre outros.

Para explicar a estrutura, é essencial explicar a abordagem de Múltiplas Aplicações implementada e utilizada nesta framework.

Contexto: O motivo da implementação surgiu da necessidade constante de criar em um mesmo projeto (servidor ou aplicação), sistemas relacionados, mas de certa maneira distintos e sem misturar as responsabilidades e código. Um exemplo de implementação seria a criação de um site ou blog sobre finanças e um aplicativo de finanças. Ambos respectivamente seriam acessados via financas.com e financas.com/app. A implementação estrutural interna é baseada em uma divisão de pastas e arquivos por projetos, cada um em seu escopo. No decorrer deste artigo, ficará mais claro o sentido e o modelo de divisão propriamente dito.

Devido ao nível de detalhamento aqui apresentado, o projeto pode parecer complexo. Todas as pastas e arquivos serão explicados nos seus respectivos artigos separadamente (View, Controlador, etc), então não se preocupe. Mas entendido o conceito, tudo se encaixará facilmente.

O diretório responsável por toda a estrutura de desenvolvimento é o "dev", aquele que se encontra na raiz do projeto. Dentro dele existe as seguintes pastas:

public pasta responsável por armazenar os arquivos estáticos (css, js, imagens, etc)
resource pasta responsável por armazenar os códigos da view e outros (.hbs, scss, vuejs, entre outros)
src responsável pelo código "back-end"

Para facilitar o entendimento, é recomendado acompanhar com um projeto local criado.

Obs.: os exemplos utilizarão a extensão .ts (TypeScript), mas funcionará igualmente com JavaScript e sua extensão .js.

A pasta "src" inicialmente possui:

server.ts Arquivo e código ponto de entrada. Responsável por inicializar toda a aplicação.
config Pasta de configurações gerais. Comum a todas as aplicações.
http Implementações http gerais. Comum a todas as aplicações. Será apropriadamente explicado nos próximos artigos, mas em resumo possui implementação de middlewares gerais, entre outros.
app Pasta responsável pela estrutura e organização dos projetos.

O modelo abaixo exemplifica a estrutura em um modelo com múltiplos projetos. Quando escolhido uma arquitetura de aplicação única, a estrutura da pasta app será a mesma que a estrutura de um projeto único.

A estrutura dos projetos dentro do "app" segue o seguinte modelo: Cada projeto/app possui sua configuração e recursos, sua implementação é subdivida em Módulos, que por sua vez cada Módulo é subdivido em Controladores, Repositórios, etc.

Exemplo visual hierárquico das pastas e arquivos:

  • app: pasta com o código dos projetos propriamente dito.
    • nome do projeto 1 (exemplo: FinancasApp)
      • app.config.ts: configuração específica do projeto.
      • modules: módulos do projeto
        • nome do módulo 1 (Relatorio)
          • Config
            • Routes.ts
          • Controller
            • Ex.:GraficoController.ts
      • http: middlewares, kernel, etc.
    • nome do projeto 2 (exemplo: FinancasWebsite)

Obs.: os exemplos utilizarão a extensão .hbs (handlebars), mas servirão igualmente para outras View Engines.

O modelo abaixo exemplifica a estrutura em um modelo com múltiplos projetos. Quando escolhido uma arquitetura de aplicação única, a estrutura da pasta app será a mesma que a estrutura de um projeto único.

A pasta resource inicialmente possui:

  • views: pasta responsável pelos códigos html. Dentro dela se encontra:
    • default: views padrões, como error.hbs, e error404.hbs.
    • layouts: views de layout da aplicação, o arcabouço.
    • app pasta com o código dos projetos propriamente dito. Obs.: os nomes a seguir segue uma convenção interna automática com base no dev/src/app, exemplo: projeto "FinancasApp" que se torna "financas-app" em views/app). Seguindo o exemplo do código back-end da explicação do **src**, ficaria:
      • nome do projeto 1 (exemplo: financas-app)
        • nome do módulo 1 (relatorio)
          • nome do controlador (grafico)
            • nome da action.hbs (detalhe-relatorio.hbs)
          • Controller
            • Ex.:GraficoController.ts
      • nome do projeto 2

Os pontos aqui apresentados serão melhor detalhados e compreendidos na explicação de cada recurso separadamente. Ir para Controlador