Sunday, May 10, 2015

Dependency Injection in JavaScript

Everyone who is coding with .NET, Java or PHP has heard about dependency injection (DI) or about inverse of control (IoC) or is using special framework which implements IoC/DI pattern. IoC and DI can be considered as synonyms. Recently applications written in JavaScript may consist of thousands of code lines and question may occur “Can dependency injection pattern be used in JavaScript”?

Before answering the question, lets figure out what is dependency injection and what are advantages and disadvantages of it.

Dependency injection is a software design pattern that allows to remove hard-coded dependencies and makes it possible to change them. Dependencies can be injected to the object via the constructor or via defined method or a setter property.

Advantages:

  • Dependency Injection decreases coupling between an object and its dependency
  • Dependency injection doesn't require any change in code behaviour, it can be applied an existing code
  • Dependency injection helps isolate the client from the impact of design changes and defects
  • Dependency injection allows the system to be reconfigured without changing the existing code
  • Dependency injection allows concurrent or independent development
  • Dependency injection allows to make code more maintainable and testable, because dependencies’ impact can be removed by replacing dependencies with mocks or stubs

Disadvantages:
  • When instantiating type you have to know which dependencies to use
  • Hides type’s instantiation and dependency resolving logic and if error happens, it can be much harder to figure out what's wrong
  • It can require to write more lines of codes
  • It can be slower when instantiating a type with keyword new, it’s related to meta data which has to be used while resolving instance

It’s time to move from theory to practice. Let's take a simple example. In this example we have driver who owns a car and the car can have one engine. 

common.png

Let’s write some code which implements defined class diagram above.

  function Engine() {
    this.hp = 256;
  }

  Engine.prototype.start = function () {
    console.log("Engine with " + this.hp + " hp has been started...");
  }

  function Car() {
    this.name = "wv";
    this.engine = new Engine();
  }

  Car.prototype.start = function () {
    if (this.engine) {
      this.engine.start();
    }
  }

  function Driver() {
    this.name = "tom";
    this.car = new Car();
  }

  Driver.prototype.drive = function () {
    if (this.car) {
     this.car.start();
    }
  }

  var driver = Driver();
  driver.drive(); 

  // Engine with 256 hp has been started...

From the first view everything looks OK. This code works. If you don’t need to test it or to change it in the future, this is code is fine. However, this code has some issues, one of which is that dependencies are hard-coded.

  function Engine(hp) {
    this.hp = hp;
  }

  Engine.prototype.start = function () {
    console.log("Engine with " + this.hp + " hp has been started...");
  }

  function Car(name, engine) {
    this.name = name;
    this.engine = engine;
  }

  Car.prototype.start = function () {
    if (this.engine) {
      this.engine.start();
    }
  }

  function Driver(name, car) {
    this.name = name;
    this.car = car;
  }

  Driver.prototype.drive = function () {
    if (this.car) {
     this.car.start();
    }
  }

  var driver = Driver("tom");
  driver.car = new Car("wv", new Engine(256)));
  driver.drive(); 

  // Engine with 256 hp has been started...

We have modified our existing code and it is extensible, but driver’s creation procedure has become more complex. In this case dependency injection container can help us. You can define driver’s details in configuration and when you want to instantiate driver you have to do it using dependency injection resolver. In the example below di4js library is used.

  di
    .register('engine')
      .as(Engine)
        .withConstructor()
          .param().val(256)
    .register('car')
      .as(Car)
        .withConstructor()
          .param().val('wv')
          .param().ref('engine')
    .register('driver')
      .as(Driver)
        .withConstructor()
          .param().val('tom')
          .param().ref('car');

  var driver = di.resolve('driver');
  driver.drive(); // Engine with 256 hp has been started…

As I mentioned before, that dependency injection may required to write more code as we can see in this example, on the other hand, there is one advantage that configuration is defined in a single place and it can reconfigured without changing the existing code base.

Autowire


If you do not want to define all dependencies manually, there is a solution. You can enable autowired option. If it is enabled for dependency resolver, all type's or instance's dependencies are resolved automatically by names. It may reduce the amount of code necessary to register types and their dependencies. With autowired option enabled you have to register only types. By default autowired is disabled.

