AngularJS best practices – Introduction

This blog post is the first in a series about best practices in AngularJS.
The purpose of this introduction is to explain why defining the right standards for your project is so crucial.

First, let’s face it… JavaScript sucks!

  • Lack of module system
  • Weak-typing
  • Finicky equality/automatic conversion
  • The keyword “this” is ambiguous, confusing and misleading
  • Semi colon insertion
  • Implied global declaration
  • And so on…

Example 1: hoisting in JavaScript

var x = 'Hello';
var y = 'World';

(function() {
    console.log(x);
    console.log(y);

    var y = '!';

    console.log(y);
})();

Surprisingly, the result isn’t

Hello World !

nor

Hello !!

but instead

Hello undefined !

The reason is that in JavaScript, not only are all the declarations moved to the top of current scope, but the assignments are left in place. That’s why the result seems so bizarre.

What really happens at runtime is

(function() {
    var y = undefined;
    console.log(x);
    console.log(y);

    y = '!';

    console.log(y);
})();

Example 2: Comparison craziness

var x = [0]; console.log(x == x) // true console.log(x == !x) // true
console.log(0.1 + 0.2 === 0.3) // false
console.log(true + true) // 2

And we can keep going for hours…
On a side note though, it’s good to know that the language is evolving and that some of these problems will disappear in the next releases.
For instance, JavaScript 1.7 will introduce the let statement to address some of the scoping issues.

With AngularJS being a JavaScript framework, we obviously have to understand how the language works, but not only.
We also have to understand what AngularJS is trying to achieve and how.

The philosophy of AngularJS

Before we start talking about best practices, let’s step back a little and review what the essence of AngularJS is.
Below is a selection of comments found on https://docs.angularjs.org.

  • It’s a very good idea to decouple DOM manipulation from app logic
  • It’s a really, really good idea to regard app testing as equal in importance to app writing
  • Testing difficulty is dramatically affected by the way the code is structured
  • It’s always good to make common tasks trivial and difficult tasks possible

Buzzworthy, 2 items out of 4 are talking about testability…
And that’s going to be my first tip:

No one shall approve a pull request that does not contain unit tests.

Interestingly, you’ll not only fundamentally improve your code quality, but you’ll also:

  • have a clean and structured code
  • facilitate future changes
  • have documentation

What’s next?

Well, first the good news! For the JavaScript part, you can write safer code by using existing tools*, and they should probably already be part of your build anyway.
The bad news though, is that there’s no such thing for AngularJS. That’s why having standards & best practices is so important.

To be continued…

* tools such as: JSLint, JSHint, JSCS, etc…

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn