Quick start to understand two key concepts.
- How to split your application into multiple modules.
- How one module talk to amother module.
Consider website like gmail.com 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.
- View files https://github.com/nsisodiya/Demo-Scalable-App/tree/master/demo
- 3_Blog-Application = Small Sample Website which has 5 module.
- 4_Blog-Application-With-Requirejs = Rewritten (3_Blog-Application), using Requirejs
- 5_Blog-Application-With-CustomEventBus = Rewritten (3_Blog-Application), With Custom EventBus
- Application must be scalable
- Application, it should be easy to debug and develop
- Application should be reusable
- 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.
- http://www.ubelly.com/2011/11/scalablejs/ Blog
- https://github.com/flosse/scaleApp Implementation 1
- https://github.com/eric-brechemier/lb_js_scalableApp Implementation 3
- https://github.com/nsisodiya/choona.js Implementation 4
I have used choona.js library for this Demo. I have created choona.js which fit best for my needs
- 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
- 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.
* this.id => Id of module. == applicationContainer * this.$ => Dom Element == document.getElementById(this.id); * $(this.$) => jQ Element == $("#applicationContainer"); * this.config => Configuration * this.sb => instance of sandbox associated with module. It provide useful 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.
* this.sb.publish ==> Send Signals * this.sb.subscribe ==> Recieve Signals * this.sb.unsubscribe ==> Stop recieving Signals * this.sb.startModule ==> Load a child module inside current module * this.sb.endModule ==> End a child module inside current 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