by Marco Cedaro on Frontend DEV Conf'13 http://bit.ly/Marco_Cedaro

1. TALK

2. Zombie Code

3. Zombie Code
how to survive a Javascript
Zombiecodeapocalypse

4. First things first
my name is
@cedmax
I work for Shazam
I organize
conferences with
From The Front

5. DISCLAIMER

6. DISCLAIMER
I’m strongly opinionated

7. DISCLAIMER
I’m strongly opinionated
it’s a gift and a curse

8. Basically
Zombies?

9. Basically
Zombies?

10. Zombies!
“Brains, BRAINS, BRains, brains, BRAINS.
BRaiNS, brains, Brains, BRAINS, BRains,
brains, BRAINS.
BRAINS, BRains, brains, BRAINS, brains.”
Ryan Mecum

11. ZOMBIE CODE?

12. it’s not dead code
http://alfasin.com/i-see-dead-code-homage-for-intellij-idea/

13. How to identify
Zombie CODE?

14. What I can tell is..

15. It may seems harmless
http://couchpotatofiles.wordpress.com/2012/03/20/the-walking-dead-ups-the-death-count-and-the-ratings/

16. http://couchpotatofiles.wordpress.com/2012/03/20/the-walking-dead-ups-the-death-count-and-the-ratings/
but it’s NOT

17. and it will, eventually
http://imgur.com/r/SRDBroke/JimqK
CODE

18. during estimation

19. during debugging

20. during development

21. It is dumb code
that makes you dumb as well

22. Hopefully it’s not too late
http://tacticaltshirts.com/shop/shirt-zombies-eat-brains/

23. What's that smell?
Zombies smell worse than
anything you can imagine
Lilith Saintcrow, Strange Angels

24. TIp #1
Code should be appealing

25. function validate( options ) {
// if nothing is selected, return nothing; can't chain anyway
if ( !this.length ) {
if ( options && options.debug && window.console ) {
console.warn( "Nothing selected, can't validate, returning nothing." );
}
return;
}
// check if a validator for this form was already created
var validator = $.data( this[0], "validator" );
if ( validator ) {
return validator;
}
// Add novalidate tag if HTML5.
this.attr( "novalidate", "novalidate" );
validator = new $.validator( options, this[0] );
$.data( this[0], "validator", validator );
if ( validator.settings.onsubmit ) {
this.validateDelegate( ":submit", "click", function( event ) {
if ( validator.settings.submitHandler ) {
validator.submitButton = event.target;
}

26. // allow suppressing validation by adding a cancel class to the
submit button
if ( $(event.target).hasClass("cancel") ) {
validator.cancelSubmit = true;
}
// allow suppressing validation by adding the html5 formnovalidate
attribute to the submit button
if ( $(event.target).attr("formnovalidate") !== undefined ) {
validator.cancelSubmit = true;
}
});
// validate the form on submit
this.submit( function( event ) {
if ( validator.settings.debug ) {
// prevent form submit to be able to see console output
event.preventDefault();
}
function handle() {
var hidden;
if ( validator.settings.submitHandler ) {
if ( validator.submitButton ) {
// insert a hidden input as a replacement for the missing
submit button
hidden = $("<input type='hidden'/>").attr("name",
validator.submitButton.name).val( $
(validator.submitButton).val() ).appendTo(validator.currentForm);
}

27. validator.settings.submitHandler.call( validator,
validator.currentForm, event );
if ( validator.submitButton ) {
// and clean up afterwards; thanks to no-block-scope, hidden
can be referenced
hidden.remove();
}
return false;
}
return true;
}
// prevent submit for invalid forms or custom submit handlers
if ( validator.cancelSubmit ) {
validator.cancelSubmit = false;
return handle();
}
if ( validator.form() ) {
if ( validator.pendingRequest ) {
validator.formSubmitted = true;
return false;
}
return handle();
} else {
validator.focusInvalid();
return false;
}
});
}
return validator;
}

28. HOW LONG IS THAT?