Let’s simplify the example in order to show how autowired option works.

  function Engine() {
  }
  
  Engine.prototype.start = function () {
    console.log("Engine has been started...");
  }
  
  function Car() {
    this.engine = null;
  }
  
  Car.prototype.start = function () {
    if (this.engine) {
      this.engine.start();
    }
    console.log("Car has been started...");
  }
  
  di
    .autowired(true)
    .register('engine')
      .as(Engine)
    .register('car')
      .as(Car);
  
  var car = di.resolve('car');
  
  car.start();

We are going to see such output in console.

  "Engine has been started..."
  "Car has been started..."

One more and the most common scenario is mixed mode. By default you can allow to resolve dependencies automatically but some dependencies can be defined manually. Manually defined dependency has bigger priority.

If you are using different naming convention from the one given in the example it can be overridden easily. For more details read di4js documentation.

List of Dependencies


In some situations you may need to resolve a list of dependencies. To achieve this you have to make multiple registrations for single name.

Let’s modify our previous example and let’s say that driver can own more than one car at the same time which one to drive. Modified class diagram can be found below.

3ede8d33.png


First of all we need to modify driver’s definition. Property ‘car’ has to be renamed to ‘cars’ and additional parameter ‘name’ has to be added to method ‘drive’. Let’s look to our modified source code.

  function Driver(name) {
    this.name = name;
  }
  
  Driver.prototype.drive = function (name) {
    if (this.cars && name) {
      if (this.cars instanceof Array) {
        for (var i = 0; i < this.cars.length; i++) {
          if (this.cars[i].name === name) {
            this.cars[i].start();
            break;
          }
        }
      } else if (this.cars.name === name) {
        this.cars.start();
      }
    }
  }

It’s time to register driver’s dependencies and try to resolve it.

  di
    .register('engine')
      .as(Engine)
        .withConstructor()
          .param().val(256)
    .register('car')
      .as(Car)
        .withConstructor()
          .param().val('wv')
          .param().ref('engine')
    .register('car')
      .as(Car)
        .withConstructor()
          .param().val('ford')
          .param().ref('engine')
    .register('tom')
      .as(Driver)
        .withConstructor()
          .param().val('tom')
        .withProperties()
          .prop("cars").ref('car');


To instantiate driver by name we need to write a single code line.

  var tom = di.resolve('tom');

If we invoke method ‘drive’, we will get results which will be printed to console output.
  tom.drive('wv');

  // Engine with 256 hp has been started…
  // Car 'wv' has been started...

Using setter methods instead of properties / fluent interface


There is one more fancy feature. Some objects do not have properties, they have only setter methods and fluent interface. Such scenario with di4js library can be handled too. There is one limitation that these dependencies can not be resolved automatically.

Let’s modify our previous example and replace properties with setter methods.

class_diagram.png


New defined methods look like this.

  Car.prototype.setEngine = function (engine) {
    this.engine = engine;
    return this;
  };
  
  Driver.prototype.setCars = function (cars) {
    this.cars = cars;
    return this;
  }; 

Below you can see how modified type and its dependencies registration look.

di
  .register('engine')
    .as(Engine)
      .withConstructor()
        .param().val(256)
  .register('car')
    .as(Car)
      .withConstructor()
        .param().val('wv')
      .withProperties()
        .func('setEngine')
          .param().ref('engine')
  .register('car')
    .as(Car)
      .withConstructor()
        .param().val('ford')
      .withProperties()
        .func('setEngine')
          .param().ref('engine')
  .register('tom')
    .as(Driver)
      .withConstructor()
        .param().val('tom')
      .withProperties()
        .func('setCars')
          .param().ref('car');

If we resolve driver and invoke its method ‘drive’, we will get the same result as in previous examples.

Child container


