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

“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.

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

Deﬁnitionframe·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/

That awkward moment...

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

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-beneﬁts

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-beneﬁts

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-beneﬁts

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

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&mediaﬁlter=images

LOVE FACT #2What is known as a French Kiss in the English speaking world is called an English Kiss in France.

$.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++) { [...]};

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)

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 = -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];) { [...]};

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 Beneﬁts 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;

$.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);

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); };}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

$.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) { 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({ 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);});

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 ﬁrst 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 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

http://2012.jsday.it	54
http://lanyrd.com	36
http://speakerrate.com	32
http://us-w1.rockmelt.com	3
http://twitter.com	1

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

by Marco Cedaro

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 126

Statistics

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