jsday - it's not you, it's me (or how to avoid being coupled with a javascript framework)
DESCRIPTION
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 frameworkTRANSCRIPT
“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¤t=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);
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
[email protected]://cedmax.com@cedmax
https://bit.ly/saybanana
https://bit.ly/ratebanana