Part I

Standards

Improving maintainability with style guidelines

Do we need standards?

Principles of maintainability

Maintainable code is:

• readable
• consistent
• predictable
• documented
• testable

Readable code

• coding conventions
  • indention levels
  • statement termination
  • line length
  • line braking
  • blank lines
  • curly braces
• naming conventions
  • variablesAndFunctions
  • CONSTANTS
  • Constructors
  • _otherConventions
  • $jQueryCollection

Consistent code

When you establish coding and naming conventions
stick to them!

Ideally code should look as if it was written by the same person.

Predictable code

Avoid complexity and stick to the programing principles

KISS, DRY, YAGNI, loose coupling, separation of concerns, open/closed, single responsibility, IoC

In JavaScript you have to think asynchronous

so it will be better if you are familiar with events, callbacks & promises

Documented code

Why I see you are all embraced?

One of the most important habits, yet hardest to follow.

Testable code

Embraced again?

TDD, BDD... No mater how you name it. What is important you will always write code you only need. Unit test will also warn anyone who will try to brake your implementation.

Part II

Modules

Improving maintainability with modules

Principles of modularity

• specialized
• independent
• decomposable
• recomposable
• substitutable

No out of the box solution yet

but we can do this:

• Object literal notation
• Module pattern
• CommonJS modules
• AMD modules

Object literal notation

In JavaScript functions are first-class citizens and we can make strong use of it.

Example

var myCart = {

  totalAmount: 0,

  items: [],

  placeholder: document.getElementById('#cart'),

  addItem: function (item) {
    this.items.push(item);
    this.totalAmount += item.price;
  }

};
          

Pros

• Simple implementation
• Relatively easy to create instances with Object.create

Cons

• No encapsulation, easy to overwrite property
• Variables may leak

Module pattern

Lets add closure concept to the object notation.

Example

var myCart = function () {

  var totalAmount = 0,
      items = [],
      placeholder = document.getElementById('#cart');

  return {
    addItem: function (item) {
      items.push(item);
      totalAmount += item.price;
    },
    total: function () {
      return totalAmount;
    }
  };

};
            

But what about dependencies?

Inject dependencies

var myCart = (function ($) {

  return function cart() {

    var totalAmount = 0,
        items = [],
        placeholder = $('#cart');

    return {
      addItem: function (item) {
        items.push(item);
        totalAmount += item.price;
      },
      total: function () {
        return totalAmount;
      }
    };

  };

})(jQuery);
            

How about automatic dependency resolution?

Impossible without additional tools.

Pros

• Clean and flexible model
• Relatively easy to create instances
• Encapsulation
• Dependency injection

Cons

• Methods added later cannot access privates
• Hard to test private parts of module
• No automatic dependency resolution

CommonJS modules

Modules/1.0

CommonJS implementations

• Node.js
• CouchDB
• RingoJS
• many more...

Example

var $ = require('jquery');

module.exports = function cart() {

  var totalAmount = 0,
      items = [],
      placeholder = $('#cart');

  var prototype = {
    addItem: function (item) {
      items.push(item);
      totalAmount += item.price;
    },
    total: function () {
      return totalAmount;
    }
  };

  return Object.create(prototype);  

};
            

What about browser?

AMD modules

Modules/AsynchronousDefinition

AMD API

• define(id?, dependencies?, factory);
• define.amd
• require(dependencies, callback);

AMD libraries

• RequireJS
• curl.js
• Nodules

Example

define('myCart', ['jQuery'], function ($) {

  return function cart() {

    var totalAmount = 0,
        items = [],
        placeholder = $('#cart');

    var prototype = {
      addItem: function (item) {
        items.push(item);
        totalAmount += item.price;
      },
      total: function () {
        return totalAmount;
      }
    };

    return Object.create(prototype);  

  };

});
            

require(['myCart'], function (myCart) {
 
  var cart = myCart();
  cart.addItem({price: 5});
  
});
            

Compatibility

• jQuery (as of 1.7+)
• shim config

AMD + CommonJS

UMD

Universal Module Definition

Example

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof exports !== 'undefined') {
    module.exports = factory();
  }
})(this, function () {
  return function cart () {
    // module body
  };
});              
            

This will work in Node.js and in the browser
(with RequireJS for example).

Feature

ECMAScript modules

• Will be implemented in ECMAScript 6 Harmony
  (aka. JavaScript.next or ES.next)
• Don't confuse with class - ES.next will have it too
• Still working draft...

Example

module Cart {
  import something from otherModule 

  var internalData;
  
  function internalFunction() {}
 
  export function addItem(item) {}
  export function total() {}
}             
            

import {addItem, total} from Cart;

addItem({ptice: 5});
            

Use Test it today

• Traceur demo
• Harmonizr
• Require HM
• ES6 Module Loader

Controversy

Proposed solution is not compatible with currently adopted solutions like CommonJS or AMD.

Part III

Automation

Improve maintainability with automation

Why?

• Save you time
• Focus on your code
• Clean workflow

What?

• Building deployment packages
• Code analysis (code lint)
• Unit tests and code coverage
• Documentation update

When?

• development
• deployment

Building deployment packages

• command line
  

  npm install -g requirejs

  node r.js name=main out=main.js

• automation tools
  Grunt: grunt-contrib-requirejs
  Gulp: gulp-requirejs