SlideShare a Scribd company logo

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

•
•
Marco Cedaro
Marco Cedaro

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

TechnologyDesign
1 of 211
Download to read offline
“It’s not you, It’s me”
How to avoid being coupled with a Javascript framework.
Even if you loved it. Even if it was the right one.
Hello, who’s speaking? Marco Cedaro @cedmax
Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr.
Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter
Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter Marco.. who? basically anyone else
Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com
Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com Conference organizer with From The Front
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
http://welovestyles.com/love-pictures/
http://everyoneneedsanalgonquin.com/2012/03/25/fruit-season/ http://welovestyles.com/love-pictures/
General Purpose Frameworks http://geekadelphia.com/2008/05/01/sick-ink-brah-alex-hillmans-geeky-love-hate-tattoos/
LOVE FACT #1 Love is a given, hatred is acquired. Doug Horton
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.
A little history http://mattstone.blogs.com/photos/christian_art_genesis/adam-eve-and-the-tree.html
Once upon a time code snippet “dhtml” if (document.all) http://creativecriminals.com/print/scotch-tape-beyond-strong/
Then
Then
Then
Then
Then
Now
Why did they get so popular? DOM access Cross browser implementation Shorthands Community support
Drawbacks
1. Community Support
Let’s Fight http://www.rustybrick.com/prototype-js-vs-jquery-comparison.html -http://www.fotolog.com/alinolandia/36818888/
Where’s your community now? http://www.rustybrick.com/prototype-js-vs-jquery-comparison.html -http://www.fotolog.com/alinolandia/36818888/
2. Updating is a mess
General purpose framework 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
General purpose framework 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
General purpose How many patches did framework 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
Counterintuitively situation is even worse Short life cycle websites http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/
Counterintuitively Less analysis and situation 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/
Did you make any Counterintuitively Less analysis and patch in your situation 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/
Our job is evolving
It's the browser, baby
It's the browser, baby
Some frameworks are just not built for maintainability
Some frameworks are just not built for simplicity
Some frameworks are just not built for love
3. Code Portability
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
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
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
Desktop $LAB .script("jquery.js").wait() .script("scripts.js"); Mobile $LAB .script("xui.js").wait() .script("scripts.js");
Desktop $LAB .script("jquery.js").wait() .script("scripts.js"); Mobile $LAB .script("xui.js").wait() .script("scripts.js");
It's the browser, baby
and the devices http://www.newfangled.com/mobile_technology_and_web_enhanced_devices
and the devices http://www.newfangled.com/mobile_technology_and_web_enhanced_devices
We need our code to be PORTABLE
We need our code to be PORTABLE but how?
DISCLAIMER http://www.destructoid.com/disappointment-a-postmortem-of-l-a-noire-224486.phtml
Go Vanilla http://s394.photobucket.com/albums/pp28/cojohn55/?action=view&current=tasty-thursday-187-lets-get-naked.gif&mediafilter=images
LOVE FACT #2 What is known as a French Kiss in the English speaking world is called an English Kiss in France.
Loops
$.each(items, function(i, item) { [...] }); Ext.each(items, function(item, i) { [...] }); _.each(items, function(item, i) { [...] }); items.each(function(item, i) { [...] });
$.each(items, function(i, item) { [...] }); Ext.each(items, function(item, i) { [...] }); _.each(items, function(item, i) { [...] }); items.each(function(item, i) { [...] });
$.each(items, function(i, item) { [...] }); Ext.each(items, function(item, i) { [...] }); _.each(items, function(item, i) { [...] }); items.each(function(item, i) { [...] });
$.each(items, function(i, item) { [...] }); Ext.each(items, function(item, i) { [...] }); _.each(items, function(item, i) { [...] }); items.each(function(item, i) { [...] });
$.each(items, function(i, item) { [...] });
$.each(items, function(i, item) { [...] }); for (var i = 0; i < items.length; i++) { [...] };
$.each(items, function(i, item) { [...] }); for (var i = 0; i < items.length; i++) { [...] };
operations per second (higher is better)
yes, but... http://www.funnyjunk.com/funny_pictures/3454040/Guess+what/
you should http://www.behaviorgap.com/sketch/things-you-can-control/
operations per second (higher is better)
operations per second (higher is better)
for (var i = 0; i < items.length; i++) { [...] };
for (var i = -1; ++i < items.length;) { [...] }; for (var i = 0; i < items.length; i++) { [...] };
for (var i = -1; ++i < items.length;) { [...] }; for (var i = 0; i < items.length; i++) { [...] };
for (var i = -1; ++i < items.length;) { [...] }; for (var i = 0; i < items.length; i++) { [...] };
for (var i = -1, item;item = items[++i];) { [...] }; for (var i = -1; ++i < items.length;) { [...] }; for (var i = 0; i < items.length; i++) { [...] };
for (var i = -1, item;item = items[++i];) { [...] }; for (var i = -1; ++i < items.length;) { [...] }; for (var i = 0; i < items.length; i++) { [...] };
for (var i = -1, item;item = items[++i];) { [...] }; for (var i = -1; ++i < items.length;) { [...] }; for (var i = 0; i < items.length; i++) { [...] };
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++) { [...] };
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++) { [...] };
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
Vanilla loop PROS Lots of flavors Performance benefits CONS mmm...
wait, what? too many characters?? http://screenrant.com/game-thrones-episode-7-recap-spoilers-benm-117660/
Zip It! http://screenrant.com/austin-powers-4-2-ross-50006/
...and minify http://www.destentor.nl/algemeen/show/3347136/Minime-sleept-site-voor-rechter-om-sexvideo.ece
Yeah, baby, yeah http://www.destentor.nl/algemeen/show/3347136/Minime-sleept-site-voor-rechter-om-sexvideo.ece
Context Binding
var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
var conf = { name: "jsDay", clicked: function(event) { alert(this.name); } } myElm.onclick = conf.clicked;
$.proxy(conf.clicked, conf); conf.clicked.createDelegate(conf); conf.clicked.bind(conf) conf.clicked.bind(conf)
$.proxy(conf.clicked, conf); conf.clicked.createDelegate(conf); conf.clicked.bind(conf) conf.clicked.bind(conf)
$.proxy(conf.clicked, conf); conf.clicked.createDelegate(conf); conf.clicked.bind(conf) conf.clicked.bind(conf)
myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments); } })(conf);
myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments); } })(conf);
myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments); } })(conf);
myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments); } })(conf);
myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments); } })(conf);
myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments); } })(conf);
argh, my eyes are bleeding.. http://www.accessexcellence.org/AE/mspot/tbs/episode3a/ep3a06.php
MyNS.bind = function(func, context) {     return function() {         func.apply(context, arguments);     }; }
MyNS.bind = function(func, context) {     return function() {         func.apply(context, arguments);     }; }
MyNS.bind = function(func, context) {     return function() {         func.apply(context, arguments);     }; }
MyNS.bind = function(func, context) {     return function() {         func.apply(context, arguments);     }; }
MyNS.bind = function(func, context) {     return function() {         func.apply(context, arguments);     }; }
MyNS.bind = function(func, context) {     return function() {         func.apply(context, arguments);     }; } myElm.onclick = MyNS.bind(conf.clicked, conf);
MyNS.bind = function(func, context) {     return function() {         func.apply(context, arguments);     }; } myElm.onclick = MyNS.bind(conf.clicked, conf); myElm.onclick = $.proxy(conf.clicked, conf);
AAAARGGGHHH http://digitivity.org/1044/rss-kill-your-productivity-make-you-insane-waste-time
MyNS.bind = function(func, context) {      return function() {     return func.apply(context, arguments); }; } myElm.onclick = MyNS.bind(conf.clicked, conf);
MyNS.bind = function(func, context) {      $.proxy(func, context); } myElm.onclick = MyNS.bind(conf.clicked, conf);
Design Patterns http://failblog.org/vote
Wrapper Pattern
MyNS.bind = function(func, context) {      $.proxy(func, context); } myElm.onclick = MyNS.bind(conf.clicked, conf);
MyNS.bind = function(func, context) {      $.proxy(func, context); } myElm.onclick = MyNS.bind(conf.clicked, conf);
MyNS.bind = function(func, context) {      $.proxy(func, context); } myElm.onclick = MyNS.bind(conf.clicked, conf);
Wrapper Pattern http://www.pinkblog.it/post/8396/comprare-i-preservativi-vi-imbarazza
sorry I should have said “NSFW” and, moreover... http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
sorry I should have said “NSFW” and, moreover... http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
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"};
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"};
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"};
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"};
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"};
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"};
$.extend(default, config); Ext.apply(default, config); _.extend(default, config); Object.extend(default, config);
$.extend(default, config); Ext.apply(default, config); _.extend(default, config); Object.extend(default, config);
$.extend(default, config); Ext.apply(default, config); _.extend(default, config); Object.extend(default, config);
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); [...] }
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); [...] }
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); [...] }
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); [...] }
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); [...] }
Wasn’t it bad to delegate? http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
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 });
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 });
deeply into it
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");
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");
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");
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");
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");
MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config); } MyNS.Layer("Sorry, an error occured");
MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config); } MyNS.Layer("Sorry, an error occured");
MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config); } MyNS.Layer("Sorry, an error occured");
MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config); } MyNS.Layer("Sorry, an error occured");
MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config); } MyNS.Layer("Sorry, an error occured");
Event Driven Design
MyNS.Layer = function(content, config){ [...] } MyNS.Layer("Sorry, an error occured");
MyNS.Layer("Sorry, an error occured");
MyNS.notify("error", { msg: "Sorry, an error occured" });
MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
MyNS.notify("error", { msg: "Sorry, an error occured" }); MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
Advantages MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
Advantages Sem antic MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
Advantages Sem antic MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); }); More Flexible
Advantages Unpluggable
almost decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
What about ... ?
a real world example
DISCLAIMER #2 http://www.noncipossocredere.com/2012/04/26/lo-spam-arriva-soprattutto-dallindia/
From The Front
Not only the conference
basically a lot of stuff
basically a lot of stuff @verlok @aureliari @sid05 @lucasalvini
cross site menu
Goals modify a single file to update menu do not depend on website implementation do not interfere with website implementation
AJAX: MicroAjax 0.4kB
AJAX: DOM: MicroAjax TinyDOM 0.4kB 0.4kB
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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; } }); });
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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; } }); });
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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; } }); });
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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; } }); });
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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; } }); });
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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; } }); });
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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; } }); });
AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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
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; } }); });
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; } }); });
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; } }); });
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; } }); });
Actually decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
Ain’t that bad http://locomente.blogspot.it/2012/02/single-unemployed.html
LOVE FACT #3 2 out of 5 people marry their first love.
You may want a silver bullet http://www.splattlog.com/2009/02/28/the-wolf-man-ecco-la-trasformazione-di-benicio-del-toro/
Do you really need it?
Work to decouple your FOUNDATION CODE
Work to decouple your FOUNDATION CODE AND TEST IT!
Let your UI rely on a framework http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
Advantages of this approach
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
Build own architecture http://www.alegriphotos.com/Cards_castle-lphoto-ce5fe99d397c7bf789b6b43d64bf5683.html
Improve javascript skills http://edtechdigest.wordpress.com/2010/09/06/6-reasons-why-students-need-21st-century-skills/
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")
the whole point is
BE A JAVASCRIPT PERVERT
BE A JAVASCRIPT PERVERT
BE A JAVASCRIPT PERVERT play with javascript
BE A JAVASCRIPT PERVERT play with javascript discover your own project needs
BE A JAVASCRIPT PERVERT play with javascript discover your own project needs
BE A JAVASCRIPT PERVERT play with javascript discover your own project needs let github be your playground
BE A JAVASCRIPT PERVERT play with javascript discover your own project needs let github be your playground javascript is fun
BE A JAVASCRIPT PERVERT play with javascript discover your own project needs let github be your playground javascript is fun javascript is lovable
BE A JAVASCRIPT PERVERT play with javascript discover your own project needs let github be your playground javascript is fun javascript is lovable but you also need to...
know when to stop
♥ your framework http://bit.ly/jsbanana marco@fromthefront.it http://cedmax.com @cedmax

