SlideShare a Scribd company logo

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

•
•
Marco Cedaro
Marco Cedaro

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

Technology
1 of 174
Download to read offline
“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
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 #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 history http://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
General purpose framework 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 did framework 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
Counterintuitively situation 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 and situation 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 your situation 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
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
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
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
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
Desktop $LAB .script("jquery.js").wait() .script("scripts.js") Mobile $LAB .script("xui.js").wait() .script("scripts.js")
Desktop $LAB .script("jquery.js").wait() .script("scripts.js") Mobile $LAB .script("xui.js").wait() .script("scripts.js")
It's 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&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(i, item) { [...] }); Ext.each(items, function(item, i) { [...] }); _.each(items, function(item, i) { [...] }); items.each(function(item, i) { [...] });
$.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) { [...] }); 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++) { [...] };
$.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(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
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) { $.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) { $.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({ 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); });
Advantages MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
Advantages Sem antic MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
Advantages Sem antic MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); }); 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 bad http://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
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 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

Recommended

FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...Marco Cedaro
 
jsDay - Javascript as a programming language
jsDay - Javascript as a programming languagejsDay - Javascript as a programming language
jsDay - Javascript as a programming languageMarco Cedaro
 
YOOX Launch & Learn - Javascript as a programming language
YOOX Launch & Learn - Javascript as a programming language YOOX Launch & Learn - Javascript as a programming language
YOOX Launch & Learn - Javascript as a programming languageMarco Cedaro
 
Client-side Development 2016
Client-side Development 2016Client-side Development 2016
Client-side Development 2016Huge
 
The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersPeter-Paul Koch
 
Joys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseJoys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseMarc Fasel
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 

Recommended

FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...Marco Cedaro
 
jsDay - Javascript as a programming language
jsDay - Javascript as a programming languagejsDay - Javascript as a programming language
jsDay - Javascript as a programming languageMarco Cedaro
 
YOOX Launch & Learn - Javascript as a programming language
YOOX Launch & Learn - Javascript as a programming language YOOX Launch & Learn - Javascript as a programming language
YOOX Launch & Learn - Javascript as a programming languageMarco Cedaro
 
Client-side Development 2016
Client-side Development 2016Client-side Development 2016
Client-side Development 2016Huge
 
The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersPeter-Paul Koch
 
Joys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseJoys and Pains of Node.js in the Enterprise
Joys and Pains of Node.js in the EnterpriseMarc Fasel
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)Dave Olsen
 
Do Try This At Home
Do Try This At HomeDo Try This At Home
Do Try This At Homebdillard
 
Devoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsDevoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsMax Katz
 
Documenting First
Documenting FirstDocumenting First
Documenting FirstBrian Landau
 
Creating Android Apps with PhoneGap
Creating Android Apps with PhoneGapCreating Android Apps with PhoneGap
Creating Android Apps with PhoneGapDean Peters
 
Web Frameworks of the Future
Web Frameworks of the FutureWeb Frameworks of the Future
Web Frameworks of the Futureelliando dias
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapJames Pearce
 
Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
Designers Make It Go to Eleven!
Designers Make It Go to Eleven!Designers Make It Go to Eleven!
Designers Make It Go to Eleven!Idan Gazit
 
Adobemax2009na
Adobemax2009naAdobemax2009na
Adobemax2009naMasakazu Ohtsuka
 
Engineering culture
Engineering cultureEngineering culture
Engineering culturePamela Fox
 
Software Craftsmanship - 1 Meeting
Software Craftsmanship - 1 MeetingSoftware Craftsmanship - 1 Meeting
Software Craftsmanship - 1 MeetingUri Lavi
 
How to discover contribution item ?
How to discover contribution item ?How to discover contribution item ?
How to discover contribution item ?Gyuyoung Kim
 
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesMarcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesПрофсоUX
 
AgilePT'10 - Evolving Software: Five powerful metaphors to explain change
AgilePT'10 - Evolving Software: Five powerful metaphors to explain changeAgilePT'10 - Evolving Software: Five powerful metaphors to explain change
AgilePT'10 - Evolving Software: Five powerful metaphors to explain changeFilipe Correia
 
