Leave your jQuery behind

50 %
50 %
Information about Leave your jQuery behind
Technology

Published on March 3, 2014

Author: FabienDoiron

Source: slideshare.net

Description

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/

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', 'radio' ); console.log( input.value === 'confoo2014' ); Chrome Firefox Internet Explorer Opera Safari true true false IE10true? IE11 true true

“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 the client (e.g. browser) supports works in 1 spot, hope it works everywhere

“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 easy-to-use API that works across a multitude of browsers” - jQuery

“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

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 engineering decisions

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 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

using jQuery through API var el = myui.qs( '.conference' ); myui.addClass( el, 'confoo2014' ); // <div class="conference confoo2014">…</div>

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

using native JavaScript through API var el = myui.qs( '.conference' ); myui.addClass( el, 'confoo2014' ); // <div class="conference confoo2014">…</div>

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 );

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 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

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

Add a comment

Related presentations

Related pages

Leave your jQuery behind // Speaker Deck

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 ...
Read more

Leave your jQuery behind - Technology - documents.mx

1. leave your ‘$’ behindFabien Doiron / @fabien_doiron. 2. I am not here to tell you tostop using jQuery. 3. I work on Crated software developer, front ...
Read more

.mouseleave() | jQuery API Documentation

jQuery: The Write Less, Do More, ... The mouseleave event, on the other hand, ... < div class = "in overout" > < p > move your mouse < p > 0 Read more

jQuery

jQuery: The Write Less, Do More, JavaScript Library
Read more

Debugging JavaScript Behind the Scenes « Build Internet

Debugging JavaScript Behind the Scenes. ... particularly with tracking jQuery events. ... You cannot leave console calls in your scripts.
Read more

GitHub - jquerypageleave/jquery-pageleave: A small plugin ...

While jquery/javascript already have events for users leaving your page (unload, beforeunload), they all have theirs pros and cons. The basic idea behind ...
Read more

c# - Call jquery from code behind - Stack Overflow

Call jquery from code behind. ... By posting your answer, ... Why did Luke leave Owen and Beru's remains?
Read more

jquery - javascript before leaving the page - Stack Overflow

javascript before leaving the page. ... { return 'Are you sure you want to leave?'; }; Or with jQuery: $ ... put your jquery code before close of Read more