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 being coupled 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

About me...

Frontend Cowboy Nicola Vitto Jr.

Hello, who’s speaking?

Marco Cedaro @cedmax

About me...

Frontend Cowboy Nicola Vitto Jr.

Javascript PervertRoberto Felter

Hello, who’s speaking?

Marco Cedaro @cedmax

About me...

Frontend Cowboy Nicola Vitto Jr.

Javascript PervertRoberto 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

Hello, who’s speaking?

Marco Cedaro @cedmax

http://welovestyles.com/love-pictures/

http://welovestyles.com/love-pictures/http://everyoneneedsanalgonquin.com/2012/03/25/fruit-season/

General Purpose Frameworkshttp://geekadelphia.com/2008/05/01/sick-ink-brah-alex-hillmans-geeky-love-hate-tattoos/

ABOUT LOVE #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 historyhttp://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

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

Long life cycle websites

General purpose framework may seem the right solution to handle complexity

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

Long life cycle websites

General purpose framework may seem the right solution to handle complexity

What about updates?

clientside environment is always changing

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

Long life cycle websites

General purpose framework may seem the right solution to handle complexity

What about updates?

clientside environment is always changing

How many patches did you make in your

framework over years?

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

Short life cycle websites

Counterintuitively situation is even worse

http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/

Short life cycle websites

Counterintuitively situation is even worse

Less analysis and foresight

http://www.cnbc.com/id/46994692/The_Worst_Jobs_for_2012 - http://indiatransportportal.com/india-transport-studies/

Short life cycle websites

Counterintuitively situation is even worse

Less analysis and foresight

Did you make any patch in your

framework over years?

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

case study

Own scripts built on a known framework

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

case study

Own scripts built on a known framework

Brand new website with responsive design

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

case study

Own scripts built on a known framework

Brand new website with responsive design

same old frw over 3g?or rewrite all scripts?

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

$LAB .script("jquery.js").wait() .script("scripts.js")

$LAB .script("xui.js").wait() .script("scripts.js")

Desktop

Mobile

$LAB .script("jquery.js").wait() .script("scripts.js")

$LAB .script("xui.js").wait() .script("scripts.js")

Desktop

Mobile

It's the browser, baby

and the deviceshttp://www.newfangled.com/mobile_technology_and_web_enhanced_devices

and the deviceshttp://www.newfangled.com/mobile_technology_and_web_enhanced_devices

We need our code to bePORTABLE

We need our code to bePORTABLE

but how?

DISCLAIMER

http://www.destructoid.com/disappointment-a-postmortem-of-l-a-noire-224486.phtml

Go Vanillahttp://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(item, i) { [...]});

Ext.each(items, function(item, i) { [...]});

$.each(items, function(i, item) { [...]});

items.each(function(item, i) { [...]});

_.each(items, function(item, i) { [...]});

Ext.each(items, function(item, i) { [...]});

$.each(items, function(i, item) { [...]});

items.each(function(item, i) { [...]});

_.each(items, function(item, i) { [...]});

Ext.each(items, function(item, i) { [...]});

$.each(items, function(i, item) { [...]});

items.each(function(item, i) { [...]});

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

$.each(items, function(i, item) { [...]});

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;

conf.clicked.bind(conf)

conf.clicked.createDelegate(conf);

$.proxy(conf.clicked, conf);

conf.clicked.bind(conf)

conf.clicked.bind(conf)

conf.clicked.createDelegate(conf);

$.proxy(conf.clicked, conf);

conf.clicked.bind(conf)

conf.clicked.bind(conf)

conf.clicked.createDelegate(conf);

$.proxy(conf.clicked, 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 = $.proxy(conf.clicked, conf);

myElm.onclick = MyNS.bind(conf.clicked, conf);

AAAARGGGHHH

http://digitivity.org/1044/rss-kill-your-productivity-make-you-insane-waste-time

MyNS.bind = function(func, context) {    

}

myElm.onclick = MyNS.bind(conf.clicked, conf);

return function() {    return func.apply(context, arguments);};

MyNS.bind = function(func, context) {    

}

myElm.onclick = MyNS.bind(conf.clicked, conf);

$.proxy(func, context);

Design Patternshttp://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) {

}

var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}

$.extend(default, config);

MyNS.extend = function(destination, source) {

}

var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}

$.extend(default, config);

MyNS.extend = function(destination, source) {

}

var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}

Ext.apply(default, config);

MyNS.extend = function(destination, source) {

}

var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}

_.extend(default, config);

MyNS.extend = function(destination, source) {

}

var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}

Object.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) {

}

var AwesomeEffect = function(id, config){ var default = { delay: 0, duration: 500, transition: "easeOut", }; var options = MyNS.extend(default, config); [...]}

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

});

MyNS.listen("error", function(payload){

MyNS.Layer(payload.msg);

});

Advantages

MyNS.listen("error", function(payload){

MyNS.Layer(payload.msg);

});

Advantages

Semantic

MyNS.listen("error", function(payload){

MyNS.Layer(payload.msg);

});

Advantages

Semantic

More Flexible

Advantages

Unpluggable

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 badhttp://locomente.blogspot.it/2012/02/single-unemployed.html

LOVE FACT #3

2 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

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

BE A JAVASCRIPT PERVERT

get to know microframeworks

play with javascript

discover your limits

BE A JAVASCRIPT PERVERT

get to know microframeworks

let github be your playground

play with javascript

discover your limits

BE A JAVASCRIPT PERVERT

get to know microframeworks

let github be your playground

javascript is fun

play with javascript

discover your limits

BE A JAVASCRIPT PERVERT

get to know microframeworks

let github be your playground

javascript is fun

javascript is lovable

play with javascript

discover your limits

BE A JAVASCRIPT PERVERT

get to know microframeworks

let github be your playground

javascript is fun

javascript is lovablebut you need to...

know when to stop

love your framework

marco@fromthefront.ithttp://cedmax.com@cedmax

https://bit.ly/saybanana

https://bit.ly/ratebanana