Post on 15-Jan-2015
description
leave your ‘$’ behind
/ Fabien Doiron @fabien_doiron
I am not here to tell you to
stop using jQuery
compatibility &unexpected results
backwards compatibility
Object.create
Chrome Firefox Internet Explorer Opera Safari
Yes 4+ 9+ 12+ 5+
include a polyfill, don’t use the feature orignore the unsupported browsers
cross browser compatibility
focusout
Chrome Firefox Internet Explorer Opera Safari
Yes No Yes Yes Yes
unexpected results
var input = document.createElement( 'input' );
input.value = 'confoo2014';
input.setAttribute( 'type', 'radio' );
console.log( input.value === 'confoo2014' );
Chrome Firefox Internet Explorer Opera Safari
true true false IE10-
true? IE11
true true
“value” attribute must be set
after “type” attribute
server-side vs client-side
server-side code
limited by what the server supports
works in 1 spot, works everywhere
client-side code
limited by what the client (e.g. browser) supports
works in 1 spot, hope it works everywhere
“One cries because one is sad.
For example, I cry because browsers are
inconsistent and that makes me sad.”
rise of libraries
“It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much
simpler with an easy-to-use API that works across a multitude
of browsers” - jQuery
“It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much
simpler with an easy-to-use API that works across a multitude
of browsers” - jQuery
back to the start
2006jQuery launched
20148 years later
0%of browsers in 2006 supported
querySelector()
100%*of browsers in 2014 support
querySelector()
*current version and up to 3 versions back
jQuery: pros
tested and proven
large community
easy to use API
tons of browser specific edge cases
filesize is reasonable
jQuery: cons
bloat, can be more than you need
native support is on the rise
can lead to a hard dependency
can lead to poor engineering decisions
abstractionfacade pattern
“hide all the unwanted information and
provide only what is needed”
in other words
write your own API
before we continue
I am not saying you have to write a new library
write code that is not tied to any library
basic example
$( '.conference' ).addClass( 'confoo2014' );
// <div class="conference confoo2014">…</div>
custom API w/ jQuery var myui = {};
/** * Return first matching element * @requires jQuery … */ myui.qs = function querySelector ( selector ) { return $( selector )[ 0 ]; };
/** * Add class to passed element * @requires jQuery … */ myui.addClass = function addClass ( el, klass ) { $( el ).addClass( klass ); };
*basic example to show the concept
using jQuery through API
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="conference confoo2014">…</div>
custom API w/ native JavaScript var myui = {};
/** * Return first matching element * @requires N/A … */ myui.qs = function querySelector ( selector ) { return document.querySelector( selector ); };
/** * Add class to passed element * @requires N/A … */ myui.addClass = function addClass ( el, klass ) { el.classList.add( klass ); };
*basic example to show the concept
using native JavaScript through API
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="conference confoo2014">…</div>
source code does not have to change
jQuery JavaScript
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="conference confoo2014">…</div>
myui.qs
return $( selector )[ 0 ];
myui.addClass
$( el ).addClass( klass );
myui.qs
return document.querySelector( selector );
myui.addClass
el.classList.add( klass );
browser consistency is on the rise
prepare yourself for it
drawbacks
heavy upfront lift
abstracting the abstraction
potential performance issue
dealing with edge cases
recap
don’t let anyone tell you to stop using jQuery
JavaScript development has compatibility issues
JavaScript development has unexpected results
libraries deal with these problems
lots of pros for using jQuery
lots of cons for using jQuery
consider abstraction
hide the fact that you use a library
there are some drawbacks
only you can decide if
jQuery is the right option
resourcesyou might NOT need jQuery
you might need jQuery
facade pattern: essential js design patterns
caniuse.com
CONFOO2014
40% offcoupon code because you were awesome
*valid until March 30, 2014
thank you
questions
/ Fabien Doiron @fabien_doiron