JQuery is awesome, but with all major browsers following the ES and HTML5 specs, the library has become more of a convenience than a necessity for browser compatibility. While the library is useful and ubiquitous, it does distract us from learning the language that it's built on. This talk will outline functionalities that pure javascript provides, and also provide steps we can take to begin writing vanilla javascript applications and start appreciating the power and uniqueness of javascript.

1. Ditching JQuery
Hao Luo
Northwestern University
https://joind.in/13726

2. Ditching JQuery - Hao Luo - php[tek] 2015
Intro
2
4 years as a full-time web developer

3. Ditching JQuery - Hao Luo - php[tek] 2015
I ❤ JQuery
•One codebase, all the browser!
•Introduced me to JavaScript
•“It just works”
3

4. Ditching JQuery - Hao Luo - php[tek] 2015
Goal of This Talk
•Not to convince anyone
•Important to understand the basics
•Lessen the hurdle to start using pure JavaScript
4

5. Ditching JQuery - Hao Luo - php[tek] 20155
Scenario Problem

6. Ditching JQuery - Hao Luo - php[tek] 2015
Our Late Stay Requirements
Admin can…
•See a list of applications with some information
•Can decide to approve or deny an application
•Can delete an application
•Can add a random application
6

7. Ditching JQuery - Hao Luo - php[tek] 2015
IE9 Demo
7
latestayapp.com/jquery
latestayapp.com/purejs

