Building Scalable JavaScript Apps
-
date post
18-Oct-2014 -
Category
Technology
-
view
3.110 -
download
3
description
Transcript of Building Scalable JavaScript Apps
Gil Fink
Building Scalable JavaScript Apps
Agenda
• The challenge we face
• Suggested solution
• The patterns
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
Scalable JavaScript App Examples
Gmail
Yahoo! Homepage
and more
Current Architecture
Might contain a mixture of the following:
Custom Widgets
Modules
Application Core
MV* Framework
JavaScript Libraries and Toolkits
Current Architecture – Cont.
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?
Suggested Solution: Mixing JS Patterns
Module Pattern
Façade Pattern
Mediator/Event Aggregator
Suggested Solution
Backbone.js
jQuery postal.js … Core Libraries
Application Core
Facade
Pub / Sub
… Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
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
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
};
}();
Demo
Module Patterns
Modules
Backbone.js
jQuery postal.js … Core Libraries
Application Core
Facade
Pub / Sub
… Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
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
Application Core
Backbone.js
jQuery postal.js … Core Libraries
Application Core
Facade
Pub / Sub
… Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
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
The Façade
Backbone.js
jQuery postal.js …
Application Core
Facade
Pub / Sub
… Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
Core Libraries
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 } }; }());
The Façade – Cont.
Demo
The Façade
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
Mediator/Event Aggregator
Backbone.js
jQuery postal.js … Core Libraries
Application Core
Facade
Pub / Sub
… Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
Module
HTML / CSS / JavaScript
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
Mediator/Event Aggregator – Cont.
Mediator Implementation Example
var mediator = (function () {
var subscribe = function (channel, fn) {
…
},
publish = function (channel) {
…
},
return {
publish: publish,
subscribe: subscribe
};
}());
Demo
Mediator
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
Questions
Summary
• Building big and scalable JavaScript app is very challenging
• Combining proven patterns can help to create better software
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
Thank You