29. function validate( options ) {
// if nothing is selected, return nothing; can't chain anyway
if ( !this.length ) {
if ( options && options.debug && window.console ) {
console.warn( "Nothing selected, can't validate, returning nothing." );
}
return;
}
// check if a validator for this form was already created
var validator = $.data( this[0], "validator" );
if ( validator ) {
return validator;
}
// Add novalidate tag if HTML5.
this.attr( "novalidate", "novalidate" );
validator = new $.validator( options, this[0] );
$.data( this[0], "validator", validator );
if ( validator.settings.onsubmit ) {
this.validateDelegate( ":submit", "click", function( event ) {
if ( validator.settings.submitHandler ) {
validator.submitButton = event.target;
}
// allow suppressing validation by adding a cancel class to the submit button
if ( $(event.target).hasClass("cancel") ) {
validator.cancelSubmit = true;
}
// allow suppressing validation by adding the html5 formnovalidate attribute to the submit button
if ( $(event.target).attr("formnovalidate") !== undefined ) {
validator.cancelSubmit = true;
}
});

30. // validate the form on submit
this.submit( function( event ) {
if ( validator.settings.debug ) {
// prevent form submit to be able to see console output
event.preventDefault();
}
function handle() {
var hidden;
if ( validator.settings.submitHandler ) {
if ( validator.submitButton ) {
// insert a hidden input as a replacement for the missing submit button
hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val( $
(validator.submitButton).val() ).appendTo(validator.currentForm);
}
validator.settings.submitHandler.call( validator, validator.currentForm, event );
if ( validator.submitButton ) {
// and clean up afterwards; thanks to no-block-scope, hidden can be referenced
hidden.remove();
}
return false;
}
return true;
}
// prevent submit for invalid forms or custom submit handlers
if ( validator.cancelSubmit ) {
validator.cancelSubmit = false;
return handle();
}
if ( validator.form() ) {
if ( validator.pendingRequest ) {
validator.formSubmitted = true;
return false;
}
return handle();
} else {
validator.focusInvalid();
return false;
}
});
}
return validator;
}

31. 14 (FOURTEEN!) ifs

32. function validate( options ) {
// if nothing is selected, return nothing; can't chain anyway
if ( !this.length ) {
if ( options && options.debug && window.console ) {
console.warn( "Nothing selected, can't validate, returning nothing." );
}
return;
}
// check if a validator for this form was already created
var validator = $.data( this[0], "validator" );
if ( validator ) {
return validator;
}
// Add novalidate tag if HTML5.
this.attr( "novalidate", "novalidate" );
validator = new $.validator( options, this[0] );
$.data( this[0], "validator", validator );
if ( validator.settings.onsubmit ) {
this.validateDelegate( ":submit", "click", function( event ) {
if ( validator.settings.submitHandler ) {
validator.submitButton = event.target;
}
// allow suppressing validation by adding a cancel class to the submit button
if ( $(event.target).hasClass("cancel") ) {
validator.cancelSubmit = true;
}
// allow suppressing validation by adding the html5 formnovalidate attribute to the submit button
if ( $(event.target).attr("formnovalidate") !== undefined ) {
validator.cancelSubmit = true;
}
});

33. // validate the form on submit
this.submit( function( event ) {
if ( validator.settings.debug ) {
// prevent form submit to be able to see console output
event.preventDefault();
}
function handle() {
var hidden;
if ( validator.settings.submitHandler ) {
if ( validator.submitButton ) {
// insert a hidden input as a replacement for the missing submit button
hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val( $
(validator.submitButton).val() ).appendTo(validator.currentForm);
}
validator.settings.submitHandler.call( validator, validator.currentForm, event );
if ( validator.submitButton ) {
// and clean up afterwards; thanks to no-block-scope, hidden can be referenced
hidden.remove();
}
return false;
}
return true;
}
// prevent submit for invalid forms or custom submit handlers
if ( validator.cancelSubmit ) {
validator.cancelSubmit = false;
return handle();
}
if ( validator.form() ) {
if ( validator.pendingRequest ) {
validator.formSubmitted = true;
return false;
}
return handle();
} else {
validator.focusInvalid();
return false;
}
});
}
return validator;
}

34. are comments a bad thing?

35. TIp #2
Code should talk to you

36. _$ = (function(_) {
return {
pub: function(a, b, c, d) {
for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)
},
sub: function(a, b) {
(_[a] || (_[a] = [])).push(b)
}
}
})({})

37. _$ = (function(_) {
return {
pub: function(a, b, c, d) {
for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)
},
sub: function(a, b) {
(_[a] || (_[a] = [])).push(b)
}
}
})({})
#140bytes

38. _$ = (function() {
var registered = {};
return {
pub: function(event, memo) {
if (registered[event] instanceof Array){
var handlers = [].concat(registered[event]);
for (var i=0, handler; (handler = handlers[i]); i++){
handler.call(this, memo);
}
}
},
sub: function(event, handler) {
if (typeof registered[event] === "undefined"){
registered[event] = [];
}
registered[event].push(handler);
}
};
})();

39. don’t use comments as an
excuse to write bad code

40. //used translate3d to trigger hardware acceleration in webViews
//http://www.youtube.com/watch?v=IKl78ZgJzm4
.animated {
translate: translate3d(0,0,0)
}
/**
* Returns a unique ID for use in HTML id attribute.
* @param {String/Number} nr A name or number of the ID.
* @param {String} [prefix="id-"] The prefix for the ID.
* @return {String} the new ID
*/
function createId(nr, prefix){
//TODO implementation
}

41. //used translate3d to trigger hardware acceleration in webViews
//http://www.youtube.com/watch?v=IKl78ZgJzm4
.animated {
translate: translate3d(0,0,0)
}
/**
* Returns a unique ID for use in HTML id attribute.
* @param {String/Number} nr A name or number of the ID.
* @param {String} [prefix="id-"] The prefix for the ID.
* @return {String} the new ID
*/
function createId(nr, prefix){
//TODO implementation
}
un-avoidable
hacks explanation

42. //used translate3d to trigger hardware acceleration in webViews
//http://www.youtube.com/watch?v=IKl78ZgJzm4
.animated {
translate: translate3d(0,0,0)
}
/**
* Returns a unique ID for use in HTML id attribute.
* @param {String/Number} nr A name or number of the ID.
* @param {String} [prefix="id-"] The prefix for the ID.
* @return {String} the new ID
*/
function createId(nr, prefix){
//TODO implementation
}
un-avoidable
hacks explanationAUTOMATED DOC
GENERATION

43. //used translate3d to trigger hardware acceleration in webViews
//http://www.youtube.com/watch?v=IKl78ZgJzm4
.animated {
translate: translate3d(0,0,0)
}
/**
* Returns a unique ID for use in HTML id attribute.
* @param {String/Number} nr A name or number of the ID.
* @param {String} [prefix="id-"] The prefix for the ID.
* @return {String} the new ID
*/
function createId(nr, prefix){
//TODO implementation
}
un-avoidable
hacks explanationAUTOMATED DOC
GENERATION
TODOs

44. TIp #3
Code should have boundaries

45. Single
responsibility
principle
your best tool
against Zombie Code
since1902
(guaranteed 20 years)

46. No global
pollution
http://leosabanganii.blogspot.co.uk/2012/10/zombie-dressed-activists-protest.html

47. No coupling
http://leosabanganii.blogspot.co.uk/2012/10/zombie-dressed-activists-protest.html
http://ajandcharli.blogspot.co.uk/2011/05/we-dont-do-dead-people.html

48. worst case smell

49. worst case smell
Long methods

50. worst case smell
Long methods
Deep Level of Indentation

51. worst case smell
Long methods
Deep Level of Indentation
Hard to tell what it does

52. worst case smell
Long methods
Deep Level of Indentation
Hard to tell what it does
Lack of portability

53. worst case smell
Long methods
Deep Level of Indentation
Hard to tell what it does
Lack of portability
Hardcoded style/templating

54. worst case smell
Long methods
Deep Level of Indentation
Hard to tell what it does
Lack of portability
Hardcoded style/templating
Logic block duplication

55. worst case smell
Long methods
Deep Level of Indentation
Hard to tell what it does
Lack of portability
Hardcoded style/templating
Logic block duplication
Callback hell

56. And now what?

57. Play cool!