8. Ditching JQuery - Hao Luo - php[tek] 2015
Late Stay Workflow
8
HTTP GET latestayapp.com/purejs
HTML (empty ul#applications container)
AJAX GET latestayapp.com/applications
JSON (parses then inserts in #applications container)
(admin clicks on the approve button)
AJAX PUT latestayapp.com/applications/20/approve
JSON (update HTML)
AJAX
DOM
Events

9. Ditching JQuery - Hao Luo - php[tek] 2015
DOM
Querying, Traversal, and Manipulation
9

10. Ditching JQuery - Hao Luo - php[tek] 2015
Some DOM Operations
10
JQuery Vanilla JS
$(‘#application-­‐20’); document.querySelector(‘#application-­‐20’);
$el.attr(‘data-­‐id’,
‘20’);
$el.attr(‘data-­‐id’);
el.setAttribute(‘data-­‐id’,
‘20’);
el.getAttribute(‘data-­‐id’);
yes yes yes 9+
yes yes yes yes
yes yes yes 10+$el.addClass(‘approved’);
$el.removeClass(‘approved’);
$el.toggleClass(‘approved’);
el.classList.add(‘approved’);
el.classList.remove(‘approved’);
el.classList.toggle(‘approved’);
$el.data(‘id’,
‘20’);
var
id
=
$el.data(‘id’);
el.dataset.id
=
‘20’;
var
id
=
el.dataset.id; yes yes yes 11+
$button.closest(‘.application’); button.closest(‘.application’); 41 35 no no
https://dom.spec.whatwg.org/#dom-element-closestselectors
https://github.com/eligrey/classList.js/

11. Ditching JQuery - Hao Luo - php[tek] 2015
Polyfills
11
A polyfill is a piece of code that provides the technology that the developer expects the
browser to provide natively. Flattening the API landscape if you will. - Remy Sharp
var
ELEMENT
=
Element.prototype;
ELEMENT.matches
=
ELEMENT.matches
||
ELEMENT.msMatchesSelector
||
ELEMENT.mozMatchesSelector
||
ELEMENT.webkitMatchesSelector;
ELEMENT.closest
=
ELEMENT.closest
||
function
(selector)
{
var
node
=
this;
while
(node)
{
if
(node.matches(selector))
{
break;
}
node
=
node.parentElement;
}
return
node;
};
41 35 no no
yes yes yes 9+
<li
class="application"
id=“#application-­‐20">
…
<div
class="action-­‐bar">
<div
class=“action">
…
<button
class="delete">
</div>
</div>
</li>
deleteButton.closest('.application');
HTML
Javascript
Javascript

12. Ditching JQuery - Hao Luo - php[tek] 2015
DOM Events
12

13. Ditching JQuery - Hao Luo - php[tek] 201513
Register Event Callbacks Yes Yes Yes 9+
JQuery $('.delete').on('click',
deleteApplication);
Vanilla JS
getAllElToArr('.delete').forEach(function
(el)
{
el.addEventListener('click',
deleteApplication);
});

14. Ditching JQuery - Hao Luo - php[tek] 2015
Direct Events (vs Delegated Events)
14
li.application
li.application
li.application
div#application-container
ul#applications
li.application
li.application ☺☹ ✖
JQuery
$('.delete').on('click',
deleteApplication);
Vanilla JS
getAllElToArr('.delete').forEach(function
(el)
{
el.addEventListener('click',
deleteApplication);
});
EventListener #1
EventListener #4
EventListener #3
EventListener #2
EventListener #5
li.application ☺☹ ✖
EventListener #6
✖
✖
✖
✖

15. Ditching JQuery - Hao Luo - php[tek] 2015
Delegated Events
15
li.application
li.application
li.application
div#application-container
ul#applications
li.application
li.application ☺☹ ✖li.application ☺☹ ✖
JQuery
$(‘ul.applications’).on(‘click’,
‘.deleteBtn’,
deleteApplication);
Vanilla JS No
Standard
for
Event
Delegation
:(✖
✖
✖
✖
EventListener #1
is the ‘click’ target element the ‘.delete’ button?
if so, run deleteApplication
is the ‘click’ target element the ‘.approve’ button?
if so, run approveApplication
https://github.com/ftlabs/ftdomdelegate

16. Ditching JQuery - Hao Luo - php[tek] 2015
AJAX
16

17. Ditching JQuery - Hao Luo - php[tek] 2015
AJAX
17
JQuery $.ajax();
Vanilla JS XMLHttpRequest
HTML5 Fetch
API
yes yes yes yes
41 no no no
Fetch API Polyfill: https://github.com/github/fetch
yes yes yes 9+

18. Ditching JQuery - Hao Luo - php[tek] 2015
POST - A Closer Look
18
JQuery XMLHttpRequest
$.ajax('/applications',
{
method:
'POST',
contentType:
'application/json',
processData:
false,
data:
JSON.stringify({
name:
'Joe
Bob',
reason:
'Too
cold
outside'
})
})
.then(function
success(application)
{
appendApplicationHTML(application);
})
.fail(function
failed()
{
console.log('request
failed!');
});
xhr
=
new
XMLHttpRequest();
xhr.open('POST',
'/applications'));
xhr.setRequestHeader('Content-­‐Type',
'application/json');
xhr.onload
=
function()
{
if
(xhr.status
===
200)
{
var
applicationInfo
=
JSON.parse(xhr.responseText);
appendApplicationHTML(application);
}
else
if
(xhr.status
!==
200)
{
alert('Request
failed.
');
}
};
xhr.send(JSON.stringify({
name:
'Joe
Bob',
reason:
'Too
cold
outside'
});

19. Ditching JQuery - Hao Luo - php[tek] 2015
POST - A Closer Look
19
JQuery Fetch API
$.ajax('/applications',
{
method:
'POST',
contentType:
'application/json',
processData:
false,
data:
JSON.stringify({
name:
'Joe
Bob',
reason:
'Too
cold
outside'
})
})
.then(function
success(application)
{
appendApplicationHTML(application);
})
.fail(function
failed()
{
console.log('request
failed!');
});
fetch('/users',
{
method:
'post',
headers:
{
'Content-­‐Type':
'application/json'
},
body:
JSON.stringify({
name:
'Joe
Bob',
reason:
'Too
Cold
Outside'
})
})
.then(function
(response)
{
return
response.json();
})
.then(function
(application)
{
appendApplicationHTML(application);
})
.catch(function(error)
{
console.log('request
failed',
error);
});

20. Ditching JQuery - Hao Luo - php[tek] 2015
Eliminates Callback hell
Offers More Flexibility and Freedom
Promises are awesome
20

21. Ditching JQuery - Hao Luo - php[tek] 2015
Utilities
21

22. Ditching JQuery - Hao Luo - php[tek] 2015
DOM Loaded
22
JQuery Vanilla JS
$(function(event)
{
console.log("DOM
fully
loaded
and
parsed");
});
document.addEventListener("DOMContentLoaded",
function(event)
{
console.log("DOM
fully
loaded
and
parsed");
});
yes yes yes 9+
Don’t use "load"

23. Ditching JQuery - Hao Luo - php[tek] 2015
HTML Parse
23
JQuery Vanilla JS
var
el
=
$.parseHTML(HTMLString);
var
parser
=
new
DOMParser();
var
doc
=
parser.parseFromString(HTMLString,
'text/html');
var
el
=
doc.body.firstChild;
30 12 7.1 10+
function
parseHTML
(str)
{
var
tmp
=
document.implementation.createHTMLDocument('');
tmp.body.innerHTML
=
str;
return
tmp.body.firstChild;
};
IE9 won’t accept empty param
yes yes yes 9+

24. Ditching JQuery - Hao Luo - php[tek] 2015
Date Parse
IE9 needs W3C output (which is also ISO 8601
compliant) (http://www.w3.org/TR/NOTE-
datetime-970915.html)
24
<?php
$objDateTime
=
new
DateTime('NOW');
echo
$objDateTime-­‐>format('c');
//
1975-­‐12-­‐25T14:15:16-­‐05:00
Yes
IE9
echo
$objDateTime-­‐>format(DateTime::ISO8601);
//
1975-­‐12-­‐25T14:15:16-­‐0500
No
IE9

25. Ditching JQuery - Hao Luo - php[tek] 2015
A word about JQuery Animate
•Use Semantic HTML
•Use CSS Transition
25
.application
{
opacity:
1;
max-­‐height:
300px;
transition:
max-­‐height
0.5s,
opacity
0.7s;
}
.application.removed
{
max-­‐height:
0;
opacity:
0;
}
CSS

26. Ditching JQuery - Hao Luo - php[tek] 2015
Closing Thoughts
26

27. Ditching JQuery - Hao Luo - php[tek] 201527
Non-Technical Reasons
• a lot of magic is confusing sometimes
• Understanding the basics makes you a better
developer
$('div');
//creates
a
jquery
instance
with
the
selection
inside
$('<div>');
//creates
a
jquery
instance
with
a
new
element
not
in
document
$($aJQueryInstance);
//makes
a
clone
of
$aJQueryInstance
$(function()
{})
//registers
function
to
run
after
DOM
is
loaded
$({foo:
'bar'});
//???
creates
a
jquery
set
that
has
a
subset
of
methods
???
var
$appsEl1
=
$('#applications');
var
$appsEl2
=
$('#applications');
$appsEl1
===
$appsEl2;
//false
var
appsEl1
=
document.querySelector('#applications');
var
appsEl2
=
document.querySelector('#applications');
appsEl1
===
appsEl2;
//true

28. Ditching JQuery - Hao Luo - php[tek] 2015
Some Takeaways
•Use Packages and Polyfills vs monolithic libraries &
frameworks
•Out of the JQuery Plugin Ecosystem and into NPM or
Bower
•Browser and Server
28

29. Ditching JQuery - Hao Luo - php[tek] 2015
When to use JQuery
•When you have to support IE8
•When you don’t have CORS
•Abstractions sometimes are good!
29
uses requestAnimationFrames
for
its
animationsuses setInterval
for
its
animations

30. Ditching JQuery - Hao Luo - php[tek] 2015
Resources for DOM references
http://blog.garstasio.com/you-dont-need-jquery/
http://youmightnotneedjquery.com/
http://html5please.com/
30

31. Ditching JQuery - Hao Luo - php[tek] 2015
Thank you!
@howlowck
https://joind.in/13726
31