• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascript framework)
 

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

on

  • 2,980 views

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

Statistics

Views

Total Views
2,980
Views on SlideShare
2,831
Embed Views
149

Actions

Likes
3
Downloads
67
Comments
0

7 Embeds 149

http://2012.jsday.it 62
http://lanyrd.com 37
http://speakerrate.com 32
https://twitter.com 13
http://us-w1.rockmelt.com 3
http://twitter.com 1
http://www.feedspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • “It’s not you, It’s me”
    • How to avoid beingcoupled with a Javascript framework.
    • Even if you loved it.Even if it was the right one.
    • 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/
    • ABOUT LOVE #1Love is a given, hatred is acquired. Doug Horton
    • 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.
    • A little history http://mattstone.blogs.com/photos/christian_art_genesis/adam-eve-and-the-tree.html
    • Once upon a timecode snippet “dhtml” if (document.all) http://creativecriminals.com/print/scotch-tape-beyond-strong/
    • Then
    • Then
    • Then
    • Then
    • Then
    • That awkward moment...
    • That awkward moment...
    • Now
    • Why did they get so popular? DOM access Cross browser implementation Shorthands Community scripts
    • Drawbacks
    • Community Support
    • Updating is a mess
    • 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
    • General purpose What about updates?framework may seem the right solution to clientside environment is handle complexity always changing Long life cycle websites http://sproutsocial.com/insights/2011/11/how-to-iphone-ipad-friendly/ - http://pressganger.blogspot.it/2012/03/blog-progress-update.html - http://news.brothersoft.com/internet-explorer-10-focuses-html5-improves-performance-16036.html
    • General purpose What about updates? How many patches didframework may seem you make in your the right solution to clientside environment is always changing framework over years? handle complexity Long life cycle websites http://sproutsocial.com/insights/2011/11/how-to-iphone-ipad-friendly/ - http://pressganger.blogspot.it/2012/03/blog-progress-update.html - http://news.brothersoft.com/internet-explorer-10-focuses-html5-improves-performance-16036.html
    • 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/
    • 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/
    • 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/
    • Our job is evolving
    • Its the browser, baby
    • Its the browser, baby
    • Some of them are just not built for maintainability
    • Some of them are just not built for simplicity
    • Some of them are just not built for love
    • 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 frw over 3g? known framework with responsive design or rewrite all scripts? case study http://www.naba.it/newsletter_09_10/naba_n184.html - http://sevenspark.com/product/agility-responsive-minimal-html5-template/ - http://middleclasshell.com/republicans-ignore-catholics-when-it-comes-to-unemployment-benefits
    • 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")
    • Its 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 #2What 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) { [...]});
    • $.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 = 0; i < items.length; i++) { [...]};var len = items.length;for (var i = 0; i < len; i++) { [...]};
    • for (var i = 0; i < items.length; i++) { [...]};var len = items.length;for (var i = 0; i < len; i++) { [...]};
    • for (var i = -1; ++i < items.length;) { [...]};
    • for (var i = -1; ++i < items.length;) { [...]};
    • for (var i = -1; ++i < items.length;) { [...]};
    • for (var i = -1; ++i < items.length;) { [...]};var len = items.length;for (var i = -1; ++i < len;) { [...]};
    • for (var i = -1, item;item = items[++i];) { [...]};
    • for (var i = -1, item;item = items[++i];) { [...]};
    • for (var i = -1, item;item = items[++i];) { [...]};
    • var i = 0;while (i < items.length) { [...] i++;};
    • var i = 0, len = items.length;while (i < len) { [...] i++;};
    • Vanilla Loops PROS A lot of options 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
    • Wrapper Pattern http://www.pinkblog.it/post/8396/comprare-i-preservativi-vi-imbarazza
    • 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);
    • MyNS.extend = function(destination, source) { $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
    • MyNS.extend = function(destination, source) { $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
    • MyNS.extend = function(destination, source) { Ext.apply(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
    • MyNS.extend = function(destination, source) { _.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
    • MyNS.extend = function(destination, source) { Object.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
    • Wasn’t it bad to delegate? http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
    • MyNS.extend = function(destination, source) { $.extend(default, config);}var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}
    • MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config);}
    • MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config);}
    • MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config);}
    • MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
    • MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
    • MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
    • Event Driven Design
    • MyNS.Layer = function(content, config){ [...]}
    • 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);});
    • AdvantagesMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
    • Advantages Sem anticMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
    • Advantages Sem anticMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);}); More Flexible
    • AdvantagesUnpluggable
    • MyNS.notify("error", { msg: "Sorry, an error occured"});
    • almost decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
    • What about the dom?
    • 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 #32 out of 5 people marry their first love.
    • 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 our 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/
    • You got me, I will drop my framework
    • are you sure? http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
    • it might be the right one http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
    • the whole point is
    • BE A JAVASCRIPT PERVERT
    • BE A JAVASCRIPT PERVERT play with javascript discover your limits
    • BE A JAVASCRIPT PERVERT play with javascript discover your limits
    • BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks
    • BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground
    • BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground javascript is fun
    • BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground javascript is fun javascript is lovable
    • BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground javascript is fun javascript is lovable but you need to...
    • know when to stop
    • love your framework https://bit.ly/saybanana https://bit.ly/ratebanana marco@fromthefront.it http://cedmax.com @cedmax