View on GitHub


This is small demo of Scalable JavaScript Application

Download this project as a .zip file Download this project as a tar.gz file


Demo of Scalable JavaScript Application using Choona.js. Choona.js ( is a very small library for creating Scalable and Modular Javascript Application.



Quick start to understand two key concepts.

  • How to split your application into multiple modules.
  • How one module talk to amother module.

What is this

Consider website like or other web based application where large team try maintain the codebase. Such large scale application must follow some architecture and principles. This dema application work a starting point to develop such application.


Basic Needs

  • Application must be scalable
  • Application, it should be easy to debug and develop
  • Application should be reusable

Basic Concepts

  • Whole application, splitted into multiple modules, modules may be dependant on other modules
  • So you may have situation like this - module A depends on B & C. Module B depends on D etc
  • try to develop as many as modules as you can but they should not overlap in functionality. Example - You should not create 2 modules which have 80% functioanily common with each other.
  • Module will talk to other module using Events - Pub/Sub Architecture.


I have used choona.js library for this Demo. I have created choona.js which fit best for my needs


Coding Tutorial

Module Creation

  • Module = Empty Div (html) + JS Module Object(js) + Configuration (optional)
  • For creating a Module, You need one Empty Div/HTML element where you wil load module. You need to specify id of module
Hello World Module

Flow of execution

  • you create a application module using choona.startApp by passing an ID and Module Object. Module Object has start, end function. start function inside module will be executed automatically.

Variable available inside a module

* => Id of module. == applicationContainer
*   this.$ => Dom Element == document.getElementById(;
*   $(this.$) => jQ  Element == $("#applicationContainer");
*   this.config => Configuration 
* => instance of sandbox associated with module. It provide useful API


Sanbox API

Module is provided by instance of sanbox. sandbox element provide API. You need not to unsubscribe the Signals. these will be unsubscribed automatically when a module ends.

*  ==> Send Signals
*  ==> Recieve Signals
*  ==> Stop recieving Signals
*  ==> Load a child module inside current module
*  ==> End a child module inside current module

Example of Module to Module Communication

Extending Module

  • Modules are basically objects. JavaScript provide ability to extend objects. So in Choona.js you can easily extend one module from other module.
  • This kind of Inheritance is very useful as you can create a new module by inheriting a base module.
  • You can load base module too