Importance of a Style Guide

There is an great AngularJs focus group that meets every month. They have had some great presentations while providing free pizza to those who are present. I recommend anyone getting their hands dirty with AngularJS, attend this focus group.

One of the topics that has been addressed repeatedly in this focus group is the need for each attendee to generate a best practice style guide for AngularJs development unique to their company. A style guide for syntax, conventions, and structuring AngularJS applications. The groups argument is to never work in a vacuum. Not only is there a need for a syntax reference (which most companies already have), but also live styling examples that lay the foundation for all UI development. These styling examples are hosted on a live site, real-time with the most up-to-date UI color, font and CSS styling and AngularJs directive (module) examples; they are the baseline that should be referenced when generating new content instead of referencing code in the actually application code base. The idea is comparable to the Bootstrap and Ionic Framework public style guides. These are more UX/UI Pattern Guides; something I also feel is important to implement.

This focus groups has primarily centered their eye on a commonly referenced AngularJS standard guide on GitHub maintained by John Papa. It lists AngularJs best practices such as utilizing controllerAs syntax in a view and refactoring data calls into factory services. It not only lists AngularJS best practices but also a lot of JavaScript best practices like implementing ‘use stict’ and removing variables from the global scope with an IIFE. There are other comparable style guides out there by Todd Motto, Minko Gechev, and Topcoder-inc that are also good references; see these links at the end of this post.

I suggest anyone wanting to utilize AngularJS in their projects, reference this style guide and eventually assist in creating our own company’s AngularJs style guide that not only helps us in defining our AngularJS syntax and best practices but also helps in generating live styling examples that can lay the foundation for all future UI development.

Written on August 3, 2014