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

  • 907 views
Uploaded 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 …

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
907
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Hello, who’s speaking? Marco Cedaro @cedmax
  • 5. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr.
  • 6. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter
  • 7. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter Marco.. who? basically anyone else
  • 8. Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com
  • 9. Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com Conference organizer with From The Front
  • 10. 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
  • 11. http://welovestyles.com/love-pictures/
  • 12. http://everyoneneedsanalgonquin.com/2012/03/25/fruit-season/ http://welovestyles.com/love-pictures/
  • 13. General Purpose Frameworks http://geekadelphia.com/2008/05/01/sick-ink-brah-alex-hillmans-geeky-love-hate-tattoos/
  • 14. LOVE FACT #1Love is a given, hatred is acquired. Doug Horton
  • 15. 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.
  • 16. A little history http://mattstone.blogs.com/photos/christian_art_genesis/adam-eve-and-the-tree.html
  • 17. Once upon a timecode snippet “dhtml” if (document.all) http://creativecriminals.com/print/scotch-tape-beyond-strong/
  • 18. Then
  • 19. Then
  • 20. Then
  • 21. Then
  • 22. Then
  • 23. Now
  • 24. Why did they get so popular? DOM access Cross browser implementation Shorthands Community support
  • 25. Drawbacks
  • 26. 1. Community Support
  • 27. Let’s Fight http://www.rustybrick.com/prototype-js-vs-jquery-comparison.html -http://www.fotolog.com/alinolandia/36818888/
  • 28. Where’s your community now? http://www.rustybrick.com/prototype-js-vs-jquery-comparison.html -http://www.fotolog.com/alinolandia/36818888/
  • 29. 2. Updating is a mess
  • 30. 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
  • 31. General purposeframework may seem New browser, new the right solution to framework version 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 How many patches didframework may seem New browser, new you make in your the right solution to framework version 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
  • 33. 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/
  • 34. 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/
  • 35. 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/
  • 36. Our job is evolving
  • 37. Its the browser, baby
  • 38. Its the browser, baby
  • 39. Some frameworks are just not built for maintainability
  • 40. Some frameworks are just not built for simplicity
  • 41. Some frameworks are just not built for love
  • 42. 3. Code Portability
  • 43. 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
  • 44. 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
  • 45. Own scripts built on a Brand new website same old bloat code known framework with responsive design over 3g? 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. Desktop$LAB .script("jquery.js").wait() .script("scripts.js"); Mobile$LAB .script("xui.js").wait() .script("scripts.js");
  • 47. Desktop$LAB .script("jquery.js").wait() .script("scripts.js"); Mobile$LAB .script("xui.js").wait() .script("scripts.js");
  • 48. Its the browser, baby
  • 49. and the devices http://www.newfangled.com/mobile_technology_and_web_enhanced_devices
  • 50. and the devices http://www.newfangled.com/mobile_technology_and_web_enhanced_devices
  • 51. We need our code to be PORTABLE
  • 52. We need our code to be PORTABLE but how?
  • 53. DISCLAIMER http://www.destructoid.com/disappointment-a-postmortem-of-l-a-noire-224486.phtml
  • 54. Go Vanilla http://s394.photobucket.com/albums/pp28/cojohn55/?action=view&current=tasty-thursday-187-lets-get-naked.gif&mediafilter=images
  • 55. LOVE FACT #2What is known as a French Kiss in the English speaking world is called an English Kiss in France.
  • 56. Loops
  • 57. $.each(items, function(i, item) { [...]});Ext.each(items, function(item, i) { [...]});_.each(items, function(item, i) { [...]});items.each(function(item, i) { [...]});
  • 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 = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};
  • 71. for (var i = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};
  • 72. for (var i = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};
  • 73. for (var i = -1, item;item = items[++i];) { [...]};for (var i = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};
  • 74. for (var i = -1, item;item = items[++i];) { [...]};for (var i = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};
  • 75. for (var i = -1, item;item = items[++i];) { [...]};for (var i = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};
  • 76. for (var i = -1, item;item = items[++i];) { [...]};var i = 0;while (i < items.length) { [...] i++;};for (var i = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};
  • 77. for (var i = -1, item;item = items[++i];) { [...]};var i = 0;while (i < items.length) { [...] i++;};for (var i = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};
  • 78. for (var i = -1, item;item = items[++i];) { [...]};var i = 0;while (i < items.length) { [...] i++;};for (var i = -1; ++i < items.length;) { [...]};for (var i = 0; i < items.length; i++) { [...]};//and counting -> http://jsperf.com/loops/33
  • 79. Vanilla loop PROS Lots of flavors Performance benefits CONS mmm...
  • 80. wait, what?too many characters?? http://screenrant.com/game-thrones-episode-7-recap-spoilers-benm-117660/
  • 81. Zip It! http://screenrant.com/austin-powers-4-2-ross-50006/
  • 82. ...and minify http://www.destentor.nl/algemeen/show/3347136/Minime-sleept-site-voor-rechter-om-sexvideo.ece
  • 83. Yeah, baby, yeah http://www.destentor.nl/algemeen/show/3347136/Minime-sleept-site-voor-rechter-om-sexvideo.ece
  • 84. Context Binding
  • 85. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); }}myElm.onclick = conf.clicked;
  • 86. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); }}myElm.onclick = conf.clicked;
  • 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. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(conf)conf.clicked.bind(conf)
  • 91. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(conf)conf.clicked.bind(conf)
  • 92. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(conf)conf.clicked.bind(conf)
  • 93. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments); }})(conf);
  • 94. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments); }})(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. argh, my eyes are bleeding.. http://www.accessexcellence.org/AE/mspot/tbs/episode3a/ep3a06.php
  • 100. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}
  • 101. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}
  • 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);    };}myElm.onclick = MyNS.bind(conf.clicked, conf);
  • 106. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}myElm.onclick = MyNS.bind(conf.clicked, conf);myElm.onclick = $.proxy(conf.clicked, conf);
  • 107. AAAARGGGHHH http://digitivity.org/1044/rss-kill-your-productivity-make-you-insane-waste-time
  • 108. MyNS.bind = function(func, context) {     return function() {     return func.apply(context, arguments); };}myElm.onclick = MyNS.bind(conf.clicked, conf);
  • 109. MyNS.bind = function(func, context) {     $.proxy(func, context);}myElm.onclick = MyNS.bind(conf.clicked, conf);
  • 110. Design Patterns http://failblog.org/vote
  • 111. Wrapper Pattern
  • 112. MyNS.bind = function(func, context) {     $.proxy(func, context);}myElm.onclick = MyNS.bind(conf.clicked, conf);
  • 113. MyNS.bind = function(func, context) {     $.proxy(func, context);}myElm.onclick = MyNS.bind(conf.clicked, conf);
  • 114. MyNS.bind = function(func, context) {     $.proxy(func, context);}myElm.onclick = MyNS.bind(conf.clicked, conf);
  • 115. Wrapper Pattern http://www.pinkblog.it/post/8396/comprare-i-preservativi-vi-imbarazza
  • 116. sorry I should have said“NSFW” and, moreover... http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
  • 117. sorry I should have said“NSFW” and, moreover... http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
  • 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. 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"};
  • 124. $.extend(default, config);Ext.apply(default, config);_.extend(default, config);Object.extend(default, config);
  • 125. $.extend(default, config);Ext.apply(default, config);_.extend(default, config);Object.extend(default, config);
  • 126. $.extend(default, config);Ext.apply(default, config);_.extend(default, config);Object.extend(default, config);
  • 127. MyNS.extend = function(destination, source) { return $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  • 128. MyNS.extend = function(destination, source) { return $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  • 129. MyNS.extend = function(destination, source) { return Ext.apply(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  • 130. MyNS.extend = function(destination, source) { return _.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  • 131. MyNS.extend = function(destination, source) { return Object.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
  • 132. Wasn’t it bad to delegate? http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
  • 133. MyNS.extend = function(destination, source) { return $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}var myEff = new AwesomeEffect("myId", { duration: 100, delay: 1000});
  • 134. MyNS.extend = function(destination, source) { return $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}var myEff = new AwesomeEffect("myId", { duration: 100, delay: 1000});
  • 135. deeply into it
  • 136. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/warn.gif", }, config); new LightBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 137. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/warn.gif", }, config); new LightBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 138. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/warn.gif", }, config); new LightBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 139. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/warn.gif", }, config); new LightBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 140. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/warn.gif", }, config); new LightBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 141. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 142. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 143. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 144. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 145. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}MyNS.Layer("Sorry, an error occured");
  • 146. Event Driven Design
  • 147. MyNS.Layer = function(content, config){ [...]}MyNS.Layer("Sorry, an error occured");
  • 148. MyNS.Layer("Sorry, an error occured");
  • 149. MyNS.notify("error", { msg: "Sorry, an error occured"});
  • 150. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 151. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 152. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 153. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 154. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 155. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 156. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 157. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 158. AdvantagesMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 159. Advantages Sem anticMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  • 160. Advantages Sem anticMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);}); More Flexible
  • 161. AdvantagesUnpluggable
  • 162. almost decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
  • 163. What about ... ?
  • 164. a real world example
  • 165. DISCLAIMER #2 http://www.noncipossocredere.com/2012/04/26/lo-spam-arriva-soprattutto-dallindia/
  • 166. From The Front
  • 167. Not only the conference
  • 168. basically a lot of stuff
  • 169. basically a lot of stuff@verlok @aureliari@sid05 @lucasalvini
  • 170. cross site menu
  • 171. Goalsmodify a single file to update menu do not depend on website implementation do not interfere with website implementation
  • 172. AJAX:MicroAjax0.4kB
  • 173. AJAX: DOM:MicroAjax TinyDOM0.4kB 0.4kB
  • 174. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kB
  • 175. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 176. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 177. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 178. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 179. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 180. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 181. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 182. AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });}); SIZE: 1.8kB
  • 183. microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 184. microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 185. FTF.ajax("static/nav.html", { success: function (res) { FTF.dom.prependBody(res); FTF.evt.bind("ftf_xsite", "change", function(e){ var s = FTF("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 186. FTF.ajax("static/nav.html", { success: function (res) { FTF.dom.prependBody(res); FTF.evt.bind("ftf_xsite", "change", function(e){ var s = FTF("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});
  • 187. Actually decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
  • 188. Ain’t that bad http://locomente.blogspot.it/2012/02/single-unemployed.html
  • 189. LOVE FACT #32 out of 5 people marry their first love.
  • 190. You may want a silver bullet http://www.splattlog.com/2009/02/28/the-wolf-man-ecco-la-trasformazione-di-benicio-del-toro/
  • 191. Do you really need it?
  • 192. Work to decouple yourFOUNDATION CODE
  • 193. Work to decouple yourFOUNDATION CODE AND TEST IT!
  • 194. Let your UI rely on a framework http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
  • 195. Advantages of this approach
  • 196. 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
  • 197. Build own architecture http://www.alegriphotos.com/Cards_castle-lphoto-ce5fe99d397c7bf789b6b43d64bf5683.html
  • 198. Improve javascript skills http://edtechdigest.wordpress.com/2010/09/06/6-reasons-why-students-need-21st-century-skills/
  • 199. Desktop$LAB .script("jquery.js").wait() .script("lightbox.jquery.js") .script("layer.desktop.js") .script("scripts.js"); Mobile$LAB .script("xui.js").wait() .script("layer.mobile.js") .script("scripts.js")
  • 200. the whole point is
  • 201. BE A JAVASCRIPT PERVERT
  • 202. BE A JAVASCRIPT PERVERT
  • 203. BE A JAVASCRIPT PERVERT play with javascript
  • 204. BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs
  • 205. BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs
  • 206. BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs let github be your playground
  • 207. BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs let github be your playground javascript is fun
  • 208. BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs let github be your playground javascript is fun javascript is lovable
  • 209. BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs let github be your playground javascript is fun javascript is lovable but you also need to...
  • 210. know when to stop
  • 211. ♥ your framework http://bit.ly/jsbanana marco@fromthefront.it http://cedmax.com @cedmax