1

minha dúvida não é referente a códigos propriamente, mas sim em como organizar melhor os arquivos do projeto.

Sei que essa é uma questão que não possui uma resposta certa, nem a melhor resposta. Mas como estou desenvolvendo um projeto agora onde estou me deparando com diversas áreas e funções, gostaria de saber de vocês quais as dicas ou orientações que possam dar para melhorar essa organização e não me perder em meio a tantos arquivos no futuro.

Atualmente eu possuo uma organização neste estilo:

-js  //Arquivos Js necessários para rodar o app
    --angular.min.js
    --angular-animate.min.js
    --angular-local-storage.min.js
    --angular-touch.min.js
    --oc-lazyload.min.js
    --ui-router.min.js

-App //escrito por eu mesmo
    --controller    - todos os controllers
    --directives    - todos os directives
    --factory       - todas as factorys
    --app.js        - configurações principais (router, filter, config)

-Lib //modulo de terceiros
    --ngMask.min.js
    --ngTooltip.min.js
    --ngMap.min.js
    -- [..etc..]

Porém, depois de algumas aulas eu aprendi mais sobre modularizar o código e também consegui fazer o lazyload de arquivos. Ou seja, muito do código que eu possuo, vou poder segmentar de acordo com a área. Por exemplo:

Atualmente meu webApp possui 3 áreas distintas:

  • Usuário: qualquer pessoa que se cadastre no site;
  • Moderadores/Atendentes: pessoas que fazem o atendimento, verificação, mexem com algumas áreas restritas da empresa;
  • Administradores: Controlam fluxo de vendas, relatórios, etc.

Para isso estou pensando em utilizar o lazyload, para melhorar a segurança e velocidade do webApp, já que só vou carregar o módulo que for realmente necessário para aquela determinada view. Mas é ai que a coisa começa a complicar.

Em um esboço rápido estrutural que elaborei, essa foi a estrutura que obtive:

-App //escrito por eu mesmo
    --Controller
        ---ctrl-admin.js
        ---ctrl-empresa.js
        ---ctrl-comum.js
    --Directive
        ---dire-admin.js
        ---dire-empresa.js
        ---dire-comum.js
    --Factory
        ---fact-admin.js
        ---fact-empresa.js
        ---fact-comum.js
    --Config
        ---config.js
    --app.js //config da rota, autenticação, etc.


-Lib
    --main  //Arquivos Js necessários para rodar o app
        ---angular.min.js
        ---angular-animate.min.js
        ---angular-local-storage.min.js
        ---angular-touch.min.js
        ---oc-lazyload.min.js
        ---ui-router.min.js

    --modulos   //lib de terceiros, secundárias (tooltip, ngImago, etc.)
        ---main     //principais - comum a todos - (escritas por eu mesmo)
            ----ngLogin.min.js //processa login
            ----ngCart.min.js //carrinho de compras
            ----ngAlert.min.js //notificação de pedidos, mensagens, novo ticket, etc.

        ---sec      //secundarias - modular - (de terceiros)
            ----ngMap.js - somente carrega em view X
            ----ngMask.js - somente carrega em view Y
            ----ngTooltip.js - somente carrega em view Y, view Z
            [.. etc ..] 

Como vocês podem ver, essa estrutura começa a ficar um pouco 'bagunçada' e é necessário muito cuidado, pois posso começar a me perder, especialmente pois alguns desses arquivos (ou grande maioria) precisará passar por um concat/uglify.

E precisa ficar separado pois, por exemplo, os arquivos ctrl-admin, dire-admin e fact-admin, só serão carregados nas views referente aos administradores (controlados pelo ocLazyLoad).

Vocês teriam alguma sugestão? Best Practice? Sugestão ou algum guia que eu possa estudar e melhorar essa estrutura?

2 Respostas 2

3

O primeiro ponto que gostaria de abordar é com relação as libs, a maioria dos projetos Angular da atualidade, utilizam-se do gerenciador de dependências bower, o bower é responsável por controlar as versões das libs do projeto, e as salva por default na pasta bower_components, sendo assim, essa distribuição de libs que você está fazendo é diferente do comum e provavelmente mais difícil de dar manutenção.

Como você disse, não há certo e errado neste caso, mas eu acredito, que seria melhor separar os seus controladores, serviços e coisas do tipo, por módulos ao invés de pelo tipo, assim você consegue agrupar melhor o que faz parte de um determinado módulo angular.

Quanto ao nome dos arquivos criados pela aplicação, uma recomendação forte é que cada arquivo tenha seu nome, mais um '.' e o tipo dele, exemplo: cadastroUsuario.ctrl.js, usuarios.module.js, cadastroUsuario.service.js, isso permite que dentro de um determinado módulo, você consiga facilmente identificar o arquivo, e até escrever tarefas automatizadas baseadas nestes nomes.

Estas são recomendações simples de organização, além disso, também existem as recomendações de código, os guidelines a seguir apresentam ambos, um é do Todd Motto e outro do Jhon Papa, ambos muito conhecidos na comunidade angular.

https://github.com/toddmotto/angularjs-styleguide

https://github.com/johnpapa/angular-styleguide