In all examples global dependency resolver is used, it’s good for demo purposes and small apps. For bigger apps child dependency resolvers should be created per scope. It allows to get better flexibility and extensibility. Parent can be extended or overridden by child without making an impact on it.
First of all let’s register type in global dependency resolver and then try to resolve registered type by name.

  var DieselEngine = function () {
  };
  
  DieselEngine.prototype.start = function () {
    console.log("Diesel engine has been started...");
  };
  
  function Car(engine) {
    this.engine = engine;
  }
  
  Car.prototype.start = function () {
    if (this.engine) {
      this.engine.start();
    }
    console.log("Car has been started...");
  }
  
  di
    .autowired(true)
    .register('engine')
      .as(DieselEngine)
    .register('car')
      .as(Car);
  
  var car = di.resolve('car');
  car.start();

We are getting such results.

 "Diesel engine has been started..."
 "Car has been started..."

Now we can create a child container from the parent and then try to resolve overridden type.

  var PetrolEngine = function () {
  };
  
  PetrolEngine.prototype.start = function () {
    console.log("Petrol engine has been started...");
  };
  
  var child = di
    .create()
    .register('engine')
      .as(PetrolEngine);
  
  car = child.resolve('car');
  car.start();

Now we are getting different results.

  "Petrol engine has been started..."
  "Car has been started..."


Injection to function or object


There is a situation when instance creation can’t be controlled by dependency injection resolver. This situation may occur when you are adapting dependency injection for legacy code or instances are created by other components which you do not control. There is an option to inject dependencies to object or to function.

The first example demonstrates how dependencies can be injected to the function using parameters’ names.
  
  di.inject(function (car) { 
    car.start();
  });

In the second example an array notation is used to inject dependencies to the function.
  
  di.inject(['car', function (car) { 
    car.start();
  }]);

In the following examples I have demonstrated how to inject dependencies to the function. In following examples I am going to demonstrate how dependencies can be injected to an object.
  
  var car = new Car();
  di.inject(car);
  
  car.start();

There is the second method how to inject dependencies to object. You have to provide registration name which has to be used while injecting dependencies.
  
  var car = new Car();
  di.inject(car, 'car');
  
  car.start();


AMD


di4js is compatible with asynchronous module definition (AMD) and it can be loaded as ordinal module.
  
  define(['di4js'], function (di) {
    
    function Engine(hp) {
      this.hp = hp;
    }
  
    Engine.prototype.start = function () {
      console.log("Engine with " + this.hp + " hp has been started...");
    }
    
    di
      .register("engine")
        .as(Engine)
          .withConstructor()
            .param().val(256);
    
    var engine = di.resolve("engine");
    
    engine.start();
  
  });


Testing


As I mentioned before, if you are using dependency injection your code is maintainable and testable, because dependencies can be replaced with stubs or mocks easily.

In the following example I am going to use a well known testing framework Jasmine. I am going to demonstrate how we can test single method replacing dependencies with mocks.
  
  describe("car", function() {
    it("should start a car", function() {
      
      var engineMock = jasmine.createSpyObj('engine', ['start']);
      
      var car = new Car(engineMock);
      car.start();
      
      expect(engineMock.start).toHaveBeenCalled();
      
    });
  });

As we can see in the example such code can be tested easily.


Why di4js?


di4js is lightweight library which is inspired by Unity, Spring, AngularJS and others. di4js advantages are that it is a small library and it’s dedicated to solve a certain problem, thus it’s not a massive framework which tries to cover everything. It also doesn’t depend on other libraries, so it’s easy to embed it to an existing code base.

You may ask why it was created. The answer is simple. A range of libraries have been investigated and none of them satisfied expectations. The goal was to gather various components from various libraries to a single place. Initially it was written for internal purpose but now a decision has been made to share it. Maybe it will be useful for others too.

di4js can be used in projects which are not build on big frameworks such as AngularJS, because big frameworks have built in solution for dependency management. di4js can be useful when you depend on small dedicated libraries.

Usage


di4js library is released under MIT license. It can be used in modern browsers or in other JavaScript runtimes such as Node.js. Library can be installed from various package managers: nuget, npm or Bower.

To install di4js module for Node.js, this command should be used:

  npm install di4js

To install di4js for web browser, run the following command:

  bower install di4js

In Visual Studio di4js module can be installed using NuGet extension. To install di4js, run the following command in the package manager console.

  Install-Package di4js

If you want to look at the source code or to get more information about library or its usage, just vist https://github.com/gedbac/di4js.

Final thoughts


At the beginning we asked a question “Can dependency injection pattern be used in JavaScript?”. Now we can answer to that question and say that dependency injection can be easily used and is useful in JavaScript, but project size and complexity always has to be considered. Thus, problem has to be identified and after that corresponding solution has to be chosen. Consequently, we can say that every pattern which is used in other languages can be easily adapted to the JavaScript.

Saturday, June 8, 2013

How to define a class in JavaScript?

Introduction


JavaScript (JS) is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. At present JavaScript is becoming a more and more popular language. It was originally implemented as part of web browsers so that client-side scripts may interact with the user, control the browser, but now it can be used to write code for server side (Node.Js) or even can be used in databases to write queries (NoSQL).

JavaScript is a very flexible programming language. It can be easily extended with new features which are used in other programming languages.

As it was mentioned before, JavaScript is a prototype based scripting language. A prototype is an object and every created function automatically gets a prototype property that points to a new blank object. In earlier versions of JavaScript created objects were vulnerable, because they could be modified at any time accidentally or on purpose. In some cases it’s an advantage, but when it comes to writing libraries it is a hude disadvantage.

Situation changed when ECMAScript 5 version was released. It included many cool features, which allow to have flexibilty and create more reliable and steady libraries. It allows to implement open/close principle: “A module should be open for extension but closed for modifications”. It means that if client programmer wants to extend an existing object he must create his own derived object.

How to define a class in JavaScript?


There are no classes in JavaScript, because JavaScript is not a type based language like java or C#. Classes can be emulated in JavaScript. They are useful when you need to write complex applications.


First of all let’s create a class using JavaScript basic features and then optimize the same code with class4js library.

One of most important ECMAScript 5 addition was ‘strict mode’, which actually removes features from the language, making the program simpler and less error-prone. If you want to exploit the full potential of JavaScript, all written code should work in strict mode.

‘use strict’;

// You codes goes here...

In order to create a class, function which will represent a type and will act as constructor of that type should be declared.

var Shape = function () {
  this.__x = 0;
  this.__y = 0;
};

Now let’s create a prototype for the function. Then the function is instantiated and all properties from prototype are copied to new a instance.

Shape.prototype = Object.create(Object.prototype, {
  x: {
    get: function () {
      return this.__x;
    },
    set: function (value) {
      this.__x = value;
    },
    enumerable: true,
    configurable: false
  },
  y: {
    get: function () {
      return this.__y;
    },
    set: function (value) {
      this.__y = value;
    },
    enumerable: true,
    configurable: false
  },
  moveTo: {
    value: function (x, y) {
      this.x = x;
      this.y = y;
    },
    writable: false,
    enumerable: true,
    configurable: false
  },
  draw: {
    value: function () {
      console.log("Drawing shape at: (" + this.x + ", " + this.y + ")");
    },
    writable: false,
    enumerable: true,
    configurable: false
  }
});

Object property descriptor has these optional keys:

  • writable - true if and only if the value associated with the property may be changed with an assignment operator
  • enumerable - true if and only if this property shows up during enumeration of the properties on the corresponding object
  • configurable - true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object

When the new type is defined it’s can be locked.

Object.seal(Shape);
Object.seal(Shape.prototype);

When the object is locked, it can not be modified. In case of trying to do so, an error will be raised.

Object.defineProperty(obj, "prop", { value: 17 }); 
// throws an error

After all defined function can be instantiated.

var shape = new Shape();
Object.seal(shape);

shape.x = 50;
shape.y = 50;
shape.moveTo(120, 85);
shape.draw();
// Drawing shape at: (120, 85)

console.log(shape instanceof Shape);
// true

Here is the final result.

‘use strict’;

var Shape = function () {
  this.__x = 0;
  this.__y = 0;
};

