Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
“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       ...
Hello, who’s speaking?           Marco Cedaro             @cedmax           About me...             Frontend Cowboy       ...
Hello, who’s speaking?           Marco Cedaro             @cedmax           About me...             Frontend Cowboy       ...
Hello, who’s speaking?           Marco Cedaro             @cedmax           Actually I am:            a Frontend Developer...
Hello, who’s speaking?           Marco Cedaro             @cedmax           Actually I am:            a Frontend Developer...
Hello, who’s speaking?           Marco Cedaro             @cedmax           Actually I am:            a Frontend Developer...
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-t...
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 bas...
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/scotc...
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 scr...
Drawbacks
Community Support
Updating is a mess
General purposeframework may seem the right solution to  handle complexity         Long life cycle websites               ...
General purpose       What about updates?framework may seem the right solution to   clientside environment is  handle comp...
General purpose       What about updates?                                              How many patches didframework may s...
Counterintuitivelysituation is even worse         Short life cycle websites                          http://www.cnbc.com/i...
Counterintuitively     Less analysis andsituation is even worse       foresight         Short life cycle websites         ...
Did you make any   Counterintuitively     Less analysis and                                                               ...
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/new...
Own scripts built on a    Brand new website known framework         with responsive design                         case st...
Own scripts built on a    Brand new website                                           same old frw over 3g? known framewor...
Desktop$LAB   .script("jquery.js").wait()   .script("scripts.js")               Mobile$LAB   .script("xui.js").wait()   .s...
Desktop$LAB   .script("jquery.js").wait()   .script("scripts.js")               Mobile$LAB   .script("xui.js").wait()   .s...
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&me...
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...
$.each(items, function(i, item) {    [...]});Ext.each(items, function(item, i) {    [...]});_.each(items, function(item, i...
$.each(items, function(i, item) {    [...]});Ext.each(items, function(item, i) {    [...]});_.each(items, 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 = function(func, context) {    return function() {        func.apply(context, arguments);    };}myElm.onclick = ...
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.on...
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: "ea...
var AwesomeEffect = function(id, config){    var default = {        delay: 0,        duration: 500,        transition: "ea...
var AwesomeEffect = function(id, config){    var default = {        delay: 0,        duration: 500,        transition: "ea...
var AwesomeEffect = function(id, config){    var default = {        delay: 0,        duration: 500,        transition: "ea...
var AwesomeEffect = function(id, config){    var default = {        delay: 0,        duration: 500,        transition: "ea...
var AwesomeEffect = function(id, config){    var default = {        delay: 0,        duration: 500,        transition: "ea...
$.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){    va...
MyNS.extend = function(destination, source) {   $.extend(default, config);}var AwesomeEffect = function(id, config){    va...
MyNS.extend = function(destination, source) {   Ext.apply(default, config);}var AwesomeEffect = function(id, config){    v...
MyNS.extend = function(destination, source) {   _.extend(default, config);}var AwesomeEffect = function(id, config){    va...
MyNS.extend = function(destination, source) {   Object.extend(default, config);}var AwesomeEffect = function(id, config){ ...
Wasn’t it bad to delegate?                 http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabota...
MyNS.extend = function(destination, source) {   $.extend(default, config);}var AwesomeEffect = function(id, config){    va...
MyNS.Layer = function(content, config){    config = MyNS.extend({        overlayOpacity:0.6,        imageLoading: "/img/lo...
MyNS.Layer = function(content, config){    config = MyNS.extend({        overlayOpacity:0.6,        imageLoading: "/img/lo...
MyNS.Layer = function(content, config){    config = MyNS.extend({        overlayOpacity:0.6,        imageLoading: "/img/lo...
MyNS.Layer = function(content, config){    config = MyNS.extend({        opacity: true,        modal: true,    }, config);...
MyNS.Layer = function(content, config){    config = MyNS.extend({        opacity: true,        modal: true,    }, config);...
MyNS.Layer = function(content, config){    config = MyNS.extend({        opacity: true,        modal: true,    }, 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(paylo...
MyNS.notify("error", {      msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){      MyNS.Layer(paylo...
MyNS.notify("error", {      msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){      MyNS.Layer(paylo...
MyNS.notify("error", {      msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){      MyNS.Layer(paylo...
MyNS.notify("error", {      msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){      MyNS.Layer(paylo...
MyNS.notify("error", {      msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){      MyNS.Layer(paylo...
MyNS.notify("error", {      msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){      MyNS.Layer(paylo...
MyNS.notify("error", {      msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){      MyNS.Layer(paylo...
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...
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-h...
What about the dom?
Actually decoupled         http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broke...
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-161...
Build our own architecture                http://www.alegriphotos.com/Cards_castle-lphoto-ce5fe99d397c7bf789b6b43d64bf5683...
Improve javascript skills               http://edtechdigest.wordpress.com/2010/09/06/6-reasons-why-students-need-21st-cent...
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 yo...
BE A JAVASCRIPT    PERVERT    play with javascript   discover your limits   get to know microframeworks   let github be yo...
BE A JAVASCRIPT    PERVERT    play with javascript   discover your limits   get to know microframeworks   let github be yo...
BE A JAVASCRIPT    PERVERT    play with javascript   discover your limits   get to know microframeworks   let github be yo...
know when to stop
love your framework         https://bit.ly/saybanana         https://bit.ly/ratebanana               marco@fromthefront.it...
Upcoming SlideShare
Loading in …5
×

3

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. “It’s not you, It’s me”
  2. How to avoid beingcoupled with a Javascript framework.
  3. Even if you loved it.Even if it was the right one.
  4. Even if you loved it.Even if it was the right one.
  5. Hello, who’s speaking? Marco Cedaro @cedmax
  6. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr.
  7. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter
  8. Hello, who’s speaking? Marco Cedaro @cedmax About me... Frontend Cowboy Nicola Vitto Jr. Javascript Pervert Roberto Felter Marco.. who? basically anyone else
  9. Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com
  10. Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com Conference organizer with From The Front
  11. 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
  12. http://welovestyles.com/love-pictures/
  13. http://everyoneneedsanalgonquin.com/2012/03/25/fruit-season/ http://welovestyles.com/love-pictures/
  14. General Purpose Frameworks http://geekadelphia.com/2008/05/01/sick-ink-brah-alex-hillmans-geeky-love-hate-tattoos/
  15. ABOUT LOVE #1Love is a given, hatred is acquired. Doug Horton
  16. 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.
  17. A little history http://mattstone.blogs.com/photos/christian_art_genesis/adam-eve-and-the-tree.html
  18. Once upon a timecode snippet “dhtml” if (document.all) http://creativecriminals.com/print/scotch-tape-beyond-strong/
  19. Then
  20. Then
  21. Then
  22. Then
  23. Then
  24. That awkward moment...
  25. That awkward moment...
  26. Now
  27. Why did they get so popular? DOM access Cross browser implementation Shorthands Community scripts
  28. Drawbacks
  29. Community Support
  30. Updating is a mess
  31. 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
  32. 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
  33. 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
  34. 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/
  35. 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/
  36. 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/
  37. Our job is evolving
  38. Its the browser, baby
  39. Its the browser, baby
  40. Some of them are just not built for maintainability
  41. Some of them are just not built for simplicity
  42. Some of them are just not built for love
  43. Code Portability
  44. 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
  45. 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
  46. 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
  47. Desktop$LAB .script("jquery.js").wait() .script("scripts.js") Mobile$LAB .script("xui.js").wait() .script("scripts.js")
  48. Desktop$LAB .script("jquery.js").wait() .script("scripts.js") Mobile$LAB .script("xui.js").wait() .script("scripts.js")
  49. Its the browser, baby
  50. and the devices http://www.newfangled.com/mobile_technology_and_web_enhanced_devices
  51. and the devices http://www.newfangled.com/mobile_technology_and_web_enhanced_devices
  52. We need our code to be PORTABLE
  53. We need our code to be PORTABLE but how?
  54. DISCLAIMER http://www.destructoid.com/disappointment-a-postmortem-of-l-a-noire-224486.phtml
  55. Go Vanilla http://s394.photobucket.com/albums/pp28/cojohn55/?action=view&current=tasty-thursday-187-lets-get-naked.gif&mediafilter=images
  56. LOVE FACT #2What is known as a French Kiss in the English speaking world is called an English Kiss in France.
  57. Loops
  58. $.each(items, function(i, item) { [...]});Ext.each(items, function(item, i) { [...]});_.each(items, function(item, i) { [...]});items.each(function(item, i) { [...]});
  59. $.each(items, function(i, item) { [...]});Ext.each(items, function(item, i) { [...]});_.each(items, function(item, i) { [...]});items.each(function(item, i) { [...]});
  60. $.each(items, function(i, item) { [...]});Ext.each(items, function(item, i) { [...]});_.each(items, function(item, i) { [...]});items.each(function(item, i) { [...]});
  61. $.each(items, function(i, item) { [...]});
  62. $.each(items, function(i, item) { [...]});for (var i = 0; i < items.length; i++) { [...]};
  63. $.each(items, function(i, item) { [...]});for (var i = 0; i < items.length; i++) { [...]};
  64. operations per second (higher is better)
  65. yes, but... http://www.funnyjunk.com/funny_pictures/3454040/Guess+what/
  66. you should http://www.behaviorgap.com/sketch/things-you-can-control/
  67. operations per second (higher is better)
  68. operations per second (higher is better)
  69. for (var i = 0; i < items.length; i++) { [...]};
  70. for (var i = 0; i < items.length; i++) { [...]};var len = items.length;for (var i = 0; i < len; i++) { [...]};
  71. for (var i = 0; i < items.length; i++) { [...]};var len = items.length;for (var i = 0; i < len; i++) { [...]};
  72. for (var i = -1; ++i < items.length;) { [...]};
  73. for (var i = -1; ++i < items.length;) { [...]};
  74. for (var i = -1; ++i < items.length;) { [...]};
  75. for (var i = -1; ++i < items.length;) { [...]};var len = items.length;for (var i = -1; ++i < len;) { [...]};
  76. for (var i = -1, item;item = items[++i];) { [...]};
  77. for (var i = -1, item;item = items[++i];) { [...]};
  78. for (var i = -1, item;item = items[++i];) { [...]};
  79. var i = 0;while (i < items.length) { [...] i++;};
  80. var i = 0, len = items.length;while (i < len) { [...] i++;};
  81. Vanilla Loops PROS A lot of options Performance Benefits CONS mmm...
  82. wait, what?too many characters?? http://screenrant.com/game-thrones-episode-7-recap-spoilers-benm-117660/
  83. Zip It! http://screenrant.com/austin-powers-4-2-ross-50006/
  84. ...and minify http://www.destentor.nl/algemeen/show/3347136/Minime-sleept-site-voor-rechter-om-sexvideo.ece
  85. Yeah, baby, yeah http://www.destentor.nl/algemeen/show/3347136/Minime-sleept-site-voor-rechter-om-sexvideo.ece
  86. Context Binding
  87. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); }}myElm.onclick = conf.clicked;
  88. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); }}myElm.onclick = conf.clicked;
  89. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); }}myElm.onclick = conf.clicked;
  90. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); }}myElm.onclick = conf.clicked;
  91. var conf = { name: "jsDay", clicked: function(event) { alert(this.name); }}myElm.onclick = conf.clicked;
  92. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(conf)conf.clicked.bind(conf)
  93. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(conf)conf.clicked.bind(conf)
  94. $.proxy(conf.clicked, conf);conf.clicked.createDelegate(conf);conf.clicked.bind(conf)conf.clicked.bind(conf)
  95. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) }})(conf);
  96. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) }})(conf);
  97. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) }})(conf);
  98. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) }})(conf);
  99. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) }})(conf);
  100. myElm.onclick = (function(context){ return function(){ conf.clicked.apply(context, arguments) }})(conf);
  101. argh, my eyes are bleeding.. http://www.accessexcellence.org/AE/mspot/tbs/episode3a/ep3a06.php
  102. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}
  103. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}
  104. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}
  105. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}
  106. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}
  107. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}myElm.onclick = MyNS.bind(conf.clicked, conf);
  108. MyNS.bind = function(func, context) {    return function() {        func.apply(context, arguments);    };}myElm.onclick = MyNS.bind(conf.clicked, conf);myElm.onclick = $.proxy(conf.clicked, conf);
  109. AAAARGGGHHH http://digitivity.org/1044/rss-kill-your-productivity-make-you-insane-waste-time
  110. MyNS.bind = function(func, context) {     return function() {     return func.apply(context, arguments); };}myElm.onclick = MyNS.bind(conf.clicked, conf);
  111. MyNS.bind = function(func, context) {     $.proxy(func, context);}myElm.onclick = MyNS.bind(conf.clicked, conf);
  112. Design Patterns http://failblog.org/vote
  113. Wrapper Pattern
  114. Wrapper Pattern http://www.pinkblog.it/post/8396/comprare-i-preservativi-vi-imbarazza
  115. 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"};
  116. 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"};
  117. 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"};
  118. 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"};
  119. 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"};
  120. 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"};
  121. $.extend(default, config);Ext.apply(default, config);_.extend(default, config);Object.extend(default, config);
  122. 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); [...]}
  123. 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); [...]}
  124. 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); [...]}
  125. 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); [...]}
  126. 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); [...]}
  127. Wasn’t it bad to delegate? http://clericalwhispers.blogspot.it/2010/09/popes-anti-condom-message-is-sabotage.html
  128. 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); [...]}
  129. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config);}
  130. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config);}
  131. MyNS.Layer = function(content, config){ config = MyNS.extend({ overlayOpacity:0.6, imageLoading: "/img/loader.gif", }, config); new LightBox(content, config);}
  132. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
  133. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
  134. MyNS.Layer = function(content, config){ config = MyNS.extend({ opacity: true, modal: true, }, config); new FancyBox(content, config);}
  135. Event Driven Design
  136. MyNS.Layer = function(content, config){ [...]}
  137. MyNS.Layer("Sorry, an error occured");
  138. MyNS.notify("error", { msg: "Sorry, an error occured"});
  139. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  140. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  141. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  142. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  143. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  144. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  145. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  146. MyNS.notify("error", { msg: "Sorry, an error occured"});MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  147. AdvantagesMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  148. Advantages Sem anticMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);});
  149. Advantages Sem anticMyNS.listen("error", function(payload){ MyNS.Layer(payload.msg);}); More Flexible
  150. AdvantagesUnpluggable
  151. MyNS.notify("error", { msg: "Sorry, an error occured"});
  152. almost decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
  153. What about the dom?
  154. Actually decoupled http://thewellversed.com/2010/12/09/love-warranties-they-dont-make-them-like-they-used-to/broken-heart/
  155. Ain’t that bad http://locomente.blogspot.it/2012/02/single-unemployed.html
  156. LOVE FACT #32 out of 5 people marry their first love.
  157. Advantages of this approach
  158. 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
  159. Build our own architecture http://www.alegriphotos.com/Cards_castle-lphoto-ce5fe99d397c7bf789b6b43d64bf5683.html
  160. Improve javascript skills http://edtechdigest.wordpress.com/2010/09/06/6-reasons-why-students-need-21st-century-skills/
  161. You got me, I will drop my framework
  162. are you sure? http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
  163. it might be the right one http://loveallit.tumblr.com/post/1044567068/jegushi-please-dont-leave-me
  164. the whole point is
  165. BE A JAVASCRIPT PERVERT
  166. BE A JAVASCRIPT PERVERT play with javascript discover your limits
  167. BE A JAVASCRIPT PERVERT play with javascript discover your limits
  168. BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks
  169. BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground
  170. BE A JAVASCRIPT PERVERT play with javascript discover your limits get to know microframeworks let github be your playground javascript is fun
  171. 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
  172. 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...
  173. know when to stop
  174. love your framework https://bit.ly/saybanana https://bit.ly/ratebanana marco@fromthefront.it http://cedmax.com @cedmax
  • omaradobati

    May. 22, 2012
  • abadongutierrez

    May. 22, 2012
  • vesparny

    May. 20, 2012

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

Views

Total views

8,558

On Slideshare

0

From embeds

0

Number of embeds

172

Actions

Downloads

70

Shares

0

Comments

0

Likes

3

×