Recommended

jsDay - Javascript as a programming language
jsDay - Javascript as a programming languagejsDay - Javascript as a programming language
jsDay - Javascript as a programming languageMarco Cedaro
 
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...Marco Cedaro
 
YOOX Launch & Learn - Javascript as a programming language
YOOX Launch & Learn - Javascript as a programming language YOOX Launch & Learn - Javascript as a programming language
YOOX Launch & Learn - Javascript as a programming languageMarco Cedaro
 
The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersPeter-Paul Koch
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)webdagene
 
Client-side Development 2016
Client-side Development 2016Client-side Development 2016
Client-side Development 2016Huge
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 

Recommended

jsDay - Javascript as a programming language
jsDay - Javascript as a programming languagejsDay - Javascript as a programming language
jsDay - Javascript as a programming languageMarco Cedaro
 
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...Marco Cedaro
 
YOOX Launch & Learn - Javascript as a programming language
YOOX Launch & Learn - Javascript as a programming language YOOX Launch & Learn - Javascript as a programming language
YOOX Launch & Learn - Javascript as a programming languageMarco Cedaro
 
The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersPeter-Paul Koch
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)webdagene
 
Client-side Development 2016
Client-side Development 2016Client-side Development 2016
Client-side Development 2016Huge
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 
Joys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseJoys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseMarc Fasel
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)Dave Olsen
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Atomic design
Atomic designAtomic design
Atomic designBrad Frost
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
WebDev References
WebDev ReferencesWebDev References
WebDev Referencesdynamis
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architectureJasper Moelker
 
Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022ZainAsgar1
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce
 
Devoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsDevoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsMax Katz
 
Do Try This At Home
Do Try This At HomeDo Try This At Home
Do Try This At Homebdillard
 
An introduction to Emulsify
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsifyvaluebound
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 
Atomic Design con Pattern Lab
Atomic Design con Pattern LabAtomic Design con Pattern Lab
Atomic Design con Pattern LabMauricio Angulo Sillas
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature CreatureChristian Heilmann
 

More Related Content

What's hot

Joys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseJoys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseMarc Fasel
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)Dave Olsen
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
WebDev References
WebDev ReferencesWebDev References
WebDev Referencesdynamis
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architectureJasper Moelker
 
Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022ZainAsgar1
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce
 
Devoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsDevoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsMax Katz
 
Do Try This At Home
Do Try This At HomeDo Try This At Home
Do Try This At Homebdillard
 
An introduction to Emulsify
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsifyvaluebound
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 

What's hot (20)

Joys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseJoys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the Enterprise
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Atomic design
Atomic designAtomic design
Atomic design
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
WebDev References
WebDev ReferencesWebDev References
WebDev References
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architecture
 
Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
 
Devoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsDevoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
 
Do Try This At Home
Do Try This At HomeDo Try This At Home
Do Try This At Home
 
An introduction to Emulsify
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsify
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
Atomic Design con Pattern Lab
Atomic Design con Pattern LabAtomic Design con Pattern Lab
Atomic Design con Pattern Lab
 

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

