Designing of Large Scale JavaScript Application Part 5

Inhertance:

Having "IS-A" relationship between different objetcs is the basic definition of inheritance.It allows us to define a class in terms of another class, which makes it easier to create and maintain an application. This also provides an opportunity to reuse the code functionality and fast implementation time. However class k/w and inheritance is not directly supported in JavaScript as it is not proper OOP language. But there are ways to implement inheritance generally referd as prototypal inheritance.

The basic funda, Why we need this is that we want to have common code , data members and properties and methods of similar objects at one place and allown the subclasses / derived classes to modify the common behaviour and add new functionalities to it as per their requirement without altering the other classes derived from the same base class. Here the code snippety that shows the implementation of inheritance in JavaScript.

Wrap up the whole discussion with some basic concepts and pillars of the framework decribed in 

Designing of Large Scale JavaScript Application

Designing of Large Scale JavaScript Application Part 2

Designing of Large Scale JavaScript Application Part 3

Designing of Large Scale JavaScript Application Part 4

Click to Find the JS file here

The above code will facilliate to have inheritance on method overriding in the framework. Now you can define classes and extend them as per your application design. Refer the code snippet below.

Base Class Implementation

Derived call implementation

Now another class that extends the above Observable class

Method Overriding and calling base class methods:

We have just created some modules that are derived from another module. This would make the code reusable but it is also required to modify the behaviour of some base class methods in child class. For that either we want the completely new implementation of the overriden method or we want to manipulate the outcome of the base class method. Here is the code snippet to achieve this

Lets say Animal module has a method "ProduceSound"- which picks the audio file from configuration and trigger audio player to play it. And there are different animals each has different sounds. For that we have to override the "ProduceSound" methos according to the animal class.

var Parrot = Animal.extend({

        init: function() {

            this._super(this); // calls the animal class constructor

        },

produceSound: function(){ // overrides the Animal class method

   

   // calls the produceSound method of the animal class with audio file name

   // so that we dont need to rewrite the mechanism that trigger the audio

   // player to read mp3 file and play it

            this.base.produceSound("parrot.mp3");

}

});

Tools and Extensions of the framework.

1) JavaScript Minification Tools

There are number of tools that are available for modules dependency tracking and bundling like R optimizer, ajax minifier, YUI comressor etc. As a Microsoft fan and available features I prefer to use JS and CSS bundling available with MVC 4.5.

2) JavaScript Linting Tools

Again there are many IDE plugins and commond line tools for the JS linting and compliation. That often used in JSparser and JetBrains plugins for visual studio.

3) Unit Testing Tools

Can use any Unit Testing framework like QUnit, Jasmine or any other that are compatible with CommonJS.

4) Documentaion Tools

Proper documentation is another time consuming part but it ends with great results in long term and big projects. Proper documentation and unit test cases reduces the maintainance cost of the long running large projects. For JavaScript modules there are tools like JsDocs that read the class documentation with a specific template and generates the proper and well readable API Documents as See this Framework Documentation

5) Extension for Multiple Language Support

Globalization and Multiple language support is in need of big and futuristics projects. The use of resource files is very common in server side programming but when it comes to client side programming atleast think once. As no one want to load all the content in all the languages along with the application. i18n is a great plugin for the CommonJS that loads the local specific resources on demand (asynchronously) or fall back resource. This plugin can be easily configured in this framework.