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/
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.”
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
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 );
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