Slides from my talk at Confoo 2014. Notes to come... In the not-so-distant past, cross browser JavaScript support was painful to deal with. This lead to the rise in popularity of libraries and a lot of developers have since never looked back. This talk will explain the importance of learning native JavaScript and how libraries may not be the answer in the near future. ## Resources * focusout: https://bugzilla.mozilla.org/show_bug.cgi?id=687787 * http://youmightnotneedjquery.com/ * https://gist.github.com/rwaldron/8720084#file-reasons-md * http://addyosmani.com/resources/essentialjsdesignpatterns/book/#facadepatternjavascript * http://caniuse.com/ ## Links * http://fabien-d.github.io/ * http://twitter.com/fabien_doiron * http://canvaspop.com * http://dna11.com * http://crated.com * http://developers.canvaspop.com * http://remade.canvaspop.com/

1. leave your ‘$’ behind
Fabien Doiron / @fabien_doiron

2. I am not here to tell you to
stop using jQuery

3. I work on Crated
software developer, front-end
@fabien_doiron

5. compatibility &
unexpected results

6. backwards compatibility
Object.create
Chrome
Firefox
Internet
Explorer
Opera
Safari
Yes
4+
9+
12+
5+

7. include a polyfill, don’t use the feature or
ignore the unsupported browsers

8. cross browser compatibility
focusout
Chrome
Firefox
Internet
Explorer
Opera
Safari
Yes
No
Yes
Yes
Yes

9. bug has been opened for over
2.5 years

10. 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 IE10true? IE11
true
true

11. “value” attribute must be set
after “type” attribute

12. server-side vs client-side

13. 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

14. “One cries because one is sad.
For example, I cry because browsers are
inconsistent and that makes me sad.”

15. rise of libraries

16. “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

17. “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

18. back to the start

19. 2006
jQuery launched

20. 2014
8 years later

21. 0%
of browsers in 2006 supported
querySelector()

22. 100%*
of browsers in 2014 support
querySelector()
*current version and up to 3 versions back

24. jQuery: pros
tested and proven
large community
easy to use API
tons of browser specific edge cases
filesize is reasonable

25. 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

26. abstraction
facade pattern

27. “hide all the unwanted information and
provide only what is needed”

28. in other words
write your own API

29. before we continue
I am not saying you have to write a new library

30. write code that is not tied to any library

31. basic example
$( '.conference' ).addClass( 'confoo2014' );
// <div class="conference confoo2014">…</div>

32. 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

33. using jQuery through API
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="conference confoo2014">…</div>

34. 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

35. using native JavaScript through API
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="conference confoo2014">…</div>

36. source code does not have to change
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="conference confoo2014">…</div>
jQuery
JavaScript
myui.qs
return $( selector )[ 0 ];
myui.qs
return document.querySelector( selector );
myui.addClass
$( el ).addClass( klass );
myui.addClass
el.classList.add( klass );

37. browser consistency is on the rise
prepare yourself for it

38. drawbacks

39. heavy upfront lift

40. abstracting the abstraction

41. potential performance issue

42. dealing with edge cases

43. recap

44. 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

45. only you can decide if
jQuery is the right option

46. resources
you might NOT need jQuery
you might need jQuery
facade pattern: essential js design patterns
caniuse.com

47. CONFOO2014
40% off
coupon code because you were awesome
*valid until March 30, 2014

48. thank you
questions
Fabien Doiron / @fabien_doiron