1. Gil Fink
Building Scalable JavaScript Apps

2. Agenda
• The challenge we face
• Suggested solution
• The patterns

3. The Challenge
How would you define a scalable JavaScript app
architecture?
Non-trivial apps require significant developer
effort to maintain, where a browser plays a big
role in data manipulation and display

4. Scalable JavaScript App Examples
Gmail
Twitter
Facebook
Yahoo! Homepage
and more

5. Current Architecture
Might contain a mixture of the following:
Custom Widgets
Modules
Application Core
MV* Framework
JavaScript Libraries and Toolkits

6. Current Architecture – Cont.

7. Possible Problems
How much of the app is reusable?
Can single modules exist on their own
independently?
Can a single module be tested independently?
How much modules depend on other modules
in the system?
Is the application parts tightly coupled?
If a specific part fails, can the application still
work?

8. Suggested Solution: Mixing JS Patterns
Module Pattern
Façade Pattern
Mediator/Event
Aggregator

9. Suggested Solution
Module
Module
Module
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
…
Facade
Pub / Sub
Core
Libraries
jQuery
Application Core
Backbone
.js
postal.js
…

10. Modular JavaScript Review
Proven JavaScript patterns for creating modular
JavaScript
Leverage JavaScript’s built-in features
“Modularize” code into reusable objects
Prototype Pattern
Module Pattern
Revealing Module Pattern
Revealing Prototype Pattern
Or use libraries like RequireJS or Almond

11. Module Patterns
// Module pattern
var Car = function () {
// private variables
// private functions
return {
// public members
};
};
//Revealing prototype pattern
var Car = function (elm) {
// variables defined here
}
Car.prototype = function () {
// functions defined here
return {
// public members defined
// here as with revealing
// module pattern
};
}();

12. Module Patterns
Demo

13. Modules
Module
Module
Module
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
…
Facade
Pub / Sub
Core
Libraries
jQuery
Application Core
Backbone
.js
postal.js
…

14. Modules
Informs the application when something
interesting happens
Correctly publish events of interest
Shouldn’t concern about:
What objects or modules are being notified
Where these objects are based
How many objects subscribe to notifications

15. Application Core
Module
Module
Module
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
…
Facade
Pub / Sub
Core
Libraries
jQuery
Application Core
Backbone
.js
postal.js
…

16. The Application Core
Manages the module lifecycle
When is it safe for a module to start?
When should it stop?
Modules should execute automatically when started
Enables adding and removing modules without
breaking the app
Should handle detecting and managing of
errors
Uses the mediator pattern

17. The Façade
Module
Module
Module
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
…
Facade
Pub / Sub
Core
Libraries
jQuery
Application Core
Backbone
.js
postal.js
…

18. The Façade
• Convenient, high-level interfaces to larger code
that hide underlying complexity
• Limited public API of functionality
• Differs greatly from the reality of the
implementation
• Example:
var module = (function () {
…
return {
façade: function (args) {
// do something
}
};
}());

19. The Façade – Cont.

20. The Façade
Demo

21. The Façade
Will play a role of:
Abstraction to the application core
The façade sits in the middle between the core and
the modules
Ensure a consistent interface to the modules which is
available at all times
Should be the only thing that modules are aware of
If modules have API, they expose it using a façade

22. Mediator/Event Aggregator
Module
Module
Module
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
HTML / CSS /
JavaScript
…
Facade
Pub / Sub
Core
Libraries
jQuery
Application Core
Backbone
.js
postal.js
…

23. Mediator/Event Aggregator
Promotes loose coupling of components
Helps solve module coupling issues
Allow modules to broadcast or listen to
notifications from other modules
Notifications can be handled by any number of
modules at once

24. Mediator/Event Aggregator – Cont.

25. Mediator Implementation Example
var mediator = (function () {
var subscribe = function (channel, fn) {
…
},
publish = function (channel) {
…
},
return {
publish: publish,
subscribe: subscribe
};
}());

26. Mediator
Demo

27. Frameworks
Framework that leverages the proposed solution:
Most of the MV* frameworks include ways to apply the
architecture (AngularJS, Ember and Backbone for
example)
Aura: http://aurajs.com/
The Scalable Application Framework:
https://github.com/legalbox/lb_js_scalableApp
And many more
Can be a good start point to impose the patterns

28. Questions

29. Summary
•
•
Building big and scalable JavaScript app is very
challenging
Combining proven patterns can help to create
better software

30. Resources
Slide Deck and Demos - http://sdrv.ms/17riPkB
Nicholas Zakas: Scalable JavaScript Application
Architecture http://www.youtube.com/watch?v=vXjVFPosQHw
Addy Osmani: Scaling Your JavaScript Applications http://addyosmani.com/scalable-javascript-videos/
My Blog – http://www.gilfink.net
Follow me on Twitter – @gilfink

31. Thank You