58. Basically
Quarantine

59. Basically
Quarantine

60. QUARANTINE
Most teams are trying to stop further
spread only through quarantines. It's a good
short-term solution, but it won't prevent
long-term population loss.
http://cdmx.it/quarantinequote

61. The broken window

62. “Don't leave "broken windows" (bad
designs, wrong decisions, or poor code)
unrepaired. Fix each one as soon as it is
discovered.”
Programming is insanely detail oriented, and perhaps this is why:
if you're not on top of the details, the perception is that things
are out of control, and it's only a matter of time before your
project spins out of control. Maybe we should be sweating the
small stuff.
Jeff Atwood
http://www.codinghorror.com/blog/2005/06/the-broken-window-theory.html
The broken window

63. Maybe we should be sweating
the small stuff.
Jeff Atwood
http://www.codinghorror.com/blog/2005/06/the-broken-window-theory.html
The broken window

64. Isolate the Zombies

65. define style guidelines

66. function Zombie(personName)
{
function do_something() {
console.log(personName + " just ate a brain!");
}
return {
doSomethingZombiesDo: do_something
};
}
var adam = new Zombie("Adam");
adam.doSomethingZombiesDo();

67. function Zombie(personName)
{
function do_something() {
console.log(personName + " just ate a brain!");
}
return {
doSomethingZombiesDo: do_something
};
}
var adam = new Zombie("Adam");
adam.doSomethingZombiesDo();

68. function Zombie(personName)
{
function do_something() {
console.log(personName + " just ate a brain!");
}
return {
doSomethingZombiesDo: do_something
};
}
var adam = new Zombie("Adam");
adam.doSomethingZombiesDo();

69. function Zombie(personName)
{
function do_something() {
console.log(personName + " just ate a brain!");
}
return {
doSomethingZombiesDo: do_something
};
}
var adam = new Zombie("Adam");
adam.doSomethingZombiesDo();

70. define style guidelines

71. start linting your code

72. Inversion of control freakness
AM I A CONTROL FREAK?

73. start testing your code

74. Unit or Functional?

75. Do both

76. What to test
Unit testing is
supposed to test a
single atomic “unit” of
functionality without
dependencies on
anything else

77. What to test
Unit testing is
supposed to test a
single atomic “unit” of
functionality without
dependencies on
anything else
This is where you start
to run into serious
dependency problems
due to the interrelation
HTML and CSS

78. What to test
Unit testing is
supposed to test a
single atomic “unit” of
functionality without
dependencies on
anything else
This is where you start
to run into serious
dependency problems
due to the interrelation
HTML and CSS
What do you test?
Usually how the user
interface responds to
user input.
Actually, the realm of
functional testing

79. No matter which toolset
Grunt
PhantomJS
JsTestDriver
Buster.js
Karma
Chutzpah
Testem
Qunit
Mocha
Jasmine

80. No matter which toolset
Grunt
PhantomJS
JsTestDriver
Buster.js
Karma
Chutzpah
Testem
Qunit
Mocha
Jasmine

81. As long as it can be automated
share
identify
build
make it
continuous

82. Make it part of the process

83. Make it part of the process
http://rosarioconsulting.net/inspiredtoeducate/?p=706 http://powerbuilder.us/
Estimate testing
http://malyn.edublogs.org/2011/10/16/process-tools-people/

84. Make it part of the process
Do code review
http://rosarioconsulting.net/inspiredtoeducate/?p=706 http://powerbuilder.us/
http://malyn.edublogs.org/2011/10/16/process-tools-people/

85. Make it part of the process
http://rosarioconsulting.net/inspiredtoeducate/?p=706 http://powerbuilder.us/
Involve people
http://malyn.edublogs.org/2011/10/16/process-tools-people/

86. Fear the living? DON’T

87. The team

88. DEVOPS PRODUCT OWNER
qa

89. QA

90. QA
Crucial role in the
process

91. QA
Crucial role in the
process
Quality should be your
goal too

92. QA
Crucial role in the
process
Quality should be your
goal too
Get help for functional
test coverage not to
screw up refactoring

93. Devops

94. Devops
The tough guy