The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature CreatureChristian Heilmann
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real worldJason Grigsby
 
10 Ways To Improve Your Code( Neal Ford)
10 Ways To Improve Your Code( Neal Ford)10 Ways To Improve Your Code( Neal Ford)
10 Ways To Improve Your Code( Neal Ford)guestebde
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming languageMarco Cedaro
 
Active Web Development
Active Web DevelopmentActive Web Development
Active Web DevelopmentDivya Manian
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web developmentChristian Heilmann
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
SMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEOSMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEOOnely
 
Pain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakPain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakSigma Software
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsCaesar Chi
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideFramebench
 

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

The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
 
10 Ways To Improve Your Code( Neal Ford)
10 Ways To Improve Your Code( Neal Ford)10 Ways To Improve Your Code( Neal Ford)
10 Ways To Improve Your Code( Neal Ford)
 
Don't screw it up! How to build durable API
Don't screw it up! How to build durable API Don't screw it up! How to build durable API
Don't screw it up! How to build durable API
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
10 Ways To Improve Your Code
10 Ways To Improve Your Code10 Ways To Improve Your Code
10 Ways To Improve Your Code
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming language
 
Active Web Development
Active Web DevelopmentActive Web Development
Active Web Development
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web development
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Meteorjs
MeteorjsMeteorjs
Meteorjs
 
