Originally published at: http://www.sitepoint.com/good-front-end-architecture/
Setting up a good front-end architecture is a fundamental step to start developing a web app or a website. Good practices and coding conventions are essential, but what about the structure? How can we conceive a good architecture that is maintainable in time? But most of all, where should we start from?
When I started thinking about the problem, I realized I needed a couple of things:
- I wanted a multi-page project (a web app or website).
- I wanted my project to support different screen sizes and resolutions, in other words: I wanted it to be responsive.
- I wanted the final product to be maintainable.
- I wanted the final product to be performant.
- I wanted to reuse the same template for any future project.
The right tools
Nowadays we have a lot of cool tools that can help us in a modern front-end developing workflow. So, in facing points 1 and 2 I told myself I needed a breakpoint-based CSS architecture that could help me support different devices and desktop sizes. On the other hand, I also knew that such huge amount of CSS and files could be a bit messy (and so incompatible with point 3.), that’s why I decided to start using a CSS preprocessor (which was Sass with Compass in my case).
And what about the point 4? The answer was easy: I decided to use Gruntjs. Finally, what about point 5? Even in that case, the answer was there: Yeoman, the best solution in my opinion.
Organizing the workflow
We can choose to split all fundamental front-end components in macro-groups, such as the following:
- SCSS files
Can we we split them in smaller groups? Of course we can:
- common parts to every layout
- single layouts
- libraries (such as jquery, angularjs, gAnalytics and so on…)
- plugins (typically jquery plugins)
- controllers (I mean controllers such as angularjs controllers)
In a templating based architecture (for example using blade.php or jade with nodejs) we can also split views as follows: