Building Scalable JavaScript Apps

31
Gil Fink Building Scalable JavaScript Apps
  • date post

    18-Oct-2014
  • Category

    Technology

  • view

    3.110
  • download

    3

description

GDG DevFest Israel 2013 sesion

Transcript of Building Scalable JavaScript Apps

Page 1: Building Scalable JavaScript Apps

Gil Fink

Building Scalable JavaScript Apps

Page 2: Building Scalable JavaScript Apps

Agenda

• The challenge we face

• Suggested solution

• The patterns

Page 3: Building Scalable JavaScript Apps

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

Scalable JavaScript App Examples

Gmail

Twitter

Facebook

Yahoo! Homepage

and more

Page 5: Building Scalable JavaScript Apps

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

Current Architecture – Cont.

Page 7: Building Scalable JavaScript Apps

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

Suggested Solution: Mixing JS Patterns

Module Pattern

Façade Pattern

Mediator/Event Aggregator

Page 9: Building Scalable JavaScript Apps

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

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

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

Demo

Module Patterns

Page 13: Building Scalable JavaScript Apps

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

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

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

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

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

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

The Façade – Cont.

Page 20: Building Scalable JavaScript Apps

Demo

The Façade

Page 21: Building Scalable JavaScript Apps

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

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

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

Mediator/Event Aggregator – Cont.

Page 25: Building Scalable JavaScript Apps

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

Demo

Mediator

Page 27: Building Scalable JavaScript Apps

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

Questions

Page 29: Building Scalable JavaScript Apps

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

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

Thank You