Meteorjs
MeteorjsMeteorjs
Meteorjs
 
SMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEOSMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEO
 
Pain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakPain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr Sugak
 
Cloud Economics
Cloud EconomicsCloud Economics
Cloud Economics
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 

Recently uploaded

The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 

Recently uploaded (20)

The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 

FFWD.PRO - 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 being coupled 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
  • 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 #1 Love is a given, hatred is acquired. Doug Horton
  • 15. 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.
  • 16. A little history http://mattstone.blogs.com/photos/christian_art_genesis/adam-eve-and-the-tree.html
  • 17. Once upon a time code 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
  • 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 purpose framework 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 purpose framework 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 did framework 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. Counterintuitively situation 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 and situation 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 your situation 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
  • 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
  • 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");
  • 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 #2 What 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) { [...] });
  • 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
  • 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;
  • 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
  • 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"};
  • 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 });
  • 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");
  • 147. MyNS.Layer = function(content, config){ [...] } 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. Advantages MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
  • 159. Advantages Sem antic MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
  • 160. Advantages Sem antic MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); }); More Flexible
  • 162. almost decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
  • 164. a real world example
  • 165. DISCLAIMER #2 http://www.noncipossocredere.com/2012/04/26/lo-spam-arriva-soprattutto-dallindia/
  • 167. Not only the conference
  • 168. basically a lot of stuff
  • 169. basically a lot of stuff @verlok @aureliari @sid05 @lucasalvini
  • 171. Goals modify a single file to update menu do not depend on website implementation do not interfere with website implementation
  • 173. AJAX: DOM: MicroAjax TinyDOM 0.4kB 0.4kB
  • 174. AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB
  • 175. AJAX: DOM: DOMEvents: MicroAjax TinyDOM Vine 0.4kB 0.4kB 0.8kB OUR 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 Vine 0.4kB 0.4kB 0.8kB OUR 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 Vine 0.4kB 0.4kB 0.8kB OUR 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 Vine 0.4kB 0.4kB 0.8kB OUR 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 Vine 0.4kB 0.4kB 0.8kB OUR 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 Vine 0.4kB 0.4kB 0.8kB OUR 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 Vine 0.4kB 0.4kB 0.8kB OUR 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 Vine 0.4kB 0.4kB 0.8kB OUR 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 #3 2 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 your FOUNDATION CODE
  • 193. Work to decouple your FOUNDATION 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")
  • 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 javascript discover your own project needs
  • 205. BE A JAVASCRIPT PERVERT play with javascript discover your own project needs
  • 206. BE A JAVASCRIPT PERVERT play with javascript discover your own project needs let github be your playground
  • 207. BE A JAVASCRIPT PERVERT play with javascript discover your own project needs let github be your playground javascript is fun
  • 208. BE A JAVASCRIPT PERVERT play with javascript discover your own project needs let github be your playground javascript is fun javascript is lovable
  • 209. BE A JAVASCRIPT PERVERT play with javascript discover 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