> Articles > Building Framework In JavaScript

Building Framework In JavaScript

In this article we will see how to build/create a framework in JavaScript.

Framework is a collection of generic functionality in form of code which uses specific part written by developer to provide the solution.

What is Framework In JavaScript?

Framework is a collection of generic functionality in form of code which uses specific part written by developer to provide the solution. It will have methods in classes which will be implemented in subclasses written by developers who want to use the framework for providing solution for their specific requirement. So the Framework controls the developer code by calling these methods. So developer is focused on writing the specific part of application and framework has structure for generic behaviors and functionality and calls the specific parts of application written by developer. It is generally referred to work as "Don't call us, we'll call you.". Let's see how building a framework in JavaScript is done.

Implementation of Framework In JavaScript

Here are the steps for implementing the framework in JavaScript.

Step 1-
Write the classes, methods and functions in IIFE (Immediately Invoked Function Expression).

Step 2-
Raise the Error in methods which are suppose to be written in subclasses.

Step 3-
Expose the required classes, methods and functions to outside world.

JavaScript Framework Usage

1. Use the javascript framework name to access the classes of the framework.
2. Implement the methods which are suppose to be written in subclasses.

JavaScript Framework _Devenv - Requirements

Create a javascript framework of development environment which can be used for developing specific development environment.

Design the JavaScript Framework

JavaScript Framework Name - _DevEnv

Functions-

Class - Project
AddFile() - Abstract method, implemented by user for adding the file.
Parameters - None
Return Value - None

Class - ProjectCreator
NewProject() - This will be called when new project has to be created. It will call the method CreateProject().
Parameters - None
Return Value - Created Project
CreateProject() - Abstract method, implemented by user for creating project.
Parameters - None
Return Value - Created Project

JavaScript Framework Usage-

The javascript framework will use namespace and only required classes will be exposed to outside world.

Usage -
LinuxProject.prototype = new _DevEnv.Project();
...................

Implementation of framework in javascript

We will write code of javascript framework in Immediately Invoked Function Expression (IIFE) so that classes and functions of javascript framework will be in that function scope.

We have global as parameter and passing this to function so global will have value of this. this is pointing to window object so global will be pointing window object.

We will raise the error in methods which are suppose to be written in subclass. Actually this is the way we are providing abstract method in javascript framework. Developer will implement these methods in subclasses to provide the functionality of specific part of application.

Now we want to provide namespace. So we will have literal object _DevEnv. This object will have classes and functions to provide interface to outside world. It will expose only required one to outside world.

Now the javascript framework _DevEnv is available which can be used in user file.

_DevEnv.js

We have the classes of javascript framework and we want to use them. The developer will use the javascript framework classes for writing the subclasses and will implement the abstract methods to provide the functionality of specific part of application.

LinuxProject.js

We can use them in html file. First we have to write the javascript framework file, then we can write user file.

projectdemo.htm



Output

ProjectCreator::NewProject()
LinuxProjectCreator::CreateProject()
LinuxProject::AddFile()


Suresh Kumar Srivastava is founder of online learning site coursegalaxy.com and author of popular books C In Depth, Data Structures Through C In Depth. He has 18+ years experience in industry and worked on architecture and design of multiple products. This article Building Framework In JavaScript is from his Advanced JavaScript course.