Flat front-end application structure

As there are plenty of tools and libraries for front-end appliation development, the application has become complicated and structured. A neatly structured application could help you locate your code in a short time, which improve the readability of your project as well as saving your searching time in development.

Nowadays flat structure is appreciated in front-end applications. We abandon the way to managing files by file types, which obviously is a bad idea. Instead, functionality structure is preferred and universally adopted by different development teams. So as web applications. Basically the root of your project contains the following files and folders:

./distnode_modules/src    assets        /images        /global_styles        /fonts    components/        common/        home/        login/        me/        products/    config/    i18n/    index.html    main.jspackage.json.gitignore

We always seperate our source code from project configurations and tool configurations. It’s absolutely a good practice because tools and project settings might change as new tech develop fast. That’s why we place our code under src and other config and tools are in the same as src.

Inside src folder, we try to manage the files inline with app functionality, instead of seperating them in to script style, service, template etc in the past, which takes longer time to search files and content. We take everything as modules, including html, js and css, since they work together originally.

Inside component folder, we also make modules (files) ‘flat’ (parallel). Nesting module should be avoided whenever possible because when the app grows over-nesting will become a nightmare for code maintainance. Parallel structure decoples the dependencies between modules, which is the target your should go for in development. More important, for components that could be resued, you should try to abstract them to common folder. Think about refactor whenever a module you finish.