JavaScript Patterns and Principles

JavaScript Pa!erns And Principles Aaron Hardy | So!ware Engineer, Analytics

Architecture Misconceptions

jQuery is my architecture.

Websites are just the V in MVC.

We’re already using MVC so we’re good.

JavaScript Pa"erns And Principles

§  Modularity §  Communication Pa"erns §  Pa"erns Within MV*

Building Large Apps

#e secret to building large apps is NEVER build large apps. Break your application into small pieces. Assemble those testable, bite-sized pieces into your application. - Justin Meyer

Modules Should Be…

Independent of other modules

Limited knowledge of the rest of the app

Reusable without refactoring

Functional when other modules break

Testable in isolation

Functional when other modules break

Possible Modules

Address Book

Chat Room

Shared Service

§  Modularity §  Communication Pa"erns

§  Callback §  Promise §  Event Emi"er §  Publish/Subscribe

§  Pa"erns Within MV*

Callbacks In Real Life

§  TODO: Picture of a fast food line while I explain how it demonstrates callbacks in real life.

CC Image Courtesy of #e Consumerist on Flickr

Callback Example

var customer = { placeOrder: function() { restaurant.takeOrder('burger', this.onFoodReady); }, onFoodReady: function(food) { … } };

Callback Example

Callback Key Points

Used to notify of completion of an asynchronous task Simple Efficient No libraries required

Promises In Real Life

jQuery Promise Anatomy

takeSeatingRequest()

promise Promise then()

Customer Restaurant

jQuery Promise Anatomy

takeSeatingRequest()

promise

Deferred resolve() reject() promise()

Promise then()

Customer Restaurant

Promise Example

var customer = { requestSeating: function() { var promise = restaurant.takeSeatingRequest(); promise.then(this.sit); } sit: function() { … } };

Promise Example

Promise Example

Asynchronous Sequence Using Callbacks

step1(function(value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { console.log('Success', value4); } } } }

Asynchronous Sequence Using Callbacks

step1(function(value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { console.log('Success', value4); } } } }

PYRAMID OF DOOM

Asynchronous Sequence Using Promises

step1() .then(step2) .then(step3) .then(step4) .then(function(value) { console.log('Success', value); });

Supported in jQuery 1.8+

Try-catch In A Synchronous World

try { var value = step1(); value = step2(value); value = step3(value); value = step4(value); console.log('Success', value); } catch (error) { console.log('Failure', error); } finally { console.log('Time to clean up resources!'); }

Asynchronous Try-catch Using Promises

step1() .then(step2) .then(step3) .then(step4) .then(function(value) { console.log('Success', value); }) .catch(function(error) { console.log('Failure', error); }) .finally(function() { console.log('Time to clean up resources!'); });

Supported in the Q promise library

Asynchronous Parallel Using Callbacks