Ruby and iOS: An inside look
Ruby and iOS: An inside lookRuby and iOS: An inside look
Ruby and iOS: An inside lookJeanine Jue
 
Software Craftsmanship - 3
Software Craftsmanship - 3Software Craftsmanship - 3
Software Craftsmanship - 3Uri Lavi
 
Solutions for when documentation fails
Solutions for when documentation fails Solutions for when documentation fails
Solutions for when documentation fails Martijn Dashorst
 
Performance - a challenging craft
Performance - a challenging craftPerformance - a challenging craft
Performance - a challenging craftFabian Lange
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real worldJason Grigsby
 

More Related Content

What's hot

The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)Dave Olsen
 
Do Try This At Home
Do Try This At HomeDo Try This At Home
Do Try This At Homebdillard
 
Devoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsDevoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsMax Katz
 
Creating Android Apps with PhoneGap
Creating Android Apps with PhoneGapCreating Android Apps with PhoneGap
Creating Android Apps with PhoneGapDean Peters
 
Web Frameworks of the Future
Web Frameworks of the FutureWeb Frameworks of the Future
Web Frameworks of the Futureelliando dias
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapJames Pearce
 
Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
Designers Make It Go to Eleven!
Designers Make It Go to Eleven!Designers Make It Go to Eleven!
Designers Make It Go to Eleven!Idan Gazit
 
Engineering culture
Engineering cultureEngineering culture
Engineering culturePamela Fox
 
Software Craftsmanship - 1 Meeting
Software Craftsmanship - 1 MeetingSoftware Craftsmanship - 1 Meeting
Software Craftsmanship - 1 MeetingUri Lavi
 
How to discover contribution item ?
How to discover contribution item ?How to discover contribution item ?
How to discover contribution item ?Gyuyoung Kim
 
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesMarcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesПрофсоUX
 
AgilePT'10 - Evolving Software: Five powerful metaphors to explain change
AgilePT'10 - Evolving Software: Five powerful metaphors to explain changeAgilePT'10 - Evolving Software: Five powerful metaphors to explain change
AgilePT'10 - Evolving Software: Five powerful metaphors to explain changeFilipe Correia
 
Ruby and iOS: An inside look
Ruby and iOS: An inside lookRuby and iOS: An inside look
Ruby and iOS: An inside lookJeanine Jue
 
Software Craftsmanship - 3
Software Craftsmanship - 3Software Craftsmanship - 3
Software Craftsmanship - 3Uri Lavi
 
Solutions for when documentation fails
Solutions for when documentation fails Solutions for when documentation fails
Solutions for when documentation fails Martijn Dashorst
 
Performance - a challenging craft
Performance - a challenging craftPerformance - a challenging craft
Performance - a challenging craftFabian Lange
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 

What's hot (20)

The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
 
Do Try This At Home
Do Try This At HomeDo Try This At Home
Do Try This At Home
 
Devoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web AppsDevoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
Devoxx2010 - Mobile Development Choices: Native Apps vs Web Apps
 
Documenting First
Documenting FirstDocumenting First
Documenting First
 
Creating Android Apps with PhoneGap
Creating Android Apps with PhoneGapCreating Android Apps with PhoneGap
Creating Android Apps with PhoneGap
 
Web Frameworks of the Future
Web Frameworks of the FutureWeb Frameworks of the Future
Web Frameworks of the Future
 
Creating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGapCreating and Distributing Mobile Web Applications with PhoneGap
Creating and Distributing Mobile Web Applications with PhoneGap
 
Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
Designers Make It Go to Eleven!
Designers Make It Go to Eleven!Designers Make It Go to Eleven!
Designers Make It Go to Eleven!
 
Adobemax2009na
Adobemax2009naAdobemax2009na
Adobemax2009na
 
Engineering culture
Engineering cultureEngineering culture
Engineering culture
 
Software Craftsmanship - 1 Meeting
Software Craftsmanship - 1 MeetingSoftware Craftsmanship - 1 Meeting
Software Craftsmanship - 1 Meeting
 
How to discover contribution item ?
How to discover contribution item ?How to discover contribution item ?
How to discover contribution item ?
 
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesMarcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
 
