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. 4.
  2. 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
  3. 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
  4. 14.

    “One cries because one is sad. For example, I cry

    because browsers are inconsistent and that makes me sad.”
  5. 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
  6. 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
  7. 23.
  8. 24.

    jQuery: pros tested and proven large community easy to use

    API tons of browser specific edge cases filesize is reasonable
  9. 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
  10. 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
  11. 33.

    using jQuery through API var el = myui.qs( '.conference' );

    myui.addClass( el, 'confoo2014' ); // <div class="conference confoo2014">…</div>
  12. 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
  13. 35.

    using native JavaScript through API var el = myui.qs( '.conference'

    ); myui.addClass( el, 'confoo2014' ); // <div class="conference confoo2014">…</div>
  14. 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 );
  15. 38.
  16. 43.
  17. 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
  18. 46.

    resources you might NOT need jQuery you might need jQuery

    facade pattern: essential js design patterns caniuse.com