Ever wondered how to get rid of that spaghetti, single-filed JavaScript code? Wouldn't it be nice if you could write maintainable modules, easily test them, port them to different projects, handle its library dependencies, and have them decoupled from other modules? In this talk, we'll see how using the AMD API and an event-driven design will help taming an application's JavaScript code and scaling it to the future and beyond.

1. Modular JavaScript Heaven
with AMD and Events
@shiota ConFoo 2015

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

5. * 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.

6. JavaScript is awesome!

8. But sometimes it sucks.

10. It may become unreadable
and unmaintainable.

11. (function(){
window.app = jQuery.extend({
init: function(){
tab = $('.tabs li > a.tab-toggle');
tabs = $('.tabs').find('> div');
if (tabs.length > 1){
tab.each(function (i){$(this).attr('href', '#content-' + ++i)});
tabs.each(function(i){$(this).attr('id', 'content-' + ++i)});
tabs.addClass('tab-inactive');
$('.tabs li:first-child a').addClass('state-active');
}
$('#initial-cash, #financing_value_vehicles, #tax, #bid-initial-cash, #bid-product-value').maskMoney({
thousands: '.',
decimal: ',',
allowZero: true,
allowNegative: false,
defaultZero: true
});
/** FINANCING CALCULATOR **/
$("#financing_value_vehicles").on("blur", function(){
var price = (accounting.unformat($(this).val(), ",")) || 0;
var suggestedInitialPayment = price * 0.2;
var formattedResult = accounting.formatMoney(suggestedInitialPayment, "", "2", ".", ",");
$("#initial-cash").val(formattedResult);
});
$("#calculate-financing").click(function(event){
var price = (accounting.unformat($("#financing_value_vehicles").val(), ",")) || 0;
var rate = (accounting.unformat($("#tax").val(), ",") / 100) || 0;
var initialCash = (accounting.unformat($("#initial-cash").val(), ",")) || 0;
var value = (accounting.unformat($("#amount-finance").val(), ",")) || 0;
var finance = price - initialCash;
var months = (accounting.unformat($("#prize_parcela").val(), ",")) || 0;
var tax = parseFloat(rate);

12. (single JS file,
173 LOC inside one function,
at least 7 different concerns)

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

15. $(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);
});
});
}
});
});
});

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

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

18. Agenda
Making it modular
Controlling the flow
Communicating through events

19. MODULES

20. Single responsability, part
of a complex system.

22. Isolated behaviour
and knowledge.

24. Testable.

26. Extensible and modifiable.

28. (good taste is optional)

29. May be replaced and reused.

31. Namespaces

32. Helps organising the
code in separate blocks.

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

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

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

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

37. Provides a fairly
logical structure.

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

39. Avoids polluting the
global context.

40. window
$ photoGallery tabs profile login plugin

41. window
$ MyApp plugin
components ui sections
photoGallery tabs profile login

42. Module pattern

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

44. 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 () {
// ...
});
setTimeout(function () {
goToNext();
}, timer);
}
return {
// Public methods
// --------------
init : function (el) {
element = $(el);
thumbs = element.find("[data-thumbs]");
setupGallery();
}
};
})(window, document, jQuery);

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

46. MyApp.components.photoGallery
// Private properties
// ------------------
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();
}

47. It's "singleton-like".

48. Constructors & Prototypes

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

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

52. 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));
});

53. AMD

54. Asynchronous
Module
Definition

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

56. Provides a consistent API
to define modules.

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

58. It handles dependencies.

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

60. It injects the
dependencies in a
callback function…

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

62. … which gives you
freedom to implement
your solution.

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

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

65. // Simple execution
define([
"myDependency"
], function(myDependency) {
// do something
});

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

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

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

69. You can also assign an
object literal to the module.

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

71. Modules are defined
by their path…

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

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

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

75. … or by their identifier.

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

77. define("MyApp.components.anotherComponent", [
"MyApp.components.photoGallery"
], function(photoGallery) {
});

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

79. You can also use the
require method.

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

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

82. Its behaviour depends on
the AMD implementation.

83. RequireJS vs. Almond

85. RequireJS allows
asynchronous
module loading.

86. <script src="javascript/require.js" data-main="javascript/myapp/app"></script>

