Slide 1

Slide 1 text

The Benefits of Vanilla JavaScript WordCamp Sacramento 2017 1 (for the jQuery Developer)

Slide 2

Slide 2 text

Hi, I’m Nate

Slide 3

Slide 3 text

I have a confession

Slide 4

Slide 4 text

I ♥ jQuery

Slide 5

Slide 5 text

but… sometimes I use it as a crutch

Slide 6

Slide 6 text

jQuery is awesome!

Slide 7

Slide 7 text

What do I mean by Vanilla JavaScript?

Slide 8

Slide 8 text

Why should I even learn Vanilla JavaScript?

Slide 9

Slide 9 text

Because Matt said so…

Slide 10

Slide 10 text

Knowing jQuery != Knowing JavaScript

Slide 11

Slide 11 text

Performance

Slide 12

Slide 12 text

operations/second Vanilla document.getElementById( ‘app’ ); 12,137,211 jQuery $( ‘#app’ ) 350,557 http://vanilla-js.com/

Slide 13

Slide 13 text

One less dependency to load in the browser

Slide 14

Slide 14 text

The Future

Slide 15

Slide 15 text

jQuery Browser Support 1.12.4 (WordPress) - Support for IE6+ 15 3.2.1 (Current) - Support for IE9+

Slide 16

Slide 16 text

Fancy Frameworks and Libraries

Slide 17

Slide 17 text

You Might Not Need jQuery…

Slide 18

Slide 18 text

How Can I Start?

Slide 19

Slide 19 text

DOM

Slide 20

Slide 20 text

Selecting DOM Elements $( ‘.some-selector #here’ )

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Creating DOM Elements document.createElement() element.cloneNode() element.appendChild() - Create an element by passing it an HTML tag - Clone an element - Append a child

Slide 24

Slide 24 text

More DOM Topics Traversing the DOM Form Manipulation Styles element.parentNode.firstChild getSiblings( element ) element.value element.style.backgroundColor = ‘red’

Slide 25

Slide 25 text

Events

Slide 26

Slide 26 text

addEventListener Similar to .on(), .click(), etc. in jQuery element.addEventListener( ‘click’, function() { // Do something } );

Slide 27

Slide 27 text

AJAX

Slide 28

Slide 28 text

XMLHttpRequest (XHR) is UGLY

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Live Coding! github.com/nateconley/vanilla-js

Slide 32

Slide 32 text

Learn More • JavaScript 30 - wesbos.com/javascript30 • Plain JS - plainjs.com • JavaScript for WordPress - javascriptforwp.com • You Might Not Need jQuery - youmightnotneedjquery.com

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

@nateconley123 nateconley.com