Upload
howlowck
View
362
Download
1
Tags:
Embed Size (px)
Citation preview
Ditching JQuery - Hao Luo - php[tek] 2015
I ❤ JQuery
•One codebase, all the browser!• Introduced me to JavaScript• “It just works”
3
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
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
Ditching JQuery - Hao Luo - php[tek] 2015
IE9 Demo
7
latestayapp.com/jquerylatestayapp.com/purejs
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
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/
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
Ditching JQuery - Hao Luo - php[tek] 201513
Register Event CallbacksYes Yes Yes 9+
JQuery $('.delete').on('click', deleteApplication);
Vanilla JSgetAllElToArr('.delete').forEach(function (el) { el.addEventListener('click', deleteApplication); });
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 JSgetAllElToArr('.delete').forEach(function (el) { el.addEventListener('click', deleteApplication); });
EventListener #1
EventListener #4
EventListener #3
EventListener #2
EventListener #5
li.application ☺☹ ✖
EventListener #6
✖
✖
✖
✖
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
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+
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' });
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); });
Ditching JQuery - Hao Luo - php[tek] 2015
Eliminates Callback hell Offers More Flexibility and Freedom
Promises are awesome
20
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"
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 paramyes yes yes 9+
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
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
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
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
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
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
Ditching JQuery - Hao Luo - php[tek] 2015
Thank you!
@howlowck
https://joind.in/13726
31