Friday, January 22

Notes : Creating a Scalable Javascript Application Architecture

One of my team leader suggested this video by Nicolas zakas about creating a scalable javascript application architecture.
Below are notes, I could jot down while viewing the video.

Small piece build independently and then combined to form one object. Each module can be developed/worked on independently without interference from other module.

An independently developed piece of functionality that form part of a big web page application. Each module has its own HTML, CSS and Javascript. A single module should live on its own. This makes sure, the module works on its own, and it should not disturb the functionality of other modules. This architecture is based on loosely coupled methodology.

Each module has its own sandbox, which limits what a module can do. Usually in a team, there should be a convention of writing code, so that all write correct code.

Module should have limited knowledge about other modules, they should only know about the sandbox that they are connected to.

Each modules job is to create meaningful User Experience. Eg, stock module to show stock information, weather module to show weather.

Modules should have rules.
1) It should only call its method and methods from the sandbox that it is connected to.
2) Don't access DOM elements outside of your sandbox.
3) Don't access non native global objects. eg, window, array.
4) Ask permission from sandbox to access certain thing, don't take it.
5) Don't create global objects.
6) Don't directly access other modules, keep your modules loosely coupled.

It ensures a consistent interface. Sandbox acts like a security guard.

Sandbox job
Consistency, make sure API don't change.
Security - Module should not be able to access methods which they are not allowed to.
Communication, eg need to interact with DOM in a particular way.

Application Core
Very important, but just manages the module. In other terminology, can be called as Application controller.
It is responsible for life cycle of module, i.e when the module to start and when to stop.

Application core job
1) Manages module lifecycle
2) Enable Inter-Module communication (Mediator pattern)
3) General error handling.
4) Must be extensible. Think about the future, your web application will keep changing, so plan for extension. Eg. of extensions.
a) Error handling
b) Ajax functionality
c) New module capabilities
d) General utilities - can be for example JSON, XML parsing.

Base library job
1) Browser normalization - It should know which browser is being used.
2) General purpose utilities
3) Extensible

To summarize
Base library should know about the browser being used. No other part of the application should focus on the browser type. Browser normalization is one of the key parameters of the Base library.
The Application Core, should be the one to know which Base library is being used.
The sandbox will act as a mediator and will only know about the existence of the application core.
And finally the modules, they should only know about the existence of the sandbox.

The advantage of this is multiple different application can be created from one framework. Each module can be developed individually and tested on its own. This is loosely coupling. The major advantage is, if you pull out a module from the web application, the web application can still be functional.

Be the first one to Comment!!!

Post a Comment