Your SlideShare is downloading. ×
0
leave your ‘$’ behind

Fabien Doiron / @fabien_doiron
I am not here to tell you to

stop using jQuery
I work on Crated
software developer, front-end

@fabien_doiron
compatibility &
unexpected results
backwards compatibility
Object.create
Chrome

Firefox

Internet
 Explorer

Opera

Safari

Yes

4+

9+

12+

5+
include a polyfill, don’t use the feature or
ignore the unsupported browsers
cross browser compatibility
focusout
Chrome

Firefox

Internet
 Explorer

Opera

Safari

Yes

No

Yes

Yes

Yes
bug has been opened for over
2.5 years
unexpected results
var input = document.createElement( 'input' );
input.value = 'confoo2014';
input.setAttribute( 'type', ...
“value” attribute must be set
after “type” attribute
server-side vs client-side
server-side code
limited by what the server supports
works in 1 spot, works everywhere

client-side code
limited by what t...
“One cries because one is sad.
For example, I cry because browsers are
inconsistent and that makes me sad.”
rise of libraries
“It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much
simpler with an e...
“It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much
simpler with an e...
back to the start
2006
jQuery launched
2014
8 years later
0%
of browsers in 2006 supported

querySelector()
100%*
of browsers in 2014 support

querySelector()

*current version and up to 3 versions back
jQuery: pros
tested and proven
large community
easy to use API
tons of browser specific edge cases
filesize is reasonable
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...
abstraction
facade pattern
“hide all the unwanted information and
provide only what is needed”
in other words
write your own API
before we continue
I am not saying you have to write a new library
write code that is not tied to any library
basic example
$( '.conference' ).addClass( 'confoo2014' );
// <div class="conference confoo2014">…</div>
custom API w/ jQuery
var myui = {};
/**
* Return first matching element
* @requires jQuery …
*/
myui.qs = function querySe...
using jQuery through API
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="conference c...
custom API w/ native JavaScript
var myui = {};
/**
* Return first matching element
* @requires N/A …
*/
myui.qs = function...
using native JavaScript through API
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="c...
source code does not have to change
var el = myui.qs( '.conference' );
myui.addClass( el, 'confoo2014' );
// <div class="c...
browser consistency is on the rise
prepare yourself for it
drawbacks
heavy upfront lift
abstracting the abstraction
potential performance issue
dealing with edge cases
recap
don’t let anyone tell you to stop using jQuery
JavaScript development has compatibility issues
JavaScript development has ...
only you can decide if
jQuery is the right option
resources
you might NOT need jQuery
you might need jQuery
facade pattern: essential js design patterns
caniuse.com
CONFOO2014

40% off
coupon code because you were awesome

*valid until March 30, 2014
thank you

questions

Fabien Doiron / @fabien_doiron
Leave your jQuery behind
Leave your jQuery behind
Upcoming SlideShare
Loading in...5
×

Leave your jQuery behind

5,526

Published on

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/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,526
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Leave your jQuery behind"

  1. 1. leave your ‘$’ behind Fabien Doiron / @fabien_doiron
  2. 2. I am not here to tell you to stop using jQuery
  3. 3. I work on Crated software developer, front-end @fabien_doiron
  4. 4. compatibility & unexpected results
  5. 5. backwards compatibility Object.create Chrome Firefox Internet Explorer Opera Safari Yes 4+ 9+ 12+ 5+
  6. 6. include a polyfill, don’t use the feature or ignore the unsupported browsers
  7. 7. cross browser compatibility focusout Chrome Firefox Internet Explorer Opera Safari Yes No Yes Yes Yes
  8. 8. bug has been opened for over 2.5 years
  9. 9. 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
  10. 10. “value” attribute must be set after “type” attribute
  11. 11. server-side vs client-side
  12. 12. 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
  13. 13. “One cries because one is sad. For example, I cry because browsers are inconsistent and that makes me sad.”
  14. 14. rise of libraries
  15. 15. “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
  16. 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. 17. back to the start
  18. 18. 2006 jQuery launched
  19. 19. 2014 8 years later
  20. 20. 0% of browsers in 2006 supported querySelector()
  21. 21. 100%* of browsers in 2014 support querySelector() *current version and up to 3 versions back
  22. 22. jQuery: pros tested and proven large community easy to use API tons of browser specific edge cases filesize is reasonable
  23. 23. 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
  24. 24. abstraction facade pattern
  25. 25. “hide all the unwanted information and provide only what is needed”
  26. 26. in other words write your own API
  27. 27. before we continue I am not saying you have to write a new library
  28. 28. write code that is not tied to any library
  29. 29. basic example $( '.conference' ).addClass( 'confoo2014' ); // <div class="conference confoo2014">…</div>
  30. 30. 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
  31. 31. using jQuery through API var el = myui.qs( '.conference' ); myui.addClass( el, 'confoo2014' ); // <div class="conference confoo2014">…</div>
  32. 32. 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
  33. 33. using native JavaScript through API var el = myui.qs( '.conference' ); myui.addClass( el, 'confoo2014' ); // <div class="conference confoo2014">…</div>
  34. 34. 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 );
  35. 35. browser consistency is on the rise prepare yourself for it
  36. 36. drawbacks
  37. 37. heavy upfront lift
  38. 38. abstracting the abstraction
  39. 39. potential performance issue
  40. 40. dealing with edge cases
  41. 41. recap
  42. 42. 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
  43. 43. only you can decide if jQuery is the right option
  44. 44. resources you might NOT need jQuery you might need jQuery facade pattern: essential js design patterns caniuse.com
  45. 45. CONFOO2014 40% off coupon code because you were awesome *valid until March 30, 2014
  46. 46. thank you questions Fabien Doiron / @fabien_doiron
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×