88. Be REALLY careful
with that.

89. r.js optimises and
combines dependencies.

90. (be careful with dynamic
module requests)

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

93. Lean, 1kb AMD loader.

94. It expects all
modules to be
already loaded.

95. <script src="javascript/almond.js"></script>
<script src="javascript/vendor/jquery-1.11.2.js"></script>
<script src="javascript/vendor/EventEmitter.js"></script>
<script src="javascript/myapp/components/photoGallery.js"></script>
<script src="javascript/myapp/components/myComponent.js"></script>
<script src="javascript/myapp/section/login.js"></script>
<script src="javascript/myapp/section/profile.js"></script>
<script src="javascript/myapp/ui/dropdown.js"></script>
<script src="javascript/myapp/ui/tabs.js"></script>
<script src="javascript/myapp/core/sectionInitializer.js"></script>
<script src="javascript/myapp/app.js"></script>

96. <script src="javascript/almond.js"></script>
<script src="javascript/app-41884634e80f3516.js"></script>

97. It expects all modules
to have a name.

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

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

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

101. Gives the AMD
syntax without
extra headaches.

102. It (probably) works
with your existing
codebase.

103. APPLICATION FLOW

104. Single entry points

105. (function(){
window.app = jQuery.extend({
init: function(){
tab = $('.tabs li > a.tab-toggle');
tabs = $('.tabs').find('> div');
if (tabs.length > 1){
tab.each(function (i){$(this).attr('href', '#content-' + ++i)});
tabs.each(function(i){$(this).attr('id', 'content-' + ++i)});
tabs.addClass('tab-inactive');
$('.tabs li:first-child a').addClass('state-active');
}
$('#initial-cash, #financing_value_vehicles, #tax, #bid-initial-cash, #bid-product-value').maskMoney({
thousands: '.',
decimal: ',',
allowZero: true,
allowNegative: false,
defaultZero: true
});
/** FINANCING CALCULATOR **/
$("#financing_value_vehicles").on("blur", function(){
var price = (accounting.unformat($(this).val(), ",")) || 0;
var suggestedInitialPayment = price * 0.2;
var formattedResult = accounting.formatMoney(suggestedInitialPayment, "", "2", ".", ",");
$("#initial-cash").val(formattedResult);
});
$("#calculate-financing").click(function(event){
var price = (accounting.unformat($("#financing_value_vehicles").val(), ",")) || 0;
var rate = (accounting.unformat($("#tax").val(), ",") / 100) || 0;
var initialCash = (accounting.unformat($("#initial-cash").val(), ",")) || 0;
var value = (accounting.unformat($("#amount-finance").val(), ",")) || 0;
var finance = price - initialCash;
var months = (accounting.unformat($("#prize_parcela").val(), ",")) || 0;
var tax = parseFloat(rate);
var nominator = (Math.pow(1 + tax, months));
var denominator = ((Math.pow(1 + tax, months)) - 1);
var formattedFinance = accounting.formatMoney(finance, "", "2", ".", ",");
$("amount-finance").val(formattedFinance);
var financingValue = finance*nominator*tax/denominator;
var result = accounting.formatMoney(financingValue, "R$ ", "2", ".", ",");
$(".calculator_financing li.result p.value").text(result);
this.button = $("#calc");
if( result != ""){
$("a.button").remove();
this.button.after("<a href='financiamento/new?vehicle_value="+price+"' class='button'>Cote Agora</a>");
};
event.preventDefault();
});
$("#initial-cash").bind("blur", function () {
var price = (accounting.unformat($("#financing_value_vehicles").val(), ",")) || 0;
var initialCash = (accounting.unformat($("#initial-cash").val(), ",")) || 0;
var finance = price - initialCash;
var formattedValue = accounting.formatMoney(finance, "", "2", ".", ",");
$("#amount-finance").val(formattedValue);
});
/** ------------ **/
/** BID CALCULATOR **/
$("input#calculate-bid").click(function(event){
var price = (accounting.unformat($("#bid-product-value").val(), ",")) || 0;
var rate = (accounting.unformat($("#bid-tax").val(), ",") / 100) || 0;
var initialCash = (accounting.unformat($("#bid-initial-cash").val(), ",")) || 0;
var value = (accounting.unformat($("#bid-amount-finance").val(), ",")) || 0;
var finance = price - initialCash;
var months = (accounting.unformat($("#bid-prize_parcela").val(), ",")) || 0;
var tax = parseFloat(rate);
var nominator = (Math.pow(1 + tax, months));
var denominator = ((Math.pow(1 + tax, months)) - 1);
var formattedFinance = accounting.formatMoney(finance, "", "2", ".", ",");
$("#bid-amount-finance").val(formattedFinance);
var result = accounting.formatMoney(((finance*nominator*tax/denominator)), "R$ ", "2", ".", ",");
$(".calculator_bid li.result p.value").text(result);
event.preventDefault();
});
$("#bid-initial-cash").bind("blur", function () {
var price = (accounting.unformat($("#bid-product-value").val(), ",")) || 0;
var initialCash = (accounting.unformat($("#bid-initial-cash").val(), ",")) || 0;
var finance = price - initialCash;
var formattedValue = accounting.formatMoney(finance, "", "2", ".", ",");
$("#bid-amount-finance").val(formattedValue);
});
/** ------------ **/
$('.state-active').each(function(i){
active_tab = $(this).attr('href')
$(this).parents('section').find('div' + active_tab).addClass('tab-active')
});
$('.tooltip').hide();
if ($("html").is(".lt-ie9")) {
$('a').hover(
function(){
$(this).siblings('.tooltip').show();
},
function(){
$(this).siblings('.tooltip').hide();
}
);
} else {
$('a').hover(
function(){
$(this).siblings('.tooltip').fadeIn();
},
function(){
$(this).siblings('.tooltip').fadeOut();
}
);
}
tab.live('click', function(event){
event.preventDefault();
link = $(this).attr('href')
el = $(this).parents('.tabs')
el.find('div').removeClass('tab-active');
el.find('a').removeClass('state-active');
$(this).addClass('state-active')
el.find('div' + link).addClass('tab-active');
});
$('a').unbind('click').hasClass('state-active');
$('a.state-active').unbind('click');
$("#schedule nav a").live("click", function(event){
$('#schedule nav a').removeClass('state-active')
$(this).addClass('state-active')
$(".window div").animate({
top: "" + ($(this).hasClass("prev") ? 0 : -210) + "px"
});
event.preventDefault()
});
app.advertisementNewForm();
},
advertisementNewForm: function(){
$('span.select-image').bind('click', function(){
$(this).parent('li').find('input[type="file"]').click();
});
}
});
$().ready(app.init);
}).call(this);

