Ditching JQuery Talk At Madison PHP

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

2. Ditching JQuery - Hao Luo - Madison PHP
Intro
2
4 years as a full-time web developer
@howlowck
haowebdev@gmail.com

3. Ditching JQuery - Hao Luo - Madison PHP
I ❤ JQuery
•One codebase, all the browser!
•Introduced me to JavaScript
•“It just works”
3

4. Ditching JQuery - Hao Luo - Madison PHP
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 - Madison PHP5
Scenario Problem

6. Ditching JQuery - Hao Luo - Madison PHP
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 - Madison PHP
IE9 Demo
7
github.com/howlowck/latestay-purejs
github.com/howlowck/latestay-jquery

8. Ditching JQuery - Hao Luo - Madison PHP
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 - Madison PHP
DOM
Querying, Traversal, and Manipulation
9

10. Ditching JQuery - Hao Luo - Madison PHP
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 - Madison PHP
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 - Madison PHP
DOM Events
12

13. Ditching JQuery - Hao Luo - Madison PHP13
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 - Madison PHP
li.application ☺☹ ✖li.application ☺☹ ✖
Direct Events (vs Delegated
Events)
14
li.application
li.application
li.application
div#application-container
ul#applications
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
EventListener #6
✖
✖
✖
✖

15. Ditching JQuery - Hao Luo - Madison PHP
li.application ☺☹ ✖
Delegated Events
15
li.application
li.application
li.application
div#application-container
ul#applications
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 - Madison PHP
AJAX
16

17. Ditching JQuery - Hao Luo - Madison PHP
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 - Madison PHP
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 - Madison PHP
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 - Madison PHP
DeferredValue
Eliminates Callback hell
Offers More Flexibility and Freedom
Promises are awesome
20

21. Ditching JQuery - Hao Luo - Madison PHP
Utilities
21

22. Ditching JQuery - Hao Luo - Madison PHP
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 - Madison PHP
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 - Madison PHP
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 - Madison PHP
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 - Madison PHP
Closing Thoughts
26

27. Ditching JQuery - Hao Luo - Madison PHP27
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 - Madison PHP
Some Takeaways
•Avoid monolithic libraries & frameworks and Use
Packages and Polyfills
•Out of the JQuery Plugin Ecosystem and into NPM or
Bower
•Browser and Server
28

29. Ditching JQuery - Hao Luo - Madison PHP
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 - Madison PHP
Resources for DOM references
http://blog.garstasio.com/you-dont-need-jquery/
http://youmightnotneedjquery.com/
http://html5please.com/
30

31. Ditching JQuery - Hao Luo - Madison PHP
Thank you!
@howlowck
https://joind.in/16012
31