Zombie Code

1. TALK

2. Zombie Code

3. Zombie Code how to survive a Javascript Zombiecodeapocalypse

4. First things ﬁrst 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://couchpotatoﬁles.wordpress.com/2012/03/20/the-walking-dead-ups-the-death-count-and-the-ratings/

16. http://couchpotatoﬁles.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. deﬁne 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();

70. deﬁne 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 processMake 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 deﬁnition

106. Juniors Pair with them, code review their (and your) code Involve them during the whole process deﬁnition 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 ﬁle” 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(){ } }; });

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');

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

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

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

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

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

187. 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 thing!

194. Basically Happy Endings?

195. Basically Happy Endings?

196. “If you want a happy ending, that depends, of course, on where you stop your story.” OrsonWells Happy ending

197. You can run, you can hide

198. You are going to SHITTY code anyway write

199. face You are going to SHITTY code anyway

200. face You are going to Zombie code anyway

201. Embrace it! http://drezner.foreignpolicy.com/posts/2009/08/18/theory_of_international_politics_and_zombies

202. Don’t improvise

203. Learn to know how to deal with it

204. Until you master it

205. in any case just remember to

206. Aim for the head http://halloween.squidoo.com/get-spooked/aim-for-the-head

208. marco@fromthefront.it http://cedmax.com @cedmax any question?

Zombie Code

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Zombie Code