It makes me sad to see so many people still use old, archaic folder structure for their projects. It seems that while front-end
development has moved light years ahead, the structure people use did not change since the 90x. The general principle of
folder structure in 90x was organization by type, something like this:
applications became bigger and more complicated but folder structure did not change.
Consider the structure of the angular-seed project:
While this structure works fine for a small website or a brief demo how to use AngularJS, it quickly becomes very messy in case of a
Need For A Change
Historically, organization by type played an important role, but because of the new tendencies in front-end development
it is no longer useful for modern web apps.
Total separation of front-end and back-end. In the early days of the web, server side languages often generated
client side code. Such technologies as PHP, ASP, JSP, and the like all have templating capabilities and can be used inline to
generate HTML. However, this approach was replaced by REST APIs.
More business logic is moving to front-end. Many of the typical server side tasks are now done on the client. It is popular
data manipulation, image processing, interactive visualization, etc.
Rise of SPAs (Single Page Applications). Unlike traditional website that have pages, SPAs run within the context of a
single page. A SPA would never reload entire page, but refresh parts of id dynamically. This means that one page can be constructed from
a large number of assets.
Deep linking (aka routing). Deep linking is an inevitable consequence of the rise of SPAs. Now, when your application
has only one page, how do you utilize browser's back button? This is where routing provids a robust solution.
Lazy loading. This is another consequence of the rise of SPAs. When application is huge, you cannot make your users wait
while it is loading, even if it is relatively short.
Each point stated above contributes to the fact that your client side code base gets really big. The large it gets the more confusing it can
become. It is not clear at first as the files grouped by type appear to be neatly organized, but it becomes painfully apparent when you
get a new developer on the team and he starts tracing the relationship between app components to understand how they work.
When I come to a project that has already been under development I always start tracing the logic
from index.html, trying to determine which files are just libraries and which are the core of the application. Then I open the core file(s)
and try to follow the logic. Very soon I have a dozen of files opened from a number of directories and the further I go the more
difficult it is to remember how do these files work together.
Relational structure is very different. The main idea is that files are organized by their relationship to each other. It is
similar to modular organization. Consider the following structure:
As always the starting point is index.html, which loads all necessary libraries. Then the control for the application goes to app/start.js
that initialized the app and loads first module.
Clear. This structure provide very clear visibility into the application. If you are working on the user module
all the files you need are in app/user directory. There is no need to jump from folder to folder to find files you need.
Extensible. This structure is exceptionally extensible as it is clear to know where you need to add files if
you are working on a user module and it is easy to decide what should you do if you want to add a new module to the
Agile. This structure is also agile. If you have a module that grows large, you may create more subfolder in module's folder to
organize your files or you can split the module into two. If you application grows to include many modules the folder structure will
still be quite simple.
Testable. Organizing in modules also helps your QA team as they can only load and test modules you modified.
When I came on board with my current project the
team has already defined folder structure and it happened to be modular. Having worked on a project for over 2 years I have come to appreciate
this idea and think that it is a very useful one. I have also found a few other developers who made similar observations.