FFWD.PRO - 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/

LOVE FACT #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/

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 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 purposeframework may seem New browser, new the right solution to framework version handle complexity Long life cycle websites http://sproutsocial.com/insights/2011/11/how-to-iphone-ipad-friendly/ - http://pressganger.blogspot.it/2012/03/blog-progress-update.html - http://news.brothersoft.com/internet-explorer-10-focuses-html5-improves-performance-16036.html

General purpose How many patches didframework may seem New browser, new you make in your the right solution to framework version framework over years? handle complexity Long life cycle websites http://sproutsocial.com/insights/2011/11/how-to-iphone-ipad-friendly/ - http://pressganger.blogspot.it/2012/03/blog-progress-update.html - http://news.brothersoft.com/internet-explorer-10-focuses-html5-improves-performance-16036.html

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 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-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 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-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 = -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++) { [...]};//and counting -> http://jsperf.com/loops/33

Vanilla loop PROS Lots of ﬂavors 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

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

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

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

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

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

Goalsmodify a single ﬁle to update menu do not depend on website implementation do not interfere with website implementation

AJAX:MicroAjax0.4kB

AJAX: DOM:MicroAjax TinyDOM0.4kB 0.4kB

AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kB

AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });});

AJAX: DOM: DOMEvents:MicroAjax TinyDOM Vine0.4kB 0.4kB 0.8kBOUR CODE:microAjax("static/nav.html", function (res) { $.prependBody(res); vine.bind("ftf_xsite_sel", "change", function(e){ var s = $.id("ftf_xsite"); var href = s.options[s.selectedIndex].value; if (href) { document.location.href = href; } });}); SIZE: 1.8kB

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

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.

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 yourFOUNDATION CODE

Work to decouple yourFOUNDATION 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 play with javascript

BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs

BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs let github be your playground

BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs let github be your playground javascript is fun

BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs let github be your playground javascript is fun javascript is lovable

BE A JAVASCRIPT PERVERT play with javascriptdiscover your own project needs let github be your playground javascript is fun javascript is lovable but you also need to...

know when to stop

♥ your framework http://bit.ly/jsbanana marco@fromthefront.it http://cedmax.com @cedmax

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

by Marco Cedaro on Jun 11, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 3

Statistics

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