Problem Definition: Building large web applications with dozens of developers is a difficult task. Organizing the engineers around a common goal is one thing, but organizing your code so that people can work efficiently is another. Many large applications suffer from growing pains after just a few months in production due to poorly designed JavaScript with unclear upgrade and extension paths. Scalable JavaScript Application Framework: Yahoo! home page engineer Nicholas Zakas, author of Professional JavaScript for Web Developers, introduced front-end architecture for complex, modular web applications with significant JavaScript elements.

1. An overview of
Scalable Web Application Front-end
Saeid Zebardast
http://zebardast.com
@saeidzeb
1

2. An overview of Scalable Web Application Front-end
Problem Definition
Building large web applications with dozens of developers is a difficult task. Organizing the engineers
around a common goal is one thing, but organizing your code so that people can work efficiently is
another. Many large applications suffer from growing pains after just a few months in production due to
poorly designed JavaScript with unclear upgrade and extension paths.
Scalable JavaScript Application Framework
Yahoo! home page engineer Nicholas Zakas1
, author of Professional JavaScript for Web Developers,
introduced front-end architecture for complex, modular web applications with significant JavaScript
elements.
1 nczonline.net
2
Figure 1: Scalable JavaScript Application Architecture by N. Zakas

3. Module
An independent unit of functionality that is part of the total structure of a web application. Web
application modules consist of HTML, CSS and JavaScript.
Module rules
• Any single module should be able to live on its own
• Loose coupling allows you to make changes to one module without affecting the others
• Each module has its own sandbox
◦ An interface with which the module can interact to ensure loose coupling
• Modules have limited knowledge and only know the sandbox
◦ Each module knows about their sandbox and that's it The rest of the architecture doesn't
exist to them.
• Only call your own methods or those on the sandbox
• Don't access DOM elements outside of your box
• Don't access non-native global objects
• Anything else you need, ask the sandbox
• Don't create global objects
• Don't directly reference other modules
• Modules must stay within their own sandboxes
◦ No matter how restrictive or uncomfortable it may seem
Sandbox
The sandbox ensures a consistent interface. Modules can rely on the methods to always be there. The
sandbox also acts like a security guard. It knows what the modules are allowed to access and do on the
framework.
Sandbox jobs
• Consistency
• Security
• Communication
3

4. Application Core
The application core manages modules. The application core tells a module when it should initialize
and when it should shutdown. Also, it manages communication between modules.
The application core handles errors. It uses available information to determine best course of action.
Application core jobs
• Manage module lifecycle
• Enable inter-module communication
• General error handling
• Be extensible by plugins
Mediator
The application core handles the messages by using Mediator class.
Plugins
Plugins augment the capabilities of the core to keep it relevant and useful. Anything built for extension
can never be obsolete.
What plugins can be created
• Error handling
• Ajax communication
• New module capabilities
• General utilities
• Anything!
Base Library
The base library provides basic functionality. Most applications are too tightly coupled to the base
library. Developers get upset when they can't touch the base library. Ideally, only the application core
has any idea what base library is being used.
4

5. Base library jobs
• Browser normalization
• General purpose utilities
◦ Parsers/Serializers for XML, JSON, etc.
◦ Object manipulation
◦ DOM manipulation
◦ Ajax communication
• Provide low-level extensibility
Advantages
• Multiple different applications can be created with the same framework.
• Each part can be tested separately
5

6. What's “scaleApp”?
scaleApp2
is a tiny JavaScript framework for scalable JavaScript Applications. The framework allows
you to easily create complex web applications. scaleApp is based on a decoupled, event-driven
architecture that is inspired by the talk of Nicholas C. Zakas - "Scalable JavaScript Application
Architecture".
Quick start using “scaleApp”?
Link scaleApp.min.js in your HTML file:
<script src="scaleApp.min.js"></script>
Create a core
First of all create a new core instance:
var core = new scaleApp.Core();
Register modules
core.register( "myModuleId", function( sandbox ){
return {
init: function(){ /*...*/ },
destroy: function(){ /*...*/ }
};
});
As you can see the module is a function that takes the sandbox as a parameter and returns an object that
has two functions init and destroy (the latter is optional). Of course your module can be any usual class
with those two functions.
var MyGreatModule = function(sandbox){
return {
2 http://scaleapp.org
6

7. init: function(){ alert("Hello world!"); }
destroy: function(){ alert("Bye bye!"); }
};
};
core.register("myGreatModule", MyGreatModule);
The init function is called by the framework when the module is supposed to start. The destroy function
is called when the module has to shut down.
Start modules
After your modules are registered, start your modules:
core
.start( "myModuleId" )
.start( "anOtherModule", function(err){
// 'anOtherModule' is running now
});
Stopping
It's obvious:
core.stop("moduleB");
core.stop(); // stops all running instances
Publish/Subscribe
If the module needs to communicate with others, you can use the emit and on methods.
7

8. Emit
The emit function takes three parameters whereas the last one is optional:
• topic: the channel name you want to emit to
• data: the data itself
• cb: callback method
The emit function is accessible through the sandbox:
sandbox.emit( "myEventTopic", myData );
On
A message handler could look like this:
var messageHandler = function( data, topic ){
switch( topic ){
case "somethingHappend":
sandbox.emit( "myEventTopic", processData(data) );
break;
case "aNiceTopic":
justProcess( data );
break;
}
};
… and it can listen to one or more channels:
sub1 = sandbox.on( "somethingHappend", messageHandler );
sub2 = sandbox.on( "aNiceTopic", messageHandler );
8

9. Attach and Detach
A subscription can be detached and attached again:
sub.detach(); // don't listen any more
sub.attach(); // receive upcoming messages
Unsubscribe
You can unsubscribe a function from channel:
sandbox.off("a-channel", callback);
And you can remove a callback function from all channels:
sandbox.off(callback);
Or remove all subscriptions from a channel:
sandbox.off("channelName");
9