Ditching jQuery Madison

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

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

I ❤ JQuery
•One codebase, all the browser!
•Introduced me to JavaScript
•“It just works”
3

Goal of This Talk
•Not to convince anyone
•Important to understand the basics
•Lessen the hurdle to start using pure JavaScript
4

Ditching JQuery - Hao Luo - Madison PHP5
Scenario Problem

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

IE9 Demo
7
github.com/howlowck/latestay-purejs
github.com/howlowck/latestay-jquery

Late Stay Workﬂow
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

DOM
Querying, Traversal, and Manipulation
9

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/

Polyﬁlls
11
A polyﬁll 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

DOM Events
12

Register Event Callbacks
Yes Yes Yes 9+
JQuery $('.delete').on('click', deleteApplication);
Vanilla JS
getAllElToArr('.delete').forEach(function (el) {
el.addEventListener('click', deleteApplication);
});

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

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

AJAX
16

AJAX
17
JQuery $.ajax();
Vanilla JS XMLHttpRequest
HTML5 Fetch API
yes yes yes yes
41 no no no
Fetch API Polyﬁll: https://github.com/github/fetch
yes yes yes 9+

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);
}
else if (xhr.status !== 200) {
alert('Request failed. ');
}
};
xhr.send(JSON.stringify({
name: 'Joe Bob',
});

POST - A Closer Look
19
JQuery Fetch API
$.ajax('/applications', {
method: 'POST',
contentType: 'application/json',
processData: false,
data: JSON.stringify({
name: 'Joe Bob',
})
})
.then(function success(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) {
})
.catch(function(error) {
console.log('request failed', error);
});

DeferredValue
Eliminates Callback hell
Offers More Flexibility and Freedom
Promises are awesome
20

Utilities
21

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"

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+

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

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

Closing Thoughts
26

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

Some Takeaways
•Avoid monolithic libraries & frameworks and Use
Packages and Polyﬁlls
•Out of the JQuery Plugin Ecosystem and into NPM or
Bower
•Browser and Server
28

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

Resources for DOM references
http://blog.garstasio.com/you-dont-need-jquery/
http://youmightnotneedjquery.com/
http://html5please.com/
30

Thank you!
@howlowck
https://joind.in/16012
31

Ditching jQuery Madison

More Related Content

What's hot

Viewers also liked

Similar to Ditching jQuery Madison

Recently uploaded

Ditching jQuery Madison