Here's my updated version of application structure with a great example to show it off.
The five pillars
The basis of the application structure are the five types of directories -
- Components(or templates)
Components (or templates)
Components (or templates) are basically where shared components exist. If I have a person model I want to make sure I have an
edit-person component as well as a
person-details component. This is so anywhere I am showing a person I can use the details view and anytime I need to make an edit, the template is ready to rock.
Models are self-explanatory. These are the classes that define the various models in your application, at each level. At the root level we have application-wide models such as the User.
Resources are kind of the catch all. Anything that acts as a supplement to your application goes here. I put various classes in charge of model collections here as well as utility functions.
The routes directory is a great way of grouping content. Typically if a route implements a child router all of it's content and files relevant only to that child route go nested inside to keep things clean.
You'll notice that the directories are specifically named. Ex.
services. This is so that as things grow the name duplication isn't necessary.
Example of why naming is important -
- app |-- person |-- person.js // view-model |-- person.html // view |-- person-model.js // model |-- person-service.js // model
There is a lot of duplication here. Instead by using the directory as the description of the purpose or intent our nested content becomes easier to read -
- app |-- routes |-- person |-- index.js |-- index.html |-- models |-- person.js |-- services |-- person.js
Now as we continue to grow we can decide when a level our of app is becoming too polluted or busy and refactor at that point instead of refactoring early.
Scaling the application
As the application continues to grow each of the routes start to have child routers for displaying the relevant content within. Each of the parent routes should start out by adding each of the five pillars of the application within themselves.
- app |-- components |-- edit-user.js |-- edit-user.html |-- user-details.js |-- user-details.html |-- models |-- user.js |-- resources |-- routes |-- persons |-- models |-- person.js |-- resources |-- services |-- person.js |-- index.js |-- index.html |-- admin |-- index.js |-- index.html |-- services |-- user.js
Each of the routes should have an
index.html. This is to act as the controller and define the child routes.
I'd love to hear your feedback below!