A 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:

1. I wanted a multi-page project (a web app or website).


2. I wanted my project to support different screen sizes and resolutions, in other words: I wanted it to be responsive.


3. I wanted the final product to be maintainable.


4. I wanted the final product to be performant.


5. 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

Every front-end project always includes libraries, jQuery plugins, and a lot of JavaScript and CSS files (or SCSS files in this case) for different purposes and aims. Blending all those elements means working with different technologies and putting them together means setting up a good front-end workflow. We would find ourselves having to manage a huge workflow that involves different technologies. That's why having everything organized in folders, following a pattern or a convention in order to keep things clear and neat, is really important.

We can choose to split all fundamental front-end components in macro-groups, such as the following:

• SCSS files


• scripts


• views

Can we we split them in smaller groups? Of course we can:

• SCSS
  
  
  
  • variables
  
  
  • mixins
  
  
  • common parts to every layout
  
  
  • single layouts
  
  
  
  


• js
  
  
  
  • 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:

Continue reading %A Good Front-End Architecture%

by Matt Carella via SitePoint