95. Devops
The tough guy
It could be hard to deal
with

96. Devops
The tough guy
It could be hard to deal
with
Get help setting up the
automated process

97. Product owner

98. Product owner
The less interested in
code itself

99. Product owner
The less interested in
code itself
Bring numbers, not
theories

100. Product owner
The less interested in
code itself
Bring numbers, not
theories
Get help not wasting
time, staying focused on
functionalities

101. Others in the team

102. juniors
externallobbyist

103. Juniors

104. Juniors
Pair with them, code
review their (and your)
code

105. Juniors
Pair with them, code
review their (and your)
code
Involve them during the
whole process definition

106. Juniors
Pair with them, code
review their (and your)
code
Involve them during the
whole process definition
Get help keeping things
easy and accessible

107. Lobbyists

108. Lobbyists
They will slow you
down, your brain will be
more prone to be eaten

109. Lobbyists
They will slow you
down, your brain will be
more prone to be eaten
Redirect them to the
product owner

110. Basically
KILL ‘EM ALL (AGAIN?)

111. Basically
KILL ‘EM ALL (AGAIN?)

112. KILL ‘EM ALL (AGAIN?)
“Nothing is impossible to kill.”
Mira Grant, Feed

113. but

114. “Without requirements or design,
programming is the art of adding bugs
to an empty text file”
Louis Srygley
Design for your goal

115. Design for your goal

116. Modular Architecture

118. Scalable JavaScript
Application
Architecture
by Nicholas Zakas

121. core.register("module-name", function(sandbox){
return {
init:function(){
},
destroy:function(){
}
};
});

122. core.register("module-name", function(sandbox){
return {
init:function(){
},
destroy:function(){
}
};
});

123. core.register("module-name", function(sandbox){
return {
init:function(){
},
destroy:function(){
}
};
});

126. core.register("module-name", function(sandbox){
return {
init:function(){
var user = sandbox.getUser();
},
destroy:function(){
}
};
});

127. core.register("module-name", function(sandbox){
return {
init:function(){
var user = sandbox.getUser();
},
destroy:function(){
}
};
});

129. core.register('module-name', function(sandbox){
return {
init:function(config){
console.log(config.id);
}
};
});
core.configure('module-name', {
id: 'container',
});
core.start('module-name');
core.stop('module-name');

130. core.register('module-name', function(sandbox){
return {
init:function(config){
console.log(config.id);
}
};
});
core.configure('module-name', {
id: 'container',
});
core.start('module-name');
core.stop('module-name');

131. core.register('module-name', function(sandbox){
return {
init:function(config){
console.log(config.id);
}
};
});
core.configure('module-name', {
id: 'container',
});
core.start('module-name');
core.stop('module-name');

132. core.register('module-name', function(sandbox){
return {
init:function(config){
console.log(config.id);
}
};
});
core.configure('module-name', {
id: 'container',
});
core.start('module-name');
core.stop('module-name');

133. core.register('module-name', function(sandbox){
return {
init:function(config){
console.log(config.id);
}
};
});
core.configure('module-name', {
id: 'container',
});
core.start('module-name');
core.stop('module-name');

134. core.register('module-name', function(sandbox){
return {
init:function(config){
console.log(config.id);
}
};
});
core.configure('module-name', {
id: 'container',
});
core.start('module-name');
core.stop('module-name');

137. Event Driven Pattern

138. core.register("module-name", function(sandbox){
return {
init:function(){
sandbox.layer("an error occured");
}
};
});

139. core.register("module-name", function(sandbox){
return {
init:function(){
sandbox.layer("an error occured");
}
};
});

140. sandbox.layer("an error occured");

141. sandbox.publish("error", {
msg: "an error occured"
});

142. sandbox.publish("error", {
msg: "an error occured"
});
core.register("errManager", function(sandbox){
return {
init:function(){
sandbox.subscribe("error", function(err) {
console.log(err.msg)
});
}
};
});

143. sandbox.publish("error", {
msg: "an error occured"
});
core.register("errManager", function(sandbox){
return {
init:function(){
sandbox.subscribe("error", function(err) {
console.log(err.msg)
});
}
};
});

