JsDay - It's not you, It's me (or how to avoid being coupled with a Javascript framework)

4,711 views
3,580 views

Published on

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 snippet of code) to avoid being coupled to a specific framework

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,711
On SlideShare
0
From Embeds
0
Number of Embeds
160
Actions
Shares
0
Downloads
68
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JsDay - It's not you, It's me (or how to avoid being coupled with a Javascript framework)

  1. “It’s not you, It’s me”
  2. How to avoid beingcoupled 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. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr.
  7. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter
  8. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter Marco.. who? basically anyone else
  9. Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com
  10. Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com Conference organizer with From The Front
  11. Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com Conference organizer with From The Front and a javascript pervert
  12. http://welovestyles.com/love-pictures/
  13. http://everyoneneedsanalgonquin.com/2012/03/25/fruit-season/ http://welovestyles.com/love-pictures/
  14. General Purpose Frameworks http://geekadelphia.com/2008/05/01/sick-ink-brah-alex-hillmans-geeky-love-hate-tattoos/
  15. ABOUT LOVE #1Love is a given, hatred is acquired. Doug Horton
  16. Definitionframe·work n.A structure for supporting or enclosing somethingelse, especially a skeletal support used as the basis forsomething 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 timecode 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. General purposeframework may seem the right solution to handle complexity Long life cycle websites 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. General purpose What about updates?framework may seem the right solution to clientside environment is handle complexity always changing Long life cycle websites 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. General purpose What about updates? How many patches didframework may seem you make in your the right solution to clientside environment is always changing framework over years? handle complexity Long life cycle websites 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. Counterintuitivelysituation is even worse Short life cycle websites http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/
  35. Counterintuitively Less analysis andsituation is even worse foresight Short life cycle websites http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/
  36. Did you make any Counterintuitively Less analysis and patch in yoursituation is even worse foresight framework over years? Short life cycle websites http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/
  37. Our job is evolving
  38. Its the browser, baby
  39. Its 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. Own scripts built on a known framework case study 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. Own scripts built on a Brand new website known framework with responsive design case study 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. Own scripts built on a Brand new website same old frw over 3g? known framework with responsive design or rewrite all scripts? case study 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. Desktop$LAB .script("jquery.js").wait() .script("scripts.js") Mobile$LAB .script("xui.js").wait() .script("scripts.js")
  48. Desktop$LAB .script("jquery.js").wait() .script("scripts.js") Mobile$LAB .script("xui.js").wait() .script("scripts.js")
  49. Its 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 #2What is known as a French Kiss in the English speaking world is called an English Kiss in France.
  57. Loops
  58. $.each(items, function(i, item) { [...]});Ext.each(items, function(item, i) { [...]});_.each(items, function(item, i) { [...]});items.each(function(item, i) { [...]});
  59. $.each(items, function(i, item) { [...]});Ext.each(items, function(item, i) { [...]});_.each(items, function(item, i) { [...]});items.each(function(item, i) { [...]});
  60. $.each(items, function(i, item) { [...]});Ext.each(items, function(item, i) { [...]});_.each(items, function(item, i) { [...]});items.each(function(item, i) { [...]});
  61. $.each(items, function(i, item) { [...]});
  62. $.each(items, function(i, item) { [...]});for (var i = 0; i < items.length; i++) { [...]};
  63. $.each(items, function(i, item) { [...]});for (var i = 0; i < items.length; i++) { [...]};
  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. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(conf)conf.clicked.bind(conf)
  93. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(conf)conf.clicked.bind(conf)
  94. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(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 = MyNS.bind(conf.clicked, conf);myElm.onclick = $.proxy(conf.clicked, conf);
  109. AAAARGGGHHH http://digitivity.org/1044/rss-kill-your-productivity-make-you-insane-waste-time
  110. MyNS.bind = function(func, context) {     return function() {     return func.apply(context, arguments); };}myElm.onclick = MyNS.bind(conf.clicked, conf);
  111. MyNS.bind = function(func, context) {     $.proxy(func, context);}myElm.onclick = MyNS.bind(conf.clicked, conf);
  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. 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"};
  116. 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"};
  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. $.extend(default, config);Ext.apply(default, config);_.extend(default, config);Object.extend(default, config);
  122. MyNS.extend = function(destination, source) { $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  123. MyNS.extend = function(destination, source) { $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  124. MyNS.extend = function(destination, source) { Ext.apply(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  125. MyNS.extend = function(destination, source) { _.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  126. MyNS.extend = function(destination, source) { Object.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  127. Wasn’t it bad to delegate? http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
  128. MyNS.extend = function(destination, source) { $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  129. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config);}
  130. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, 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({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
  133. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
  134. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
  135. Event Driven Design
  136. MyNS.Layer = function(content, config){ [...]}
  137. MyNS.Layer("Sorry, an error occured");
  138. MyNS.notify("error", { msg: "Sorry, an error occured"});
  139. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  140. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  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. AdvantagesMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  148. Advantages Sem anticMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  149. Advantages Sem anticMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);}); More Flexible
  150. AdvantagesUnpluggable
  151. MyNS.notify("error", { msg: "Sorry, an error occured"});
  152. almost decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
  153. What about the dom?
  154. Actually decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
  155. Ain’t that bad http://locomente.blogspot.it/2012/02/single-unemployed.html
  156. LOVE FACT #32 out of 5 people marry their first love.
  157. Advantages of this approach
  158. 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
  159. Build our own architecture http://www.alegriphotos.com/Cards_castle-lphoto-ce5fe99d397c7bf789b6b43d64bf5683.html
  160. Improve javascript skills http://edtechdigest.wordpress.com/2010/09/06/6-reasons-why-students-need-21st-century-skills/
  161. You got me, I will drop my framework
  162. are you sure? http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
  163. it might be the right one http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
  164. the whole point is
  165. BE A JAVASCRIPT PERVERT
  166. BE A JAVASCRIPT PERVERT play with javascript discover your limits
  167. BE A JAVASCRIPT PERVERT play with javascript discover your limits
  168. BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks
  169. BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground
  170. BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground javascript is fun
  171. BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground javascript is fun javascript is lovable
  172. BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground javascript is fun javascript is lovable but you need to...
  173. know when to stop
  174. love your framework https://bit.ly/saybanana https://bit.ly/ratebanana marco@fromthefront.it http://cedmax.com @cedmax

×