ESTRUTURA DE DIRETÓRIOS EM PROJETOS ANGULARJS

Sempre que vamos iniciar um novo projeto, seja com AngularJS ou algum outro framework, uma pergunta que vem à mente é como devemos organizar o projeto: arquivos, diretórios, dependências e etc.

Muitos desenvolvedores de software debatem para decidir sobre uma série de fatores. Isso inclui descobrir qual é a melhor abordagem a se seguir (não só em relação à estrutura de diretório, mas também sobre o arquivo em que cada script deve ser colocado), se é uma boa ideia quebrar a aplicação em módulos, e assim por diante.

Esta é uma decisão difícil e há muitas maneiras diferentes de decidir sobre estes fatores, mas na maioria dos casos, vai depender somente da finalidade e do tamanho da aplicação. Num primeiro momento, o desafio é definir uma estratégia que permita à equipe evoluir e melhorar a arquitetura conforme necessário. Desse modo as respostas relacionadas a decidir por uma estratégia ou outra certamente chegarão a medida em que o tempo passa, mas devemos ser capazes de executar alguma refatoração para manter a arquitetura saudável até que tenhamos essas respostas.

QUATRO MANEIRAS PARA ORGANIZAR O CÓDIGO

Há muitas maneiras, tendências e técnicas para organizar o código do projeto dentro de arquivos e diretórios. Vale lembrar ainda que os estilos podem variar conforme a necessidade de cada projeto. Contudo esse artigo visa apresentar os estilos mais utilizados e discutidos na comunidade.

ESTILO EM LINHA

Imagine que você precisa desenvolver um protótipo de aplicativo rápido e descartável. O objetivo do projeto é apenas fazer uma apresentação ou avaliar uma potencial ideia de produto. Neste caso seria suficiente o bom e velho arquivo index.html com declarações em linha para os scripts e estilos:

app/            -> arquivos da aplicação  
    index.html  -> principal arquivo html 
    angular.js  -> AngularJS   

Listagem 1 – estilo em linha.

Se a aplicação for aceita, com base na avaliação do protótipo, e vir a se tornar um novo projeto, é altamente recomendável que você crie uma estrutura inteira a partir do zero com base em algum dos estilos que serão apresentamos a seguir.

O ESTILO ESTEREOTIPADO

Esta abordagem é apropriada para pequenas aplicações com um número limitado de componentes tais como controladores, serviços, diretivas e filtros. Nesta situação, a criação de um único arquivo para cada script pode ser um desperdício. Assim, poderia ser interessante manter todos esses componentes num mesmo arquivo na forma estereotipada como mostra o seguinte código:

app/                    -> arquivos da aplicação
    css/                -> arquivos css  
        app.css         -> default stylesheet  
    js/                 -> componentes javascript da aplicação
        app.js          -> principal script da aplicação  
        controllers.js  -> script que contém todos os controllers 
        directives.js   -> script que contém todos as directives  
        filters.js      -> script que contém todos os filters  
        services.js     -> script que contém todos os services  
    lib/                -> bibliotecas javascript  
        angular.js      -> AngularJS  
    partials/           -> diretório para as partial views  
        login.html      -> login view  
        parking.html    -> parking view  
        car.html        -> car view  
    index.html          -> principal arquivo html  

Listagem 2 – estilo estereotipado.

Com o crescimento da aplicação, a equipe pode optar por quebrar alguns arquivos e gradativamente ir migrando para o estilo específico.

O ESTILO ESPECÍFICO

Manter um monte de código dentro de um mesmo arquivo é realmente difícil. Quando a aplicação atinge um determinado tamanho, a melhor opção pode ser começar a dividir os scripts em partes específicas logo que possível. Caso contrário, poderemos ter um monte tarefas de refatoração desnecessárias no futuro. Conforme segue:

app/                    -> arquivos da aplicação  
    css/                -> arquivos css  
        app.css         -> default stylesheet  
    js/                 -> componentes javascript da aplicação 
        controllers/        -> diretório para os controllers  
            loginCtrl.js    -> login controller  
            parkingCtrl.js  -> parking controller  
            carCtrl.js      -> car controller  
        directives/         -> diretório para os directives  
        filters/            -> diretório para os filters  
        services/           -> diretório para os services  
        app.js              -> principal script da aplicação 
    lib/                -> bibliotecas javascript  
        angular.js      -> AngularJS  
    partials/           -> diretório para as partial views  
        login.html      -> login view  
        parking.html    -> parking view  
        car.html        -> car view  
    index.html          -> principal arquivo html 

Listagem 3 – estilo específico.

Nesta abordagem, se o número de arquivos em cada diretório se torna muito grande, é melhor começar a pensar em adotar outra estratégia, como o estilo por domínio.

O ESTILO POR DOMÍNIO

Com um modelo de domínio complexo e centenas de componentes, uma aplicação corporativa pode facilmente se tornar uma bagunça se certas preocupações forem negligenciadas. Uma das melhores formas de organizar o código nesta situação é através da distribuição de cada componente numa estrutura de pastas que possuam o nome de domínio. Conforme segue:

app/                            -> arquivos da aplicação  
    application/                -> diretório do modulo aplicação   
        app.css                 -> stylesheet da aplicação  
        app.js                  -> principal script da aplicação  
    login/                      -> diretório para o modulo login  
        login.css               -> login stylesheet  
        loginCtrl.js            -> login controller  
        login.html              -> login view  
    parking/                    -> diretório para o modulo parking 
        parking.css             -> parking stylesheet  
        parkingCtrl.js          -> parking controller  
        parking.html            -> parking view  
    car/                        -> diretório para o modulo car  
        car.css                 -> car stylesheet  
        carCtrl.js              -> car controller  
        car.html                -> car view  
    lib/                        -> bibliotecas javascript  
    angular.js                  -> AngularJS  
    index.html                  -> principal arquivo html  

Listagem 4 – estilo por domínio.

CONCLUSÃO

Desde a criação da Web, muitas tecnologias relacionadas ao uso de HTML e JavaScript surgiram. AngularJS é um framework relativamente novo e ainda estamos descobrindo muitas coisas a seu respeito e principalmente sobre a melhor forma de se organizar um projeto. Muito vem da experiência de projetos passados, mas embora possa parecer que há um estilo certo para cada tipo de projeto, vale lembrar que cada projeto tem suas próprias particularidades e cada um dos estilos apresentados anteriormente podem ser adaptados conforme a necessidade de cada aplicação.

REFERÊNCIAS

[1] https://scotch.io/tutorials/angularjs-best-practices-directory-structure

[2] https://www.youtube.com/watch?v=Ma6VVQdvGq4

 

Por WILLIAN FUERTES BATISTA

Tecnólogo em Análise de Sistemas, +6 anos de experiência no desenvolvimento de aplicações Java Web. Participou de projetos nacionais e internacionais. Interessado em APIs REST e microservices na AWS.

Postado em: 26 de agosto de 2015

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário