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 o fg ering 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 //You wouldn't do this in WordPress...would you? � function get_the_ID() { � � echo 'hello, I am a giant function name collision!'; � } • High potential for name collisions • Global namespace means bad interoperability with other plugins

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4 1: Variable Scoping //This is a bit better � function my_cool_plugin_get_the_ID() { � � echo 'hello, I am a decent option for avoiding function name collisions.'; �� } � • Prefixing your functions is a decent way to avoid name collisions, but it’s not 100% e fg ective. • Someone else could use the same prefix, or abbreviations could cause accidental collisions on some installs.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4 1: Variable Scoping function getPost(thePostID) { � var postID = thePostID, post = {}; � //Get a post through the WP JSON API � return postID; � } • 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.

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 //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) • 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.

Vasken Hauri | @vaskenhauri #WP-API | http://tinyurl.com/lfgsqc4 2: Performance //Section 2: Performance Optimization � $( '#main' ).addClass( 'visible' ); � � //Stuff happens, then... � $( '#main' ).removeClass( 'visible' ); � //This is non-performant (multiple DOM calls and Sizzle use) � • 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.

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 o fg er 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?