Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

3ca63d4e2f2be0ef47b841e63b564d18?s=128

Marco Cedaro

May 17, 2012
Tweet

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