106. Page load
jQuery load
jQuery plugins
application.js

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

108. Without a flow control, it’s
difficult separating code
execution per page/need.

109. Single entry points control the
flow of the application.

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

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

112. <body data-section='profile'>

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

114. // 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]'));
});

115. Those initializers contain no
logic, they only init modules.

116. Self-registered Modules

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

118. <div data-module="photoGallery">
<!-- gallery markup -->
</div>
<div data-module="wishlistMap">
<!-- map markup -->
</div>

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

120. Each module
“initializes itself”.

121. Action/section free,
global use.

122. EVENTS

123. Observer Pattern

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

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

127. OBSERVER OBSERVABLE

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

129. 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

130. // 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");

131. Mediator

132. Facilitates the
communication
between modules.

134. MEDIATOR

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

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

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

138. 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!

139. 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!

140. // 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) {
console.log("Downloading " + data.name + " from " + data.link);
});
// Pirate 2 subscribes to mediator
mediator.on("new-mythbusters-episode", function (data) {
console.log("Downloading " + data.name + " from " + data.link);
});
// 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"
});

141. Everyone knows only
the Mediator.

142. jQuery

143. MyApp.mediator = $({});

144. Mixin

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

147. GETTING REAL

148. AMD
vs.
CommonJS
vs.
Plain Objects
vs.
ES6

149. How does your
product work?

150. Synchronous or
asynchronous?

151. Do you have a
build process?

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

153. Are you feeling lucky?

154. Events
vs.
Promises
vs.
Dependency Injection
vs.
ES6

155. ¯_(ツ)_/¯

156. In the end, there’s no
unique solution.

157. Choose whatever makes
you and your team more
comfortable.

158. If you do it right,
JavaScript can be fun.

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