Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ditching JQuery

1,119 views

Published on

JQuery is awesome, but with all major browsers following the ES and HTML5 specs, the library has become more of a convenience than a necessity for browser compatibility. While the library is useful and ubiquitous, it does distract us from learning the language that it's built on. This talk will outline functionalities that pure javascript provides, and also provide steps we can take to begin writing vanilla javascript applications and start appreciating the power and uniqueness of javascript.

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Ditching JQuery

  1. 1. Ditching JQuery Hao Luo Northwestern University https://joind.in/13726
  2. 2. Ditching JQuery - Hao Luo - php[tek] 2015 Intro 2 4 years as a full-time web developer
  3. 3. Ditching JQuery - Hao Luo - php[tek] 2015 I ❤ JQuery •One codebase, all the browser! •Introduced me to JavaScript •“It just works” 3
  4. 4. 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
  5. 5. Ditching JQuery - Hao Luo - php[tek] 20155 Scenario Problem
  6. 6. 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
  7. 7. Ditching JQuery - Hao Luo - php[tek] 2015 IE9 Demo 7 latestayapp.com/jquery latestayapp.com/purejs
  8. 8. 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
  9. 9. Ditching JQuery - Hao Luo - php[tek] 2015 DOM Querying, Traversal, and Manipulation 9
  10. 10. 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/
  11. 11. 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
  12. 12. Ditching JQuery - Hao Luo - php[tek] 2015 DOM Events 12
  13. 13. Ditching JQuery - Hao Luo - php[tek] 201513 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 - 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 JS getAllElToArr('.delete').forEach(function  (el)  {        el.addEventListener('click',  deleteApplication);   });   EventListener #1 EventListener #4 EventListener #3 EventListener #2 EventListener #5 li.application ☺☹ ✖ EventListener #6 ✖ ✖ ✖ ✖
  15. 15. 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
  16. 16. Ditching JQuery - Hao Luo - php[tek] 2015 AJAX 16
  17. 17. 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+
  18. 18. 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'   });  
  19. 19. 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);   });  
  20. 20. Ditching JQuery - Hao Luo - php[tek] 2015 Eliminates Callback hell Offers More Flexibility and Freedom Promises are awesome 20
  21. 21. Ditching JQuery - Hao Luo - php[tek] 2015 Utilities 21
  22. 22. 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"
  23. 23. 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 param yes yes yes 9+
  24. 24. 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  
  25. 25. 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
  26. 26. Ditching JQuery - Hao Luo - php[tek] 2015 Closing Thoughts 26
  27. 27. 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  
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. Ditching JQuery - Hao Luo - php[tek] 2015 Thank you! @howlowck https://joind.in/13726 31

×