AgilePT'10 - Evolving Software: Five powerful metaphors to explain change
AgilePT'10 - Evolving Software: Five powerful metaphors to explain changeAgilePT'10 - Evolving Software: Five powerful metaphors to explain change
AgilePT'10 - Evolving Software: Five powerful metaphors to explain change
 
Ruby and iOS: An inside look
Ruby and iOS: An inside lookRuby and iOS: An inside look
Ruby and iOS: An inside look
 
Software Craftsmanship - 3
Software Craftsmanship - 3Software Craftsmanship - 3
Software Craftsmanship - 3
 
Solutions for when documentation fails
Solutions for when documentation fails Solutions for when documentation fails
Solutions for when documentation fails
 
Performance - a challenging craft
Performance - a challenging craftPerformance - a challenging craft
Performance - a challenging craft
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 

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

Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real worldJason Grigsby
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Atwix
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web developmentChristian Heilmann
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature CreatureChristian Heilmann
 
2012 03 27_philly_jug_rewrite_static
2012 03 27_philly_jug_rewrite_static2012 03 27_philly_jug_rewrite_static
2012 03 27_philly_jug_rewrite_staticLincoln III
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
 
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...javier ramirez
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Javaland 2017: "You´ll do microservices now". Now what?
Javaland 2017: "You´ll do microservices now". Now what?Javaland 2017: "You´ll do microservices now". Now what?
Javaland 2017: "You´ll do microservices now". Now what?André Goliath
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsCaesar Chi
 
10 Ways To Improve Your Code( Neal Ford)
10 Ways To Improve Your Code( Neal Ford)10 Ways To Improve Your Code( Neal Ford)
10 Ways To Improve Your Code( Neal Ford)guestebde
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 

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

Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web development
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
 
2012 03 27_philly_jug_rewrite_static
2012 03 27_philly_jug_rewrite_static2012 03 27_philly_jug_rewrite_static
2012 03 27_philly_jug_rewrite_static
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
 
Don't screw it up! How to build durable API
Don't screw it up! How to build durable API Don't screw it up! How to build durable API
Don't screw it up! How to build durable API
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
4-identifying-problems.pdf
4-identifying-problems.pdf4-identifying-problems.pdf
4-identifying-problems.pdf
 
Javaland 2017: "You´ll do microservices now". Now what?
Javaland 2017: "You´ll do microservices now". Now what?Javaland 2017: "You´ll do microservices now". Now what?
Javaland 2017: "You´ll do microservices now". Now what?
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
 
10 Ways To Improve Your Code( Neal Ford)
10 Ways To Improve Your Code( Neal Ford)10 Ways To Improve Your Code( Neal Ford)
10 Ways To Improve Your Code( Neal Ford)
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
10 Ways To Improve Your Code
10 Ways To Improve Your Code10 Ways To Improve Your Code
10 Ways To Improve Your Code
 

Recently uploaded

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 

Recently uploaded (20)

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 

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 being coupled 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
  • 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 #1 Love is a given, hatred is acquired. Doug Horton
  • 16. 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.
  • 17. A little history http://mattstone.blogs.com/photos/christian_art_genesis/adam-eve-and-the-tree.html
  • 18. Once upon a time code snippet “dhtml” if (document.all) http://creativecriminals.com/print/scotch-tape-beyond-strong/
  • 19. Then
  • 20. Then
  • 21. Then
  • 22. Then
  • 23. Then
  • 26. Now
  • 27. Why did they get so popular? DOM access Cross browser implementation Shorthands Community scripts
  • 31. General purpose framework 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 did framework 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. Counterintuitively situation 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 and situation 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 your situation 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
  • 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
  • 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")
  • 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 #2 What 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) { [...] });
  • 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
  • 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;
  • 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
  • 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"};
  • 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); }
  • 136. MyNS.Layer = function(content, config){ [...] }
  • 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. Advantages MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
  • 148. Advantages Sem antic MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); });
  • 149. Advantages Sem antic MyNS.listen("error", function(payload){ MyNS.Layer(payload.msg); }); More Flexible
  • 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 #3 2 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
  • 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