144. sandbox.publish("error", {
msg: "an error occured"
});
core.register("errManager", function(sandbox){
return {
init:function(){
sandbox.subscribe("error", function(err) {
console.log(err.msg)
});
}
};
});

145. sandbox.publish("error", {
msg: "an error occured"
});
core.register("errManager", function(sandbox){
return {
init:function(){
sandbox.subscribe("error", function(err) {
console.log(err.msg)
});
}
};
});

146. sandbox.publish("error", {
msg: "an error occured"
});
core.register("errManager", function(sandbox){
return {
init:function(){
sandbox.subscribe("error", function(err) {
console.log(err.msg)
});
}
};
});

147. sandbox.publish("error", {
msg: "an error occured"
});
core.register("errManager", function(sandbox){
return {
init:function(){
sandbox.subscribe("error", function(err) {
console.log(err.msg)
});
}
};
});

148. sandbox.publish("error", {
msg: "an error occured"
});
core.register("errManager", function(sandbox){
return {
init:function(){
sandbox.subscribe("error", function(err) {
console.log(err.msg)
});
}
};
});

149. sandbox.publish("error", {
msg: "an error occured"
});
core.register("errManager", function(sandbox){
return {
init:function(){
sandbox.subscribe("error", function(err) {
console.log(err.msg)
});
}
};
});

150. sandbox.subscribe("error", function(payload){
console.log(payload.msg);
});
Advantages

151. sandbox.subscribe("error", function(payload){
console.log(payload.msg);
});
Advantages
SEMANTIC

152. sandbox.subscribe("error", function(payload){
console.log(payload.msg);
});
Advantages
SEMANTIC
flexibility

153. Advantages
DECOUPLING

154. “The key is to acknowledge from the
start that you have no idea how this will
grow.When you accept that you don’t
know everything, you begin to design
the system defensively.”
Nicholas Zakas
Overengineering?

155. AMD

156. icon by http://www.deleket.com/
jQuery
Mustache
Libraries Plugins Your scripts

157. icon by http://www.deleket.com/
jQuery
Mustache
Libraries Plugins Your scripts

158. <script src="jquery.min.js"></script>
<script src="mustache.js"></script>
<?php if ($env == "prod") : ?>
<script src="my-code-bundle.js"></script>
<?php else: ?>
<script src="jquery.plugin_1.js"></script>
<script src="jquery.plugin_2.js"></script>
<script src="my-code_1.js"></script>
<script src="my-code_2.js"></script>
<script src="my-code_3.js"></script>
<script src="my-code_4.js"></script>
<script src="my-code_5.js"></script>
<?php endif; ?>

159. var MyNamespace = {};
MyNamespace.MyAwesomeLibrary = function() {
//implementation
};
MyNamespace.AnotherCoolOne = function() {
//implementation
};
MyNamespace.SlightlyCrappyLibrary = function() {
//implementation
};
MyNamespace.BestLibEver = function() {
//implementation
};

160. //API: define(id?, dependencies?, factory);
define("My-Module", ["Another-Module"], function(AnotherModule){
// Do Something
});
one define to rule them all

161. //API: define(id?, dependencies?, factory);
define("My-Module", ["Another-Module"], function(AnotherModule){
// Do Something
});
one define to rule them all

162. //app/config.js
define([], function() {
return {
url: "http://whatever.it/is/",
debug: true
};
});

163. //app/config.js
define([], function() {
return {
url: "http://whatever.it/is/",
debug: true
};
});
//app/config.js
define({
url: "http://whatever.it/is/",
debug: true
});

164. //app/config.js
define([], function() {
return {
url: "http://whatever.it/is/",
debug: true
};
});
//app/config.js
define({
url: "http://whatever.it/is/",
debug: true
});

165. //app/config.js
define([], function() {
return {
url: "http://whatever.it/is/",
debug: true
};
});
//app/config.js
define({
url: "http://whatever.it/is/",
debug: true
});

166. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

167. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

168. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

169. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

170. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

171. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

172. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

173. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

174. //app/myProduct.js
define(["app/config"], function(config) {
return function(id){
return {
getProductUrl: function(){
var prodPath = config.url + "product/" + id;
if (config.debug){
console.log(prodPath)
}
return prodPath;
}
};
};
});

