The Benefits of Vanilla JavaScript (for the jQuery Developer)

Transcript

1. The Benefits of Vanilla JavaScript WordCamp Sacramento 2017 1 (for the jQuery Developer)
2. Hi, I’m Nate
3. I have a confession
4. I ♥ jQuery
5. but… sometimes I use it as a crutch
6. jQuery is awesome!
7. What do I mean by Vanilla JavaScript?
8. Why should I even learn Vanilla JavaScript?
9. Because Matt said so…
10. Knowing jQuery != Knowing JavaScript
11. Performance
12. operations/second Vanilla document.getElementById( ‘app’ ); 12,137,211 jQuery $( ‘#app’ ) 350,557 http://vanilla-js.com/
13. One less dependency to load in the browser
14. The Future
15. jQuery Browser Support 1.12.4 (WordPress) - Support for IE6+ 15 3.2.1 (Current) - Support for IE9+
16. Fancy Frameworks and Libraries
17. You Might Not Need jQuery…
18. How Can I Start?
19. DOM
20. Selecting DOM Elements $( ‘.some-selector #here’ )
21. Selecting DOM Elements document.getElementById() document.querySelector() document.querySelectorAll() - Get one element by ID selector - Get one element by CSS-like selector - Get all elements by CSS-like selector
22. Selecting DOM Elements document.getElementsByClassName() document.getElementsByName() document.getElementsByTagName() - Get all elements by class selector - Get all elements by name attribute - Get all elements by HTML tag
23. Creating DOM Elements document.createElement() element.cloneNode() element.appendChild() - Create an element by passing it an HTML tag - Clone an element - Append a child
24. More DOM Topics Traversing the DOM Form Manipulation Styles element.parentNode.firstChild getSiblings( element ) element.value element.style.backgroundColor = ‘red’
25. Events
26. addEventListener Similar to .on(), .click(), etc. in jQuery element.addEventListener( ‘click’, function() { // Do something } );
27. AJAX
28. XMLHttpRequest (XHR) is UGLY
29. var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if ( xhr.readyState == 4 && xhr.status == 200 ) { // Do something } } xhr.open( ‘GET’, ‘/wp-json/wp/v2/posts’, true ); xhr.send();
30. Fetch API Supported in major browsers, but no IE11 davidwalsh.name/fetch fetch( '/wp-json/wp/v2/posts', { method: ‘GET' } ) .then( function( response ) { // Do something } ) .catch( function( error ) { // Do something } );
31. Live Coding! github.com/nateconley/vanilla-js
32. Learn More • JavaScript 30 - wesbos.com/javascript30 • Plain JS - plainjs.com • JavaScript for WordPress - javascriptforwp.com • You Might Not Need jQuery - youmightnotneedjquery.com
33. Learn More • From jQuery to JavaScript - code.tutsplus.com/ tutorials/from-jquery-to-javascript-a-reference-- net-23703 • Sans jQuery - gist.github.com/joyrexus/7307312 • Wes Bos Resources - wesbos.com/learn-javascript/ • Parallax Done Right - medium.com/@dhg/parallax- done-right-82ced812e61c
34. @nateconley123 nateconley.com