CoursesGalaxy Courses Subscription Knowledge Hub
Knowledge Hub
Design Patterns


Building 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?

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."


Implementation of Framework

Here are the steps for implementing the framework.

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.


Framework Usage

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


Framework _Devenv - Requirements

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


Design the Framework

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

Framework Usage-

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

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


Implementation of framework

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

Building JavaScript Framework - Framework code in IIFE


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 framework. Developer will implement these methods in subclasses to provide the functionality of specific part of application.

Building JavaScript Framework - Abstract Method


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.

Building JavaScript Framework - Literal object to provide framework interface


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

_DevEnv.js

Writing JavaScript Framework - Code of framework


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

LinuxProject.js

Writing JavaScript Framework - Using JavaScript framework


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

projectdemo.htm

Writing JavaScript Framework - HTML file to have framework and user file


Output

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



Next Article : Reflection In JavaScript




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 is from his course on Advanced JavaScript.







Yearly Subscription


Advanced JavaScript


Design Patterns Through JavaScript

Explore

Courses

Subscription

Knowledge Hub

Design Patterns

Tech Articles

About Us

Overview

Contact Us

CourseGalaxy

CourseGalaxy is focused on transformation of Engineering graduate to Software Engineer to fill the gap between education and industry and provide the training on specific problems of industry to enhance the skills of Engineers in industry to do their job appropriately.

Learn From Us

2018 CourseGalaxy