building scalable javascript apps
Post on 18-Oct-2014
3.106 views
DESCRIPTION
GDG DevFest Israel 2013 sesionTRANSCRIPT
![Page 1: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/1.jpg)
Gil Fink
Building Scalable JavaScript Apps
![Page 2: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/2.jpg)
Agenda
• The challenge we face
• Suggested solution
• The patterns
![Page 3: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/3.jpg)
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
![Page 4: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/4.jpg)
Scalable JavaScript App Examples
Gmail
Yahoo! Homepage
and more
![Page 5: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/5.jpg)
Current Architecture
Might contain a mixture of the following:
Custom Widgets
Modules
Application Core
MV* Framework
JavaScript Libraries and Toolkits
![Page 6: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/6.jpg)
Current Architecture – Cont.
![Page 7: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/7.jpg)
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?
![Page 8: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/8.jpg)
Suggested Solution: Mixing JS Patterns
Module Pattern
Façade Pattern
Mediator/Event Aggregator
![Page 9: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/9.jpg)
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
![Page 10: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/10.jpg)
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
![Page 11: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/11.jpg)
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
};
}();
![Page 12: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/12.jpg)
Demo
Module Patterns
![Page 13: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/13.jpg)
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
![Page 14: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/14.jpg)
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
![Page 15: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/15.jpg)
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
![Page 16: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/16.jpg)
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
![Page 17: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/17.jpg)
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
![Page 18: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/18.jpg)
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 } }; }());
![Page 19: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/19.jpg)
The Façade – Cont.
![Page 20: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/20.jpg)
Demo
The Façade
![Page 21: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/21.jpg)
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
![Page 22: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/22.jpg)
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
![Page 23: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/23.jpg)
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
![Page 24: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/24.jpg)
Mediator/Event Aggregator – Cont.
![Page 25: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/25.jpg)
Mediator Implementation Example
var mediator = (function () {
var subscribe = function (channel, fn) {
…
},
publish = function (channel) {
…
},
return {
publish: publish,
subscribe: subscribe
};
}());
![Page 26: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/26.jpg)
Demo
Mediator
![Page 27: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/27.jpg)
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
![Page 28: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/28.jpg)
Questions
![Page 29: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/29.jpg)
Summary
• Building big and scalable JavaScript app is very challenging
• Combining proven patterns can help to create better software
![Page 30: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/30.jpg)
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
![Page 31: Building Scalable JavaScript Apps](https://reader034.vdocument.in/reader034/viewer/2022051322/544254c2b1af9f410a8b4617/html5/thumbnails/31.jpg)
Thank You