Modular and Event-Driven JavaScript

Modular JavaScript Heaven
with AMD and Events
@shiota ConFoo 2015

HELLO!slideshare.net/eshiota
github.com/eshiota
@shiota

* 16/02/2015 https://github.com/search?p=1&q=stars%3A%3E1&s=stars&type=Repositories
Out of the top 50 most starred
repos in Github, 25 are
JavaScript related.

It may become unreadable
and unmaintainable.

(single JS ﬁle,
173 LOC inside one function,
at least 7 diﬀerent concerns)

It may become a
CALLBACK HELL
(and some libraries just make it worse)

$(document).ready(function () {
$(".submit-button").on("click", function () {
$.ajax({
url : "/create",
type : "POST",
success : function (data) {
$.each(data.created_items, function (index, value) {
var item = $("<div />").text(value);
$(".items-list").append(item).hide().fadeIn(400, function () {
setTimeout(function () {
item.fadeOut(function () {
item.remove();
});
}, 1000);
});
});
}
});
});
});

A modular, event-based
structure solves these
problems and much more.

Modular JavaScript Heaven
with AMD and Events
(on the web)

Agenda
Making it modular
Controlling the ﬂow
Communicating through events

Single responsability, part
of a complex system.

Isolated behaviour
and knowledge.

Helps organising the
code in separate blocks.

///////////////////////////////
// Code for photo gallery
///////////////////////////////
var gallery = $(".gallery");
var galleryCurrent = 0;
var galleryTimer = 5000;
$(".thumbs").on("click", function (event) {
// ...
});
function goToNext () {
// ...
}
goToNext();
}, galleryTimer);
///////////////////////////////
// Code for switching tabs
///////////////////////////////
var tabs = $(".tabs");
tabs.on("click", function (event) {
// ...
});
function switchTab(tab) {
// ...
}
✗

MyApp.components.photoGallery($(".gallery"));
MyApp.ui.tabs($(".tabs"))

var MyApp = MyApp || {};
MyApp.components = MyApp.components || {};
MyApp.components.photoGallery = function (element) {
// ...
};

var MyApp = MyApp || {};
MyApp.ui = MyApp.ui || {};
MyApp.ui.tabs = function (element) {
// ...
};

Provides a fairly
logical structure.

/javascript
/myapp
/components
/photoGallery.js
/ui
/tabs.js

Avoids polluting the
global context.

window
$ photoGallery tabs profile login plugin

window
$ MyApp plugin
components ui sections
photoGallery tabs profile login

Provides a scope, and allows
"public" and "private" APIs.

MyApp.components.photoGallery = (function (window, document, $) {
// Private properties
// ------------------
var element;
var thumbs;
var current = 0;
var timer = 5000;
// Private methods
// ---------------
var goToNext = function () {
// ...
};
var setupGallery = function () {
thumbs.on("click", function () {
// ...
});
goToNext();
}, timer);
}
return {
// Public methods
// --------------
init : function (el) {
element = $(el);
thumbs = element.find("[data-thumbs]");
setupGallery();
}
};
})(window, document, jQuery);

MyApp.components.photoGallery
// ------------------
var
var
var
var
// Private methods
// ---------------
var
};
var
thumbs.on(
});
setTimeout(
goToNext();
}, timer);
}
return
init
element
thumbs
setupGallery();
}
};
})(window
// ------------------
var element;
var thumbs;
var current = 0;
var timer = 5000;
// Private methods
// ---------------
var goToNext = function () {
// ...
};
var setupGallery = function () {
thumbs.on("click", function () {
// ...
});
goToNext();
}, timer);
}

