Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leave your jQuery behind

2a622fe29c34d10f5edbcf3ea15e1bf1?s=47 Fabien Doiron
February 28, 2014

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/

2a622fe29c34d10f5edbcf3ea15e1bf1?s=128

Fabien Doiron

February 28, 2014
Tweet

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

  4. None
  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
  23. None
  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