175. <script data-main="app/main" src="require.js"></script>

176. <script data-main="app/main" src="require.js"></script>
//app/main.js
require(["jQuery", "app/myProduct"], function($, Product) {
$(".product").on("click", function(){
var prodID = $(this).data("id");
var prod = new Product(prodID);
document.location.href = prod.getProductUrl();
})
});

177. <script data-main="app/main" src="require.js"></script>
//app/main.js
require(["jQuery", "app/myProduct"], function($, Product) {
$(".product").on("click", function(){
var prodID = $(this).data("id");
var prod = new Product(prodID);
document.location.href = prod.getProductUrl();
})
});

178. <script data-main="app/main" src="require.js"></script>
//app/main.js
require(["jQuery", "app/myProduct"], function($, Product) {
$(".product").on("click", function(){
var prodID = $(this).data("id");
var prod = new Product(prodID);
document.location.href = prod.getProductUrl();
})
});

179. <script data-main="app/main" src="require.js"></script>
//app/main.js
require(["jQuery", "app/myProduct"], function($, Product) {
$(".product").on("click", function(){
var prodID = $(this).data("id");
var prod = new Product(prodID);
document.location.href = prod.getProductUrl();
})
});

180. <script data-main="app/main" src="require.js"></script>
//app/main.js
require(["jQuery", "app/myProduct"], function($, Product) {
$(".product").on("click", function(){
var prodID = $(this).data("id");
var prod = new Product(prodID);
document.location.href = prod.getProductUrl();
})
});

181. Pulling all together

182. define(function(){
'use strict';
return function(sandbox){
//the logic of the module
function doSomething(){
//do something
}
return {
init:function(config){
//the initialization code
sandbox.subscribe('myEventName', doSomething)
},
destroy: function(){
//optional destroy method
}
};
};
});

183. define(function(){
'use strict';
return function(sandbox){
//the logic of the module
function doSomething(){
//do something
}
return {
init:function(config){
//the initialization code
sandbox.subscribe('myEventName', doSomething)
},
destroy: function(){
//optional destroy method
}
};
};
});

184. define(function(){
'use strict';
return function(sandbox){
//the logic of the module
function doSomething(){
//do something
}
return {
init:function(config){
//the initialization code
sandbox.subscribe('myEventName', doSomething)
},
destroy: function(){
//optional destroy method
}
};
};
});

185. define(function(){
'use strict';
return function(sandbox){
//the logic of the module
function doSomething(){
//do something
}
return {
init:function(config){
//the initialization code
sandbox.subscribe('myEventName', doSomething)
},
destroy: function(){
//optional destroy method
}
};
};
});

186. define(function(){
'use strict';
return function(sandbox){
//the logic of the module
function doSomething(){
//do something
}
return {
init:function(config){
//the initialization code
sandbox.subscribe('myEventName', doSomething)
},
destroy: function(){
//optional destroy method
}
};
};
});

187. require(["akase"], function(core) {
core.start("module1");
core.start("module2", {
config: {
debug: true
}
});
core.start("module3", { event: "audio:stop" });
});

188. require(["akase"], function(core) {
core.start("module1");
core.start("module2", {
config: {
debug: true
}
});
core.start("module3", { event: "audio:stop" });
});

189. require(["akase"], function(core) {
core.start("module1");
core.start("module2", {
config: {
debug: true
}
});
core.start("module3", { event: "audio:stop" });
});

190. require(["akase"], function(core) {
core.start("module1");
core.start("module2", {
config: {
debug: true
}
});
core.start("module3", { event: "audio:stop" });
});

191. require(["akase"], function(core) {
core.start("module1");
core.start("module2", {
config: {
debug: true
}
});
core.start("module3", { event: "audio:stop" });
});

192. ākāśe
sanskrit for "in the sky"/"to the sky"
https://github.com/cedmax/akase

193. No such this thing!

194. Basically
Happy Endings?

195. Basically
Happy Endings?

196. you are going to write zombie code
zombie code will always be out there
live with it, embrace it, have a strategy to deal with it