Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Benefits of Vanilla JavaScript (for the jQu...
Search
Nate Conley
September 12, 2017
Technology
0
160
The Benefits of Vanilla JavaScript (for the jQuery Developer)
Nate Conley
September 12, 2017
Tweet
Share
More Decks by Nate Conley
See All by Nate Conley
wp_enqueue_scripts
nateconley
0
47
webpack for WordPress
nateconley
0
140
Other Decks in Technology
See All in Technology
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
43
18k
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
300
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
140
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.2k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
180
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
Claude Code に プロジェクト管理やらせたみた
unson
6
3.8k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
A Tale of Four Properties
chriscoyier
160
23k
Agile that works and the tools we love
rasmusluckow
329
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How STYLIGHT went responsive
nonsquared
100
5.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
RailsConf 2023
tenderlove
30
1.1k
Optimizing for Happiness
mojombo
379
70k
Building Applications with DynamoDB
mza
95
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Transcript
The Benefits of Vanilla JavaScript WordCamp Sacramento 2017 1 (for
the jQuery Developer)
Hi, I’m Nate
I have a confession
I ♥ jQuery
but… sometimes I use it as a crutch
jQuery is awesome!
What do I mean by Vanilla JavaScript?
Why should I even learn Vanilla JavaScript?
Because Matt said so…
Knowing jQuery != Knowing JavaScript
Performance
operations/second Vanilla document.getElementById( ‘app’ ); 12,137,211 jQuery $( ‘#app’ )
350,557 http://vanilla-js.com/
One less dependency to load in the browser
The Future
jQuery Browser Support 1.12.4 (WordPress) - Support for IE6+ 15
3.2.1 (Current) - Support for IE9+
Fancy Frameworks and Libraries
You Might Not Need jQuery…
How Can I Start?
DOM
Selecting DOM Elements $( ‘.some-selector #here’ )
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
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
Creating DOM Elements document.createElement() element.cloneNode() element.appendChild() - Create an element
by passing it an HTML tag - Clone an element - Append a child
More DOM Topics Traversing the DOM Form Manipulation Styles element.parentNode.firstChild
getSiblings( element ) element.value element.style.backgroundColor = ‘red’
Events
addEventListener Similar to .on(), .click(), etc. in jQuery element.addEventListener( ‘click’,
function() { // Do something } );
AJAX
XMLHttpRequest (XHR) is UGLY
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();
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 } );
Live Coding! github.com/nateconley/vanilla-js
Learn More • JavaScript 30 - wesbos.com/javascript30 • Plain JS
- plainjs.com • JavaScript for WordPress - javascriptforwp.com • You Might Not Need jQuery - youmightnotneedjquery.com
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
@nateconley123 nateconley.com