8
  • Bacana! Depois que questionei, dei mais uma pesquisada e encontrei este: github.com/mgechev/angularjs-style-guide notei que muitos projetos vem usando a estrutura de organização por views, onde cada view (ex: clientes) possui os seus arquivos. cliente.ctrl.js, cliente.fact.js (ou concatenado). O que você acha dessa estrutura? No caso, seria até melhor criar micro módulos para cada view, se for seguir essa linha? Commented 11/11/2015 às 11:31
  • Eu particularmente não gosto muito, pois assim você remove a possibilidade de reúso da view ("apesar de isso raramente ser possível na separação por módulos"), mas é realmente de opinião, acredito que o mais importante é definir uma forma clara de organização, onde seja fácil navegar para corrigir um problema, e ela pode ser facilmente alterada posteriormente. Commented 11/11/2015 às 12:05
  • Pois é, para este projeto em específico não vai haver partilha de views, mas pretendo montar um fluxo padrão para projetos futuros. Sobre o Bower, já utilizei, mas não gostei do fato de fazer download de toda a lib, poluindo muito os arquivos. A não ser que eu tenha usado de modo errado, já que nunca foquei muito nisso também. Alguma orientação para uso do bower? Já utilizei também o npm, mas com os mesmos 'poréns'. Talvez se fosse possível pegar apenas os arquivos de distribuição. Commented 11/11/2015 às 12:18
  • Baixar tudo não é problema, o importante é gerar um build só com o que você precisa, existem muitas tasks do grunt que compilam apenas o necessário. Commented 11/11/2015 às 12:36
  • Sim, o grunt eu já tenho familiaridade. Utilizo ele para diversas tarefas. js, sass, css, etc.. Você entende bastante de AngularJs? Se importaria de entrar em contato para trocarmos umas ideias? Commented 11/11/2015 às 12:38
2

Minha experiência pessoal me levou a adotar uma estrutura similar à oferecida neste blog post.

Em resumo -

A maioria dos tutoriais focados em Angular mencionam uma estrutura similar a esta:

app/
    controllers/
        mainController.js
        otherController.js
    directives/
        mainDirective.js
        otherDirective.js
    services/
        userService.js
        itemService.js
    js/
        bootstrap.js
        jquery.js
    app.js
views/
    mainView.html
    otherView.html
    index.html

O problema é esta estrutura funciona apenas se você tiver um número pequeno de unidades de trabalho (como item, que é composto de um controller, uma diretiva e um serviço.) O quão fácil é organizar seu trabalho, ou procurar um arquivo, se seu projeto possui 30, 40 ou mais unidades? (por exemplo, eu tenho um projeto com 48.)

Ao invés disso, promova uma estrutura modularizada por funcionalidade:

app/
    shared/   // Componentes reutilizáveis ou Partials do site
        sidebar/
            sidebarDirective.js
            sidebarView.html
        article/
            articleDirective.js
            articleView.html
        account/
            accountService.js
    components/   // Cada componente é tratado como uma mini-aplicação Angular
        home/
            homeController.js
            homeService.js
            homeView.html
        blog/
            blogController.js
            blogService.js
            blogView.html
    app.module.js
    app.routes.js
assets/
    img/      
    css/      
    js/       
    libs/     
index.html

Este modelo torna a manutenção muito mais fácil, já que todas as peças necessárias para manter uma dada funcionalidade se encontram no mesmo diretório.

6
  • Exatamente por isso que estou com essa dúvida. Sempre trabalhei com o primeiro exemplo que você deu de exemplo (ou muito similar). Fiquei com receio de prosseguir, pois os demais exemplos era como o seu segundo exemplo. Apesar de gerar uma quantidade de pastas muito grande, parece ser o melhor caminho. Se entendi bem, a pasta components seria, a grosso modo, uma pasta para cada menu que meu app tenha, certo? e o shared para cada módulo, ex.: carrinho de compras, sistema de alertas, etc.. Commented 11/11/2015 às 16:27
  • @CelsomTrindade correto - ou, pense dessa maneira: components conteria todos os módulos unitários da sua aplicação, com subdiretórios se necessário (pense 'ordem de compra' e os filhos 'lista de ordens' e 'detalhes de ordem', por exemplo.) Shared conteria módulos compartilhados, como serviços, factories e directives.
    – OnoSendai
    Commented 11/11/2015 às 16:54
  • sim, perfeito! Mas uma questão. Esse exemplo que você deu de estrutura, seria voltado para o código dist? Pois vai haver 2 "versões" do mesmo código. A versão src, código bruto, e a versão dist, com concat, uglify, etc. Commented 11/11/2015 às 21:40
  • @CelsomTrindade Eu manteria a mesma estrutura para as duas versões. Imagine que toda a estrutura acima está dentro de um folder src. Após parsing a mesma estrutura está presente em um folder dist, porém minificada, post-LESS, etc.
    – OnoSendai
    Commented 11/11/2015 às 22:09
  • Sim, foi o que imaginei. No caso, talvez um concat dos arquivos que envolvem a mesma view. No caso, teria apenas home.min.js ao invés de home.controller.js e home.directive.js. Muito obrigado pela ajuda. Para mim é muito valiosa, pois tudo que sei sobre o assunto foi por pesquisas no google e pela comunidade SO. Commented 11/11/2015 às 22:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .