The Future of WordPressand JavaScript

WordPress CincinnatiMarch 2016

OUTLINE• History of JavaScript

• How JavaScript is used in WordPress

• Benefits of JavaScript

• Speculating the future of WordPress

• Demo

Learn JavaScript, Deeply“ — Matt MullenwegState of the Word, WordCamp US 2015

HISTORY OF JAVASCRIPT

HISTORY OF JAVASCRIPT

• Created by Brendan Eich

• Developed over the span of ten days in May 1995

• Introduced in Netscape Navigator 2.0 (September 1995)

WHAT IS JAVASCRIPT?• One of the three essential technologies of

the web (the others being HTML and CSS)

• Supported by all major web browsers without plugins

• Standard maintained by Ecma International, currently version 6 (ECMAScript 2015)

WHAT IS JAVASCRIPT?var API_ROOT = ‘https://andrewduthie.com/wp-json';function getPosts( callback ) {

var xhr = new XMLHttpRequest();xhr.open( 'GET', API_ROOT + '/wp/v2/posts' );xhr.onreadystatechange = function() {

var posts, error;if ( 4 === xhr.readyState ) {

try {posts = JSON.parse( xhr.responseText );

} catch ( e ) {error = e;

}

callback( error, posts );}

};xhr.send();

}

WHAT IS JAVASCRIPT?

import { API_ROOT } from 'config';

export default async function getPosts() {const response = await fetch( `${ API_ROOT }/wp/v2/posts` );return await response.json();

}

JAVASCRIPT IN WORDPRESS

JAVASCRIPT IN WORDPRESS

<?php

function mytheme_scripts() {$theme_dir = get_template_directory_uri();wp_enqueue_script(

'mytheme-script', // Unique name$theme_dir . '/script.js', // Script URLarray( 'jquery' ), // Dependencies'v1.4.1', // Versiontrue // In footer

);}add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

JAVASCRIPT IN WORDPRESSIncluding your own scripts

https://codex.wordpress.org/Using_Javascript

BENEFITS OF JAVASCRIPTInteractivity

BENEFITS OF JAVASCRIPTPerceived Speed

• Display content optimistically

• Artificial content can give users the perception of speed

JAVASCRIPT’S SURGE IN POPULARITY

Better tooling for large applications

Frameworks lower barrier to entry

Same language everywhere with Node.js

Language and browser improvements

THE FUTURE OF WORDPRESS

= ???+

CALYPSO

WP-API

WP-ADMIN 2.0Note: This is not it

LIVE DEMO