Shape.prototype = Object.create(Object.prototype, {
  x: {
    get: function () {
      return this.__x;
    },
    set: function (value) {
      this.__x = value;
    },
    enumerable: true,
    configurable: false
  },
  y: {
    get: function () {
      return this.__y;
    },
    set: function (value) {
      this.__y = value;
    },
    enumerable: true,
    configurable: false
  },
  moveTo: {
    value: function (x, y) {
      this.x = x;
      this.y = y;
    },
    writable: false,
    enumerable: true,
    configurable: false
  },
  draw: {
    value: function () {
      console.log("Drawing shape at: (" + this.x + ", " + this.y + ")");
    },
    writable: false,
    enumerable: true,
    configurable: false
  }
});

Object.seal(Shape);
Object.seal(Shape.prototype);

var shape = new Shape();
Object.seal(shape);

shape.x = 50;
shape.y = 50;
shape.moveTo(120, 85);
shape.draw();
// Drawing shape at: (120, 85)

console.log(shape instanceof Shape);
// true

This code can be easily optimized with class4js library.

‘use strict’;

var Shape = $class({
  __construct__: function () {
    this.__x = 0;
    this.__y = 0;
  },
  x: {
    get: function () {
      return this.__x;
    },
    set: function (value) {
      this.__x = value;
    }
  },
  y: {
    get: function () {
      return this.__y;
    },
    set: function (value) {
      this.__y = value;
    }
  },
  moveTo: function (x, y) {
    this.__x = x;
    this.__y = y;
  },
  draw: function () {
    console.log("Drawing shape at: (" + this.x + ", " + this.y + ")");
  }
});

var shape = new Shape({ x: 50, y: 50});

shape.moveTo(120, 85);
shape.draw();
// Drawing shape at: (120, 85)

console.log($is(shape, Shape));
// true

Features


Here you can get main keywords of class4js. To get more details, documentation should be visited.

  • $class - it is used to define class
  • $abstract_class - it is used to define abstract class
  • $static_class - it is used to define static class
  • $enum - it is used to define enum
  • $interface - it is used to define interface
  • $is - it is used to check type
  • $create - it is used to create object
  • $init - it is used to initialize object
  • $module - it is used to define module
  • $namespace - it is used to define namespace
  • $extend - it is used to define method to exiting type
  • $super - it is used to access parent's method

Conclusion


class4js module emulates classes and their related features introducing new sugar syntax. This syntax allows to write less code, to have better code reuse and allows to protect your library from undesirable modifications which can break your code. Another class4js advantage is that the library is written in JavaScript and doesn’t have any dependencies, and doesn’t need any extra tools to maintain it. Just include to your project and use it.

References


Saturday, June 1, 2013

Install classic gnome desktop in Ubuntu 12.04

To have gnome Ubuntu desktop on your computer, simply open terminal and type such command:
sudo apt-get install gnome-panel

Saturday, May 18, 2013

Installing PhantomJS on Ubuntu 13.04

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

I have a virtual machine in which Ubuntu 13.04 (64-bit) version is installed. After a few attempts, I found the way how to install PhantomJS 1.9 to my virtual machine.

Steps are bellow:

~cd /Downloads
wget https://phantomjs.googlecode.com/files/phantomjs-1.9.0-linux-x86_64.tar.bz2
sudo tar xvf phantomjs-1.9.0-linux-x86_64.tar.bz2
sudo mv phantomjs-1.9.0-linux-x86_64 /usr/local/share/phantomjs
sudo ln -s /usr/local/share/phantomjs/bin/phantomjs /usr/bin/phantomjs
To check is installed successfully run such command:
phantomjs --version

Friday, May 17, 2013

Wednesday, May 15, 2013

SVG Loader

A few weeks ago I started working on project in which I used svg images. In internet I found a solution how to create svg loader.

To get source code of svg loader go here.

Tuesday, February 19, 2013

NoSQL Distilled: A Brief Guide to the Emerging World of Polyglot Persistence

A few days go I finished reading book NoSQL Distilled: A Brief Guide to the Emerging World of Polyglot Persistence.

The first part of the book concentrates on core concepts, including schemaless data models, aggregates, new distribution models, the CAP theorem, and map-reduce. In the second part, the authors explore architectural and design issues associated with implementing NoSQL. They also present realistic use cases that demonstrate NoSQL databases at work and feature representative examples using Riak, MongoDB, Cassandra, and Neo4j.