2016-03-04 14 views
8

Sto lavorando a diversi progetti Web e mi chiedevo se esiste una regola generale per quanto riguarda la struttura del progetto/cartelle?Struttura cartelle/directory del progetto Web - Best practice

Molte mie app sono costruite nella struttura in cui ogni tipo di file ha la propria directory. Per esempio:

└─┬root 
    | 
    ├─┬node_modules 
    | └ // node_modules (npm libraries) 
    | 
    └─┬www 
    | 
    ├─┬Libs // Js libraries 
    | | 
    | ├─┬Angular 
    | | └ … (.js files) 
    | | 
    | └─┬Bootstrap 
    | └ … (.js files) 
    | 
    ├─┬JavaScript // my Js files 
    | | 
    | ├─┬Services 
    | | └ … // my services (.js files) 
    | | 
    | ├─┬Controllers 
    | | └ … // my controllers (.js files) 
    | | 
    | ├─┬Directives 
    | | └ … // my directives (.js files) 
    | | 
    | └app.js // js entry point 
    | 
    ├─┬StyleSheets 
    | | 
    | ├─┬Less 
    | | └ … // my styles (.less files) 
    | | 
    | └─┬Css 
    | └ … // my styles (.css files) 
    | 
    ├─┬Views 
    | | 
    | ├─┬Pages 
    | | └ … // pages layout (.html files) 
    | | 
    | └─┬DirectivesTemplates 
    | └ // templates layout (.html files) 
    | 
    ├─┬Assets 
    | | 
    | ├─┬Fonts 
    | | └ … // app fonts (.ttf/ .woff files) 
    | | 
    | └─┬Images 
    | └ // app images (.jpg/ .png files) 
    | 
    ├─┬Data 
    | | 
    | └ // app info (.json files) 
    | 
    └index.html // web site entry point 

Tuttavia ultimamente vedo alcuni progetti, dove ogni modulo disponga di un proprio dispositivo di piegatura con il suo codice (file .js), vista (file HTML), stile (.css/file .less) e dati (file .json, immagini, font, ecc) Per esempio:

└─┬root 
    | 
    ├─┬node_modules 
    | └ // node_modules (npm libraries) 
    | 
    └─┬www 
    | 
    ├─┬Libs // Js libraries 
    | | 
    | ├─┬Angular 
    | | └ … (.js files) 
    | | 
    | └─┬Bootstrap 
    | └ … (.js files) 
    | 
    ├─┬Modules 
    | | 
    | ├─┬moduleA 
    | | | 
    | | ├moduleA.js //modules controller 
    | | | 
    | | ├moduleA.html //modules view 
    | | | 
    | | ├moduleA.less //modules style 
    | | | 
    | | └moduleA.json //modules data 
    | | 
    | ├─┬moduleB 
    | | | 
    | | ├moduleB.js 
    | | | 
    | | ├moduleB.html 
    | | | 
    | | ├moduleB.less 
    | | | 
    | | ├moduleB.json 
    | | | 
    | | └moduleB-icon.png 
    | | 
    | └─┬moduleC 
    | | 
    | ├moduleC.js 
    | | 
    | ├moduleC.html 
    | | 
    | ├moduleC.less 
    | | 
    | ├moduleC.json 
    | | 
    | └moduleC-font.woff 
    | 
    └index.html // web site entry point 

ci sono ogni pratica migliore per quanto riguarda la struttura del progetto?

+0

La prima struttura si presenta come un singolo sviluppatore o un team molto piccolo. Il secondo è per un progetto più ampio con più sviluppatori. Ogni modulo può essere rimosso e sostituito, aggiornato o modificato senza toccare il resto. – Tigger

+0

In Java, Maven è uno standard de facto. Non consente un'ampia creatività nelle strutture di cartelle. Stai usando java? –

+0

Sto lavorando principalmente su applicazioni lato client, sviluppate in javascript, con una grande varietà di framework come: angolare, ember, jquery, ionico, webpack, grunt ecc. (Su diversi progetti) –

risposta

5

Gli esempi mostrano due strutture di progetto comuni, organizzano file per tipo o per modulo. Preferisco quest'ultimo (codice separato in moduli) e vedo che viene usato molto per i framework frontend javascript. È qualcosa che lo Angular style guide (un buon riferimento per le migliori pratiche angolari) si riferisce a folders by feature.

Faccio riferimento alla guida di stile angolare perché i vostri esempi hanno mostrato progetti angolari, ma il concetto può essere tradotto in altri framework. Il codice è organizzato per caratteristica, quindi è facile trovare il file che devi modificare. Come qualcuno ha sottolineato in un commento, questa struttura del progetto si adatta bene all'app e al team di dimensioni crescenti.