var requestsPending = 2; var onComplete = function(tweets) { requestsPending--; if (requestsPending == 0) { // Display tweets from both requests. } } loadTweets('#adobe', onComplete); loadTweets('#summit', onComplete);

Asynchronous Parallel Using Callbacks

var requestsPending = 2; var onComplete = function(tweets) { requestsPending--; if (requestsPending == 0) { // Display tweets from both requests. } } loadTweets('#adobe', onComplete); loadTweets('#summit', onComplete);

Asynchronous Parallel Using Promises

var adobePromise = loadTweets('#adobe'); var summitPromise = loadTweets('#summit'); $.when(adobePromise, summitPromise).then(displayTweets);

Promise Key Points

Used to notify of completion of an asynchronous task Object passable now representing something to be determined in the future Great for sequential/parallel management Generally makes use of a third party library

§  Callback §  Promise §  Event Emi!er §  Publish/Subscribe

Event Emi"ers In Real Life

§  TODO: Coupon text photo while I explain the similarities to event emi"ers.

CC Image Courtesy of Incase on Flickr

DOM Event Emi"er Example

var foo = document.getElementById('foo'); foo.addEventListener('click', function() { alert('bar'); }); foo.addEventListener('click', function() { alert('baz'); });

jQuery Event Emi"er Example

var customer = { receiveCoupon: function(coupon) { … } };

var customer = { receiveCoupon: function(coupon) { … } }; var restaurant = { offerCoupon: function(coupon) { $(this).trigger('couponAvailable', coupon); } };

Event Emi"er Key Points

Noti$es of state change, user interaction, etc. Fires an event any number of times (possibly never) Native for DOM Arbitrary objects make use of a third-party library

§  Pa"erns within MV*

Pub/Sub Anatomy

Pub/Sub Bus publish()

subscribe() unsubscribe()

Pub/Sub Anatomy

Customer

bus.subscribe('couponAvailable', function() { … });

Pub/Sub Anatomy

Restaurant Customer

bus.publish('couponAvailable', 'Buy 1 get 1 free');

Pub/Sub Example

Archive Report spam Delete Mark as unread

Android 4.2.1 vs iOS 6

Videos magically don’t have sound

If you could scale this to market it would be very valuable, no?

Clone SSD (Windows system partition) to HDD partition

JIRA help – Greenhopper + Scrum + Subtasks

Question se"ing up a VPN on $rewall

Shopping Carts

#e end of textbooks?

3 MeMail

Pub/Sub Example

Shopping Carts

0 MeMail

Inbox Service

Pub/Sub Example

Shopping Carts

3 MeMail

Mark all as read

Pub/Sub Example

Shopping Carts

3 MeMail

bus.publish('selectedEmailsChanged', selectedEmails);

Mark all as read

Pub/Sub Example

Shopping Carts

3 MeMail

Archive Report spam Delete Mark as read

Pub/Sub Example

Shopping Carts

3 MeMail

Service

Archive Report spam Delete Mark as read

bus.publish('markAsReadRequested', emails);

Pub/Sub Example

Shopping Carts

3 MeMail

Service

bus.publish('markedAsRead', emails); Archive Report spam Delete Mark as read

Pub/Sub Example

Shopping Carts

2 MeMail

Pub/Sub Key Points

Communication between modules Publishers and subscribers don’t address one another Provides excellent decoupling

Which Pa"ern Should I Use?

Is the communication between modules?

Is it communicating a response to requested task?

Do you need to represent a future value?

Is sequence/parallel management important?

No Yes

No Yes Event Emi!er

Callback Promise

Pub/Sub

§  Modularity §  Communication Pa"erns §  Pa!erns Within MV*

§  State Change Detection §  Declarative Markup §  View Manipulation §  Dependency Injection

Model Represents data

or state

View Presentation and

user controls

Controller Logic between views

and models

or state

user controls

Presenter Logic between views

and models

or state

user controls

ViewModel Logic between views

and models

or state

user controls *

MV* Frameworks

Comparison At A Glance

Requires Underscore/LoDash and jQuery/Zepto

6K + 4K (Underscore) + 28K (jQuery 2.0) gzipped

Non-prescriptive

Extensions add functionality and/or prescription

Eventful proxy models

Used in tandem with a template engine

Binding available through extensions

Dependency injection available through extensions

jqLite built-in

29K gzipped

Prescriptive

Intended to be a full(er) stack out of the box

Dirty checking

Custom HTML tags and a"ributes (directives)

Two-way data-binding built-in

Dependency injection built-in

§  State Change detection §  Declarative Markup §  View Manipulation §  Dependency Injection

Backbone: Proxy Models

var book = { title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }; var bookView = new BookView(book); book.genre = 'Social Criticism';

How does BookView know that the book’s genre changed?

var book = { title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }; var bookView = new BookView(book); book.genre = 'Social Criticism'; bookView.genreChanged(); We could manually tell it…

but not without creating a tangled mess.

Let’s wrap our object in a proxy.

var book = new Backbone.Model({ title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }); var bookView = new BookView(book); book.set({genre: 'Social Criticism'});

Now we must use the proxy functions. (Until ECMAScript Harmony!)

Meanwhile, inside BookView… book.on('change:genre', onChange);

var book = new Backbone.Model({ title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }); var bookView = new BookView(book); book.set({genre: 'Social Criticism'});

We do something similar for arrays.

var books = new Backbone.Collection([ book1, book2, book3 ]); var booksView = new BooksView(books); books.add(book4);

books.on('add', onAdd);

Angular: Dirty Checking

Meanwhile inside BookView…

var book = { title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }; …pass book to BookView… book.genre = 'Social Criticism';

$scope.book = book; $scope.$watch('book', function() { console.log('changed!'); }, true);

Angular: Dirty Checking

User Click

Change Object

Watchers: Is the object different than last time?

Yes. React.

Watchers: Is the object different than last time?

Digest Cycle Triggered automatically on user interaction, h"p responses, etc. Can be manually triggered.

Trigger Wait

§  Modularity §  Communication Pa"erns §  Pa"erns within MV*

Backbone: Templates

Backbone: Templates

Backbone: Templates

<body> <ul> <li>Name: John, Email: john@example.com</li> <li>Name: Jane, Email: jane@example.com</li> </ul> </body>

Angular: Directives

<ul> <li ng-repeat="user in users"> Username: {{user.name}}, Email: {{user.email}} </li> </ul> function MyController($scope) { $scope.users = [ {name: 'John', email: 'john@example.com'}, {name: 'Jane', email: 'jane@example.com'} ]; }

Backbone: Responding To And Updating View

Name: <input type="text" class="name-in"> <h1>Hello <span class="name-out"></span></h1> Backbone.View.extend({ events: { 'keyup .name-in': 'onNameChange' }, onNameChange: function(event) { // TODO: Optimize var name = $(event.target).val(); this.$('.name-out').text(name); } });

Angular: Binding

Name: <input type="text" ng-model="yourName"> <h1>Hello {{yourName}}</h1>

§  Modularity §  Communication Pa"erns §  Pa"erns within MV*

§  State change detection §  Declarative Markup §  View Manipulation §  Dependency Injection

Without Dependency Injection

var TweetStream = function() { this.twitter = new TwitterService(); }; TweetStream.prototype.showTweets = function() { var tweets = this.twitter.getTweets(); … }; var stream = new TweetStream(); stream.showTweets();

With Dependency Injection

var TweetStream = function(twitter) { this.twitter = twitter; }; TweetStream.prototype.showTweets = function() { var tweets = this.twitter.getTweets(); … }; var twitter = new TwitterService(); var stream = new TweetStream(twitter); stream.showTweets();

We inverted control of the Twi!erService construction.

Inversion of Control Container

When rank is requested, provide the value 1337. When twi!er is requested, provide a new instance of Twi!erService. When dialog is requested, provide the SearchDialog constructor. When logger is requested, provide a singleton instance of AsyncLogger. When chat is requested, provide whatever is returned from chatFactory.

Angular: Dependency Injection

var MyController = function($http, $scope) { $http.get('http://github.com/…') .success(function(commits) { $scope.commits = commits; }); }; $injector.instantiate(MyController);

How does $injector know what to inject for $h!p and $scope?

How does $injector know what to inject for $h!p and $scope? By using toString() and some well-cra$ed regex.

What if we reverse the parameter order?

var MyController = function($scope, $http) { $http.get('http://github.com/…') .success(function(commits) { $scope.commits = commits; }); }; $injector.instantiate(MyController);

What if we reverse the parameter order? It still works!

var MyController = function(a, b) { a.get('http://github.com/…') .success(function(c) { b.commits = c; }); }; $injector.instantiate(MyController);

What if we reverse the parameter order? It still works! Until we minify it.

var MyController = function(a, b) { a.get('http://github.com/…') .success(function(c) { b.commits = c; }); }; MyController.$inject = ['$http', '$scope']; $injector.instantiate(MyController);

What if we reverse the parameter order? It still works! Until we minify it. %en we have to annotate.

Promise Implementations

jQuery

rsvp.js

kriskowal/q

jquery/jquery

tildeio/rsvp.js

Pub/Sub Implementations

Postal.js

AmplifyJS

PubSubJS

postaljs/postal.js

appendto/amplify

mroderick/pubsubjs

Inversion of Control and Dependency Injection

Article by Martin Fowler h"p://martinfowler.com/articles/injection.html Wikipedia source of truth h"p://en.wikipedia.org/wiki/Dependency_injection Lightweight inversion of control container with examples h"ps://github.com/Aaronius/injectorjs

Inversion of Control and Dependency Injection

Article by Martin Fowler h"p://martinfowler.com/articles/injection.html Wikipedia source of truth h"p://en.wikipedia.org/wiki/Dependency_injection Lightweight inversion of control container with examples h"ps://github.com/Aaronius/injectorjs

JavaScript Patterns and Principles

Technology

JavaScript Patterns - Chapter 3. Literals and Constructors

Patterns et bonnes pratiques autour de JavaScript

JavaScript patterns chapter 8 of mine

Javascript Module Patterns

Patterns In-Javascript

JavaScript Modules and Patterns Telerik Software Academy .

JavaScript Design Patterns

Design patterns in Javascript

Mini-Training: Javascript Patterns

Introduction to Design Patterns in Javascript

JavaScript Practices & Design Patterns

JavaScript performance patterns

JS275: Mastering JavaScript (with · 4. JavaScript Patterns...

Javascript Common Design Patterns

Principles and patterns

The Principles of Object-Oriented JavaScript€¦ ·...