MyApp.components.photoGallery
// ------------------
var
var
var
var
// Private methods
// ---------------
var
};
var
thumbs.on(
});
setTimeout(
goToNext();
}, timer);
}
return
init
element
thumbs
setupGallery();
}
};
})(window
// Public methods
// --------------
init : function (el) {
element = $(el);
thumbs = element.find("[data-thumbs]");
setupGallery();
}

Allows multiple instances of
the same behaviour, and
prototype inheritance.

B.wishlistMap.ListItem = function (element) {
this.element = $(el);
this.init();
};
B.wishlistMap.ListItem.prototype = {
init : function () {
// ...
},
expandCard : function () {
// ...
},
contractCard : function () {
// ...
}
};

var list = $("#wl-cards");
var items = list.find(".wl-card");
items.each(function () {
$(this).data("ListItem", new B.wishlistMap.ListItem(this));
});
// or
var itemsInstances = [];
items.each(function () {
itemsInstances.push(new B.wishlistMap.ListItem(this));
});

Asynchronous
Module 
Deﬁnition

// photoGallery.js
define([
"jQuery",
"myapp/lib/keycodes",
“myapp/components/Map”
], function ($, keycodes, Map) {
// ...
});

Provides a consistent API
to deﬁne modules.

// photoGallery.js
define([
],
});
// photoGallery.js
define(
);

// photoGallery.js
define([
],
});
// photoGallery.js
[
"jQuery",
"myapp/lib/keycodes",
“myapp/components/Map”
]

It injects the
dependencies in a
callback function…

// photoGallery.js
define([
],
});
// photoGallery.js
function ($, keycodes, Map) {
}

… which gives you
freedom to implement
your solution.

// Module pattern
define([
"myDependency"
], function(myDependency) {
var myPrivateMethod = function() {
};
return {
myPublicMethod : function() {
myPrivateMethod();
}
}
});

// Constructor
define([
"myDependency"
var MyConstructor = function() {
};
MyConstructor.prototype.myPublicMethod = function() {
};
return MyConstructor;
});

// Simple execution
define([
"myDependency"
// do something
});

Whatever is returned by the
callback will be injected when
the module is required.

myapp/
components/
myComponent.js
define(function() {
return "foobar";
});

myapp/
components/
anotherComponent.js
define([
"myapp/components/myComponent"
], function(myComponent) {
console.log(myComponent === "foobar"); // true
})

You can also assign an
object literal to the module.

define({
color : "yellow",
size : "medium",
quantity : 2
});

Modules are deﬁned
by their path…

/myapp
/components
photoGallery.js
define(function() {
});

/myapp
/components
anotherComponent.js
define([
"myapp/components/photoGallery"
], function(photoGallery) {
});

/myapp
/components
anotherComponent.js
define([
"./photoGallery"
});

define(“MyApp.components.photoGallery", function() {
});

define("MyApp.components.anotherComponent", [
"MyApp.components.photoGallery"
});

// jQuery does this internally
define("jquery", function() { return jQuery; });

You can also use the
require method.

var photoGallery = require("MyApp.components.photoGallery");
photoGallery.init();

require(["MyApp.components.photoGallery"], function(photoGallery) {
photoGallery.init();
});

Its behaviour depends on
the AMD implementation.

RequireJS allows
asynchronous
module loading.

r.js optimises and
combines dependencies.

(be careful with dynamic
module requests)

// won't work
require(['section/' + section]);

It expects all
modules to be
already loaded.

It expects all modules
to have a name.

define("myModule", [
"myDependencyA",
"myDependencyB"
],
function() {
});

Since all modules are
loaded, you can use
the simple require
function anywhere.

Gives the AMD
syntax without
extra headaches.

It (probably) works
with your existing
codebase.

Page load
jQuery load
jQuery plugins
application.js

if ($("#my-tabs").length) {
// tabs code
}
if ($("#my-gallery").length) {
// gallery code
}
if ($("#my-map").length) {
// map code
}
✗

Without a ﬂow control, it’s
diﬃcult separating code
execution per page/need.

Single entry points control the
ﬂow of the application.

Page load
Vendor code
Application modules
sectionInitializer
section
module1 module2 module3 module4

define('myapp.core.sectionInitializer', function() {
var section = document.querySelector('body').dataset.section;
require('myapp.section.' + section);
});

