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?