Getting Some Closure aka Best Practices for JavaScript and jQuery - - PowerPoint PPT Presentation

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

Getting Some Closure

aka Best Practices for JavaScript and jQuery in WordPress Vasken Hauri

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

About me

• VP of Strategic Engineering at 10up, Inc.
• Find me on Twitter @vaskenhauri
• 10up is hiring! Come find me if you’re

interested (or check out http://10up.com).

• I (don’t) blog on neverblog.net, which is

accurately named.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

The WP JSON API

Better than a double rainbow!

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

WP JSON API

• Enables you to Create, Read, Update, or Delete

(CRUD) your WordPress content via a RESTful API.

• As WordPress evolves as a CMS, separation of the

data and presentation layers becomes increasingly important.

• The JSON API accomplishes this goal, giving you

the power to manage, edit, and display your content with the highest degree of flexibility and performance.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

Collage courtesy of Taylor Lovett Source: http://taylorlovett.com/2014/08/23/ wordcamp-boston-2014-wp-api/

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

WP JSON API (cont.)

Remote Address:192.168.50.4:80 Request URL:http://local.wordpress.dev/wp-json/posts/1 Request Method:GET Status Code:200 OK

{ "ID": 1, "title": "Hello world!", "status": "publish", "type": "post", "author": { "ID": 1, "username": "admin", "name": "admin", […] "meta": { "links": { "self": "http://local.wordpress.dev/wp-json/users/1", "archives": "http://local.wordpress.dev/wp-json/users/1/posts" } } }, "content": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>\n", …

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

Implications

• Lightweight data can be requested from the

server and implemented in a template via JS.

• Enables easy use of your favorite templating

engine (Mustache, Handlebars, etc.).

• Makes WP data easy to access from a myriad of

places, by supporting OAuth and ofgering simple interactivity with mobile or web apps.

• A whole lot more WP code is going to use

JavaScript.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

1: Variable Scoping

• High potential for name collisions
• Global namespace means bad interoperability

with other plugins //You wouldn't do this in WordPress...would you? function get_the_ID() { echo 'hello, I am a giant function name collision!'; }

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

1: Variable Scoping

• Prefixing your functions is a decent way to avoid

name collisions, but it’s not 100% efgective.

• Someone else could use the same prefix, or

abbreviations could cause accidental collisions on some installs. //This is a bit better function my_cool_plugin_get_the_ID() { echo 'hello, I am a decent option for avoiding function name collisions.'; }

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

1: Variable Scoping

• Creates the same problem as the previous PHP

example: a globally namespaced function attached to the window object.

• Risks colliding with other JS functions written

by other plugins. function getPost(thePostID) { var postID = thePostID, post = {}; //Get a post through the WP JSON API return postID; }

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

1: Variable Scoping

//Object-oriented PHP enables us to avoid function name collisions class My_Cool_Plugin { function __construct() { //do stuff to instantiate the class } public function get_the_ID() { echo 'hello, I play nice in the global namespace because I\'m in a class.'; } }

• //and then you instantiate the plugin by globalizing it...

global $myplugin; $myplugin = new My_Cool_Plugin(); //...or using a singleton, or whatever you'd like!

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

2: Performance

//Let's retrieve a post! $new_post = get_post( 7 );

• echo $new_post->post_title;
• //Now let's retrieve it again to get another property of the

WP_Post object! $new_post = get_post( 7 );

• echo $new_post->post_type;

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

2: Performance

• In this example, we’ve reduced performance-

limiting calls to the database or caching layer. This is good practice for PHP performance.

• In JavaScript for WP, you can think of the DOM as the

equivalent of the database/caching layer: reducing calls to it is good practice for performance.

//That doesn't make much sense...we could just do: $new_post = get_post( 7 ); echo $new_post->post_title; echo $new_post->post_type; //This results in fewer DB queries (or cache key calls)

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

2: Performance

• Each jQuery function call requires a trip back to the

DOM, which takes far longer than retrieving the result of the jQuery $() function from a variable.

• jQuery selectors do not use magic. They use Sizzle.

Often, this means convenience over performance. //Section 2: Performance Optimization $( '#main' ).addClass( 'visible' );

• //Stuff happens, then...

$( '#main' ).removeClass( 'visible' ); //This is non-performant (multiple DOM calls and Sizzle use)

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

2: Performance

//The performant option is... var $main = $( document.getElementById( 'main' ) );

• $main.addClass( 'visible' );
• //Again, stuff...

$main.removeClass( 'visible' ); //This is more performant (single DOM call and built-in JS selectors)

Test JS performance for yourself at http://jsperf.com

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

Closures.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

3: Closures

//This is an example closure called myCoolPlugin function myCoolPlugin() {

• //These vars function similarly to how class properties work in PHP

var theID = 1; //This function is only available within the closure, similar to a private function in PHP function privateFunction () {

• alert( 'I am not available from outside the closure' );

}

• //JavaScript lets us expose methods from within the closure. Functions
• //which are returned like these become public.

return { getID: function () { return theID; }, setID: function (newID) { theID = newID; } }; }

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

3: Closures

//we instantiate the closure by calling our closure function var coolPluginInstance = myCoolPlugin();

• //now we can call one of our "public" methods, such as .getID()

console.log(coolPluginInstance.getID());

• //using our .setID() method, we can update the value of the 'theID' variable

//within this instance of the closure coolPluginInstance.setID(2);

• //now .getID() will return 2 instead of 1

console.log(coolPluginInstance.getID());

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

3: Closures

//let's create another instance of the closure var coolPluginInstance2 = myCoolPlugin();

• //because this instance hasn't had .setID() called on it, .getID() returns 1

console.log(coolPluginInstance2.getID());

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

3: Closures

Closures ofger a lot of the same benefits as PHP classes:

• 1. Private functions that can be accessed only within

the closure.

• 2. Public functions that can be “returned” to a

variable, creating an “instance” of the closure.

• 3. Much less possibility of conflict with other JS

plugins’ namespaces.

• 4. Multiple instances can be created.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

Best Practices

• Think about your site visitors

and the fact that they might not have the latest hardware: write performant JavaScript.

• Consider your JavaScript within

the WordPress ecosystem, and do your part to limit plugin collisions.

• Use closures for your plugins

whenever possible.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

What’s Next for the API?

• Integration into WordPress Core (currently

planned for late 2014/early 2015).

• Help with issues on Github is always welcome!
• Currently running in production on some major

publishing sites, as a plugin.

• Bringing WordPress into the future: with JSON

gaining universal adoption as a data exchange format, the sky’s the limit in terms of integrating with other web technologies and applications.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4

Questions?