Leave your jQuery behind

leave your ‘$’ behind

/ Fabien Doiron @fabien_doiron

I am not here to tell you to

stop using jQuery

I work on Cratedsoftware developer, front-end

@fabien_doiron

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

bug has been opened for over

2.5 years

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