Ditching JQuery

Ditching JQueryHao Luo Northwestern University

https://joind.in/13726


Ditching JQuery - Hao Luo - php[tek] 2015

Intro

2

4 years as a full-time web developer


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


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

latestayapp.com/jquerylatestayapp.com/purejs

http://latestayapp.com/jquery

http://latestayapp.com/purejs


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

http://latestayapp.com/purejs

http://latestayapp.com/applications

http://latestayapp.com/applications/20/approve


DOMQuerying, 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/

https://dom.spec.whatwg.org/#dom-element-closestselectors

https://github.com/eligrey/classList.js/


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


DOM Events

12


Register Event CallbacksYes Yes Yes 9+

JQuery $('.delete').on('click', deleteApplication);

Vanilla JSgetAllElToArr('.delete').forEach(function (el) { el.addEventListener('click', deleteApplication); });


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 JSgetAllElToArr('.delete').forEach(function (el) { el.addEventListener('click', deleteApplication); });

EventListener #1

EventListener #4

EventListener #3

EventListener #2

EventListener #5

li.application ☺☹ ✖

EventListener #6

✖

✖

✖

✖


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

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 Polyfill: https://github.com/github/fetch

yes yes yes 9+

https://github.com/github/fetch


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


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


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

http://www.w3.org/TR/NOTE-datetime-970915.html


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

•Use Packages and Polyfills vs monolithic libraries & frameworks

•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

http://blog.garstasio.com/you-dont-need-jquery/

http://youmightnotneedjquery.com/

http://html5please.com/


Thank you!

@howlowck


31


Date post:	10-Aug-2015
Category:	Technology
Upload:	howlowck
View:	307 times
Download:	1 times

Ditching JQuery

Technology