// No logic, only modules bootstrapping
define('myapp.section.profile',
[
'myapp.components.photoGallery',
'myapp.components.activityFeed',
'myapp.ui.Tabs'
], function(photoGallery, activityFeed, Tabs) {
photoGallery.init($('[data-user-photo-gallery]'));
activityFeed.init($('[data-user-activity-feed]'));
new Tabs($('[data-user-section-tabs]'));
new Tabs($(‘[data-user-report-type-tabs]'));
});

Those initializers contain no
logic, they only init modules.

Page load
Vendor code
Application modules
moduleInitializer
module1 module2 module3 module4
module3 HTML
module4 HTML
module1 HTML
module2 HTML

// moduleInitializer
$("[data-module]").each(function () {
var module = $(this).data("module");
require("myapp.modules." + module).init(this);
});

Each module
“initializes itself”.

Action/section free,
global use.

Observable (server)
“When a new episode is
available, I’ll notify all pirat—I
mean—clients."

Observer (client/pirate)
“Whenever the server notiﬁes
me about a new episode, I’ll
download it.”

Yo, can you give me a
shout out whenever a new
GoT episode comes out?
Sure, my good sire!

YO
"THE RAINS OF
CASTAMERE" IS OUT GET
IT WHILE IT’S HOT
Cool, then I’ll download
it! It’ll surely by a very
happy episode <3

// Pirate observes torrent server
torrentServer.on("new-got-episode", function (name) {
this.download(name);
});
// Torrent server publishes that it has a new GoT episode
this.trigger("new-got-episode", "The Rains of Castamere");

Facilitates the
communication
between modules.

All modules have no
knowledge about each other,
except for the Mediator.

MEDIATOR
Mediator, please tell me
when a new The Walking
Dead episode comes out
Sure thing

MEDIATOR
Mediator, please tell me
when a new Mythbusters
episode comes out
Groovy.
Hey, I’ll want that
as well!
Jammin'.

MEDIATOR
Mediator, there’s a new
The Walking Dead episode!
Here’s the link!
Yo folks, there’s a new
The Walking Dead
episode! Here’s the link!
Oh yeah, I’ll get it
right now!

MEDIATOR
Mediator, there’s a new
Mythbusters episode!
Here’s the link!
Yo everyone, there’s a
new Mythbusters
episode! Here’s the link!
Cool, I’ll download
it!
Tnx yo!

// Pirate 1 subscribes to mediator
mediator.on("new-twd-episode", function (data) {
console.log("Downloading " + data.name + " from " + data.link);
});
mediator.on("new-mythbusters-episode", function (data) {
});
// Pirate 2 subscribes to mediator
mediator.on("new-mythbusters-episode", function (data) {
});
// Torrent server 1 publishes on mediator
mediator.trigger("new-twd-episode", {
link : "http://foo.bar",
name : "The Suicide King"
});
// Torrent server 2 publishes on mediator
mediator.trigger("new-mythbusters-episode", {
link : "http://theillegalbay.br",
name : "Hollywood Myths"
});

Everyone knows only
the Mediator.

// MyApp.myModule now has the `on`, `off` and `trigger` methods
$.extend(MyApp.myModule, EventEmitter.prototype);
MyApp.components.myModule.trigger("my-event", "my-data");

AMD
vs.
CommonJS
vs.
Plain Objects
vs.
ES6

Will you use client-side
code on the server-side?

Events
vs.
Promises
vs.
Dependency Injection
vs.
ES6

In the end, there’s no
unique solution.

Choose whatever makes
you and your team more
comfortable.

If you do it right,
JavaScript can be fun.

THANKS!slideshare.net/eshiota
github.com/eshiota
@shiota

Modular and Event-Driven JavaScript

More Related Content

What's hot (20)

Similar to Modular and Event-Driven JavaScript (20)

More from Eduardo Shiota Yasuda (12)

Recently uploaded (20)

Modular and Event-Driven JavaScript