Leave your jQuery behind

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/

Transcript

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 IE10- true? 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 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 );
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