O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Ditching jQuery Madison

406 visualizações

Publicada em

Ditching JQuery Talk At Madison PHP

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Ditching jQuery Madison

  1. 1. Ditching JQuery Hao Luo Northwestern University https://joind.in/16012
  2. 2. Ditching JQuery - Hao Luo - Madison PHP Intro 2 4 years as a full-time web developer @howlowck haowebdev@gmail.com
  3. 3. Ditching JQuery - Hao Luo - Madison PHP I ❤ JQuery •One codebase, all the browser! •Introduced me to JavaScript •“It just works” 3
  4. 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. 5. Ditching JQuery - Hao Luo - Madison PHP5 Scenario Problem
  6. 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. 7. Ditching JQuery - Hao Luo - Madison PHP IE9 Demo 7 github.com/howlowck/latestay-purejs github.com/howlowck/latestay-jquery
  8. 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. 9. Ditching JQuery - Hao Luo - Madison PHP DOM Querying, Traversal, and Manipulation 9
  10. 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. 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. 12. Ditching JQuery - Hao Luo - Madison PHP DOM Events 12
  13. 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. 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. 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. 16. Ditching JQuery - Hao Luo - Madison PHP AJAX 16
  17. 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. 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. 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. 20. Ditching JQuery - Hao Luo - Madison PHP DeferredValue Eliminates Callback hell Offers More Flexibility and Freedom Promises are awesome 20
  21. 21. Ditching JQuery - Hao Luo - Madison PHP Utilities 21
  22. 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. 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. 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. 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. 26. Ditching JQuery - Hao Luo - Madison PHP Closing Thoughts 26
  27. 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. 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. 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. 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. 31. Ditching JQuery - Hao Luo - Madison PHP Thank you! @howlowck https://joind.in/16012 31

×