It's not you, it's me - jsDay

General purpose Javascript frameworks are the ones that made the language popular in the past, but right now it is a risk to think about our application development and architecture just in relation to our favorite framework.

This talk highlights risks and suggest some techniques (from design patterns to snippets of code) to avoid being coupled to a specific framework.

Transcript

1. “It’s not you, It’s me”
2. How to avoid being coupled with a Javascript framework.
3. Even if you loved it. Even if it was the right one.
4. Even if you loved it. Even if it was the right one.
5. Hello, who’s speaking? Marco Cedaro @cedmax
6. About me... Frontend Cowboy Nicola Vitto Jr. Hello, who’s speaking? Marco Cedaro @cedmax
7. About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter Hello, who’s speaking? Marco Cedaro @cedmax
8. About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter Marco.. who? basically anyone else Hello, who’s speaking? Marco Cedaro @cedmax
9. Actually I am: a Frontend Developer at Spreaker.com Hello, who’s speaking? Marco Cedaro @cedmax
10. Actually I am: a Frontend Developer at Spreaker.com Conference organizer with From The Front Hello, who’s speaking? Marco Cedaro @cedmax
11. Actually I am: a Frontend Developer at Spreaker.com Conference organizer with From The Front and a javascript pervert Hello, who’s speaking? Marco Cedaro @cedmax
12. http://welovestyles.com/love-pictures/
13. http://welovestyles.com/love-pictures/ http://everyoneneedsanalgonquin.com/2012/03/25/fruit-season/
14. General Purpose Frameworks http://geekadelphia.com/2008/05/01/sick-ink-brah-alex-hillmans-geeky-love-hate-tattoos/
15. ABOUT LOVE #1 Love is a given, hatred is acquired. Doug Horton
16. Definition frame·work n. A structure for supporting or enclosing something else, especially a skeletal support used as the basis for something being constructed. gen·er·al-pur·pose adj. Designed for or suitable to more than one use; broadly useful.
17. A little history http://mattstone.blogs.com/photos/christian_art_genesis/adam-eve-and-the-tree.html
18. Once upon a time code snippet “dhtml” if (document.all) http://creativecriminals.com/print/scotch-tape-beyond-strong/
19. Then
20. Then
21. Then
22. Then
23. Then
24. That awkward moment...
25. That awkward moment...
26. Now
27. Why did they get so popular? DOM access Cross browser implementation Shorthands Community scripts
28. Drawbacks
29. Community Support
30. Updating is a mess
31. Long life cycle websites General purpose framework may seem the right solution to handle complexity http://sproutsocial.com/insights/2011/11/how-to-iphone-ipad-friendly/ - http://pressganger.blogspot.it/2012/03/blog-progress-update.html - http://news.brothersoft.com/internet-explorer-10-focuses-html5-improves-performance-16036.html
32. Long life cycle websites General purpose framework may seem the right solution to handle complexity New browser, new framework version http://sproutsocial.com/insights/2011/11/how-to-iphone-ipad-friendly/ - http://pressganger.blogspot.it/2012/03/blog-progress-update.html - http://news.brothersoft.com/internet-explorer-10-focuses-html5-improves-performance-16036.html
33. Long life cycle websites General purpose framework may seem the right solution to handle complexity New browser, new framework version How many patches did you make in your framework over years? http://sproutsocial.com/insights/2011/11/how-to-iphone-ipad-friendly/ - http://pressganger.blogspot.it/2012/03/blog-progress-update.html - http://news.brothersoft.com/internet-explorer-10-focuses-html5-improves-performance-16036.html
34. Short life cycle websites Counterintuitively situation is even worse http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/
35. Short life cycle websites Counterintuitively situation is even worse Less analysis and foresight http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/
36. Short life cycle websites Counterintuitively situation is even worse Less analysis and foresight Did you make any patch in your framework over years? http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/
37. Our job is evolving
38. It's the browser, baby
39. It's the browser, baby
40. Some of them are just not built for maintainability
41. Some of them are just not built for simplicity
42. Some of them are just not built for love
43. Code Portability
44. case study Own scripts built on a known framework http://www.naba.it/newsletter_09_10/naba_n184.html - http://sevenspark.com/product/agility-responsive-minimal-html5-template/ - http://middleclasshell.com/republicans-ignore-catholics-when-it-comes-to-unemployment-benefits
45. case study Own scripts built on a known framework Brand new website with responsive design http://www.naba.it/newsletter_09_10/naba_n184.html - http://sevenspark.com/product/agility-responsive-minimal-html5-template/ - http://middleclasshell.com/republicans-ignore-catholics-when-it-comes-to-unemployment-benefits
46. case study Own scripts built on a known framework Brand new website with responsive design same old bloat code over 3g? http://www.naba.it/newsletter_09_10/naba_n184.html - http://sevenspark.com/product/agility-responsive-minimal-html5-template/ - http://middleclasshell.com/republicans-ignore-catholics-when-it-comes-to-unemployment-benefits
47. $LAB .script("jquery.js").wait() .script("scripts.js") $LAB .script("xui.js").wait() .script("scripts.js") Desktop Mobile
48. $LAB .script("jquery.js").wait() .script("scripts.js") $LAB .script("xui.js").wait() .script("scripts.js") Desktop Mobile
49. It's the browser, baby
50. and the devices http://www.newfangled.com/mobile_technology_and_web_enhanced_devices
51. and the devices http://www.newfangled.com/mobile_technology_and_web_enhanced_devices
52. We need our code to be PORTABLE
53. We need our code to be PORTABLE but how?
54. DISCLAIMER http://www.destructoid.com/disappointment-a-postmortem-of-l-a-noire-224486.phtml
55. Go Vanilla http://s394.photobucket.com/albums/pp28/cojohn55/?action=view&current=tasty-thursday-187-lets-get-naked.gif&mediafilter=images
56. LOVE FACT #2 What is known as a French Kiss in the English speaking world is called an English Kiss in France.
57. Loops
58. _.each(items, function(item, i) { [...] }); Ext.each(items, function(item, i) { [...] }); $.each(items, function(i, item) { [...] }); items.each(function(item, i) { [...] });
59. _.each(items, function(item, i) { [...] }); Ext.each(items, function(item, i) { [...] }); $.each(items, function(i, item) { [...] }); items.each(function(item, i) { [...] });
60. _.each(items, function(item, i) { [...] }); Ext.each(items, function(item, i) { [...] }); $.each(items, function(i, item) { [...] }); items.each(function(item, i) { [...] });
61. $.each(items, function(i, item) { [...] });
62. for (var i = 0; i < items.length; i++) { [...] }; $.each(items, function(i, item) { [...] });
63. for (var i = 0; i < items.length; i++) { [...] }; $.each(items, function(i, item) { [...] });
64. operations per second (higher is better)
65. yes, but... http://www.funnyjunk.com/funny_pictures/3454040/Guess+what/
66. you should http://www.behaviorgap.com/sketch/things-you-can-control/
67. operations per second (higher is better)
68. operations per second (higher is better)
69. for (var i = 0; i < items.length; i++) { [...] };
70. for (var i = 0; i < items.length; i++) { [...] }; var len = items.length; for (var i = 0; i < len; i++) { [...] };
71. for (var i = 0; i < items.length; i++) { [...] }; var len = items.length; for (var i = 0; i < len; i++) { [...] };
72. for (var i = -1; ++i < items.length;) { [...] };
73. for (var i = -1; ++i < items.length;) { [...] };
74. for (var i = -1; ++i < items.length;) { [...] };
75. for (var i = -1; ++i < items.length;) { [...] }; var len = items.length; for (var i = -1; ++i < len;) { [...] };
76. for (var i = -1, item;item = items[++i];) { [...] };
77. for (var i = -1, item;item = items[++i];) { [...] };
78. for (var i = -1, item;item = items[++i];) { [...] };
79. var i = 0; while (i < items.length) { [...] i++; };
80. var i = 0, len = items.length; while (i < len) { [...] i++; };
81. Vanilla Loops PROS A lot of options Performance Benefits CONS mmm...
82. wait, what? too many characters?? http://screenrant.com/game-thrones-episode-7-recap-spoilers-benm-117660/
83. Zip It! http://screenrant.com/austin-powers-4-2-ross-50006/
84. ...and minify http://www.destentor.nl/algemeen/show/3347136/Minime-sleept-site-voor-rechter-om-sexvideo.ece
85. Yeah, baby, yeah http://www.destentor.nl/algemeen/show/3347136/Minime-sleept-site-voor-rechter-om-sexvideo.ece
86. Context Binding
87. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
88. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
89. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
90. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
91. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
92. conf.clicked.bind(conf) conf.clicked.createDelegate(conf); $.proxy(conf.clicked, conf); conf.clicked.bind(conf)
93. conf.clicked.bind(conf) conf.clicked.createDelegate(conf); $.proxy(conf.clicked, conf); conf.clicked.bind(conf)
94. conf.clicked.bind(conf) conf.clicked.createDelegate(conf); $.proxy(conf.clicked, conf); conf.clicked.bind(conf)
95. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) } })(conf);
96. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) } })(conf);
97. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) } })(conf);
98. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) } })(conf);
99. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) } })(conf);
100. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) } })(conf);
101. argh, my eyes are bleeding.. http://www.accessexcellence.org/AE/mspot/tbs/episode3a/ep3a06.php
102. MyNS.bind = function(func, context) { return function() { func.apply(context, arguments); }; }
103. MyNS.bind = function(func, context) { return function() { func.apply(context, arguments); }; }
104. MyNS.bind = function(func, context) { return function() { func.apply(context, arguments); }; }
105. MyNS.bind = function(func, context) { return function() { func.apply(context, arguments); }; }
106. MyNS.bind = function(func, context) { return function() { func.apply(context, arguments); }; }
107. MyNS.bind = function(func, context) { return function() { func.apply(context, arguments); }; } myElm.onclick = MyNS.bind(conf.clicked, conf);
108. MyNS.bind = function(func, context) { return function() { func.apply(context, arguments); }; } myElm.onclick = $.proxy(conf.clicked, conf); myElm.onclick = MyNS.bind(conf.clicked, conf);
109. AAAARGGGHHH http://digitivity.org/1044/rss-kill-your-productivity-make-you-insane-waste-time
110. MyNS.bind = function(func, context) { } myElm.onclick = MyNS.bind(conf.clicked, conf); return function() { return func.apply(context, arguments); };
111. MyNS.bind = function(func, context) { } myElm.onclick = MyNS.bind(conf.clicked, conf); $.proxy(func, context);
112. Design Patterns http://failblog.org/vote
113. Wrapper Pattern
114. Wrapper Pattern http://www.pinkblog.it/post/8396/comprare-i-preservativi-vi-imbarazza
115. http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html sorry I should have said it was NSFW and, moreover...
116. sorry if it might have been NSFW and, moreover... http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
117. var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; [...] } var myEff = new AwesomeEffect("myId", { duration: 100, delay: 1000 }); //{delay: 1000, duration:100, transition: "easeOut"};
118. var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; [...] } var myEff = new AwesomeEffect("myId", { duration: 100, delay: 1000 }); //{delay: 1000, duration:100, transition: "easeOut"};
119. var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; [...] } var myEff = new AwesomeEffect("myId", { duration: 100, delay: 1000 }); //{delay: 1000, duration:100, transition: "easeOut"};
120. var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; [...] } var myEff = new AwesomeEffect("myId", { duration: 100, delay: 1000 }); //{delay: 1000, duration:100, transition: "easeOut"};
121. var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; [...] } var myEff = new AwesomeEffect("myId", { duration: 100, delay: 1000 }); //{delay: 1000, duration:100, transition: "easeOut"};
122. var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; [...] } var myEff = new AwesomeEffect("myId", { duration: 100, delay: 1000 }); //{delay: 1000, duration:100, transition: "easeOut"};
123. _.extend(default, config); Ext.apply(default, config); $.extend(default, config); Object.extend(default, config);
124. MyNS.extend = function(destination, source) { } var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...] } $.extend(default, config);
125. MyNS.extend = function(destination, source) { } var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...] } $.extend(default, config);
126. MyNS.extend = function(destination, source) { } var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...] } Ext.apply(default, config);
127. MyNS.extend = function(destination, source) { } var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...] } _.extend(default, config);
128. MyNS.extend = function(destination, source) { } var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...] } Object.extend(default, config);
129. Wasn’t it bad to delegate? http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
130. MyNS.extend = function(destination, source) { } var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...] } $.extend(default, config);
131. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config); }
132. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config); }
133. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config); }
134. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config); }
135. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config); }
136. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config); }
137. Event Driven Design
138. MyNS.Layer = function(content, config){ [...] }
139. MyNS.Layer("Sorry, an error occured");
140. MyNS.notify("error", { msg: "Sorry, an error occured" });
141. MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
142. MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
143. MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
144. MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
145. MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
146. MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
147. MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
148. MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
149. MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); }); Advantages
150. MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); }); Advantages Semantic
151. MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); }); Advantages Semantic More Flexible
152. Advantages Unpluggable
153. MyNS.notify("error", { msg: "Sorry, an error occured" });
154. almost decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
155. What about the dom?
156. Actually decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
157. Ain’t that bad http://locomente.blogspot.it/2012/02/single-unemployed.html
158. LOVE FACT #3 2 out of 5 people marry their first love.
159. Advantages of this approach
160. Portability & Maintainability http://news.tecnozoom.it/tv-lcd/piu-persone-usano-tv-ed-internet-contemporaneamente-post-16157.html - http://marine.rina.org/CATEGORIE_SERVIZI/Gestione_rischio/servizi/maintenance.aspx
161. Build our own architecture http://www.alegriphotos.com/Cards_castle-lphoto-ce5fe99d397c7bf789b6b43d64bf5683.html
162. Improve javascript skills http://edtechdigest.wordpress.com/2010/09/06/6-reasons-why-students-need-21st-century-skills/
163. You got me, I will drop my framework
164. are you sure? http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
165. it might be the right one http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
166. the whole point is
167. BE A JAVASCRIPT PERVERT
168. play with javascript discover your limits BE A JAVASCRIPT PERVERT
169. play with javascript discover your limits BE A JAVASCRIPT PERVERT
170. play with javascript discover your limits BE A JAVASCRIPT PERVERT get to know microframeworks
171. play with javascript discover your limits BE A JAVASCRIPT PERVERT get to know microframeworks let github be your playground
172. play with javascript discover your limits BE A JAVASCRIPT PERVERT get to know microframeworks let github be your playground javascript is fun
173. play with javascript discover your limits BE A JAVASCRIPT PERVERT get to know microframeworks let github be your playground javascript is fun javascript is lovable
174. play with javascript discover your limits BE A JAVASCRIPT PERVERT get to know microframeworks let github be your playground javascript is fun javascript is lovable but you need to...
175. know when to stop
176. love your framework marco@fromthefront.it http://cedmax.com @cedmax https://bit.ly/saybanana https://bit.ly/ratebanana