Jay Hoffmann

It starts with a simple maxim.

Learn Javascript Deeply.

That’s what Matt said. And it’s good advice. Javascript underpins everything we do, and it’s becoming more and more advanced every day. It’s not just the future of WordPress, it’s the future (and present) of the web.

Of course, Matt mentioned this right around the time he showed off a new admin dashboard written entirely in client-side Javascript with React, and proxied through a server also written in Javascript. Which is great for WordPress. But it’s not a great place for everyone to start.

The truth is there are a number of ways to start using Javascript that are a little more… approachable. My goal here is to go through a few ways you can start using Javascript, today, without completely changing your workflow.

I will be talking about a lot of things. There will be code. I won’t be diving too deep into any one thing. My hope is that I can spark some interest for you. That you connect with one of these new processes or patterns and you feel encouraged enough to keep digging.

Generally speaking, I think there are three great ways to approach Javascript.

• Using Javascript to manage a front-end build process
• Managing events, page transitions and AJAX with a watchful eye
• Building a full-scale Single Page Application with the WordPress REST API.

I want to talk about that last bit a lot more in the future. But for now, I’m mostly going to focus on the first two.

Javascript Build Tools

If you develop front-end code in your plugins or themes, you’ve probably noticed yourself doing the same things over and over. Things like compiling SASS down to CSS, concatenating JS files together and minifying them, creating SVG or icon fonts, linting your code for errors, the list goes on You might have even heard of some nifty tools out there like CodeKit or Prepross that can do this for you. But there’s another way you can do this. With Javascript.

Javascript build tools allow you to create basic script files that will automatically perform these tasks for you, with a little help from Node on the command line. Build tools are a great way to learn Javascript because the barrier to entry and the risk factor can’t be lower. If you screw up, it won’t effect your live site. You’ll just have to track down the error and try again.

These build tools typically run on top of Node, which is why you’re able to run it from your machine. And there are a lot of them out there. I’m just going to focus on two: Grunt and Gulp.

Since both use Node, they follow the same basic procedure.

1. Install NodeJS, either from the site or with a tool like Homebrew
2. Navigate to your theme or plugin folder in your Terminal and type one command: npm init. This will automatically create a file called package.json. This stores a list of dependencies that the build tool will need to work. But don’t worry, you won’t be editing this file directly.
3. The way you do add packages is with npm install PACKAGENAME --save-dev. These packages will automatically get added to your package.json file for future use.
4. Create a Gruntfile or Gulpfile (depending on your preference)

I’ll start with Grunt. Grunt works by creating basic Javascript objects, which you use to pass in configurations for modules. There’s not a whole lot too it, but you can chain them together to do some pretty great stuff. For instance, if we wanted to concatenate our JS files and compile SASS files, we would install packages with npm install grunt-contrib-concat grunt-contrib-sass --save-dev. Then we would set up our Javascript in a file called Gruntfile.js.

module.exports = function (grunt) {
  grunt.initConfig({
    concat: {
      dist: {
        src: [
          '/assets/scripts/vendor/*.js',
          '/assets/scripts/*.js'
        ],
        dest: '/js/app.js',
      }
    },
    sass: {
      all: {
        options: {
          style: 'compressed'
        },
        files: {
          'style.css': '/assets/styles/style.scss'
        },
      }
    },
  });
}
grunt.registerTask('styles', ['sass'])
grunt.registerTask('default', [sass', 'concat', 'uglify', 'watch']);

One thing that you’ll learn about in Javascript is that just about everything is an object. That means that inside of these objects you can run any Javascript you want. So you can take grunt files, put them next to vanilla Javascript functions or variables and build anything. The possibilities are really endless.

Gulp is similar, with a few small differences. It works by chaining together tasks, one after another. It also uses CommonJS, so if you’re looking to learn more about Javascript modules and how to link together small packages, it may be a good starting point. To run the same tasks we have in the Grunt example, we just install our packages with npm install gulp-sass gulp-concat --save-dev, and then add our Gulpfile.js.

var gulp           = require('gulp'),
    concat         = require('gulp-concat'),
    sass           = require('gulp-sass');
gulp.task('scripts', function() {
    return gulp.src('./assets/js/app/**/*.js;)
            .pipe(concat('scripts.js'))
            .pipe(gulp.dest('./assets/js/'))
            .pipe(rename({ extname: '.min.js' }))
            .pipe(gulp.dest('./assets/js/'));
});
gulp.task('sass', function () {
    return gulp.src(‘./assets/
                     styles/style.scss')
            .pipe(sass.sync({
          outputStyle: ‘compressed'})
          .on('error', sass.logError))
            .pipe(gulp.dest('./'));
});
gulp.task('default', ['scripts', 'sass']);

Interested?

• Underscores starter theme, which uses Grunt
• Using Grunt to Speed Up and Standardize WordPress Development
• Using Gulp for WordPress Automation
• Using Gulp for WordPress Theme Development

Organizing Javascript

But you can do even more with Javascript. It turns out that a lot can be learned simply from structuring your Javascript better.

If you’ve been coding up themes or plugins for a while, chances are you’ve written some jQuery. You know, click this button to show a dropdown type stuff. And you’ve probably written out code that looks like this:

$('.btn-thing').on('click', function(e) {
    // Do your stuff
});

But there’s a better way. Learn yourself a few basic Javascript patterns to manage your events, and you’ll find yourself writing reusable code over and over.

The Module Pattern

The module pattern can be a great way to organize events like clicks, input changes, or other basic jQuery binded events. Remember how I said everything in Javascript is an object? Well the Module pattern uses this as an advantage. You basically store all of your events in a single object, decoupling your elements from the functions that is called when an event occurs. This is probably easiest to explain with some code:

var Module = {
    el : {
        $wrapper : $('#wrapper'),
        $button : $('.btn')
    },

    init : function() {
        this.bindUIActions();
    },

    bindUIActions : function() {
        Module.el.$button.on('click', 'onClickEvent');
        Module.el.$wrapper.each(function() {
            Module.doSomethingWithList($(this))
        })
    },

    onClickEvent : function(e) {
        // Do Something
    },

    doSomethingWithList : function(item) {
        // Do something with the item el
    }

}

Elements are stored in the “el” objects, events are controlled from the init function, which then passes the buck down to individual functions. Writing code like this makes things a lot easier to read, and it can make your job easier.

The Inheritance Pattern

If you wanted to take this a step further, the Inheritance pattern may do the trick. It starts out the same way, you build a simple object which sets up some basic functionality. But you also include a way to extend that object, so you can pass it a few options that will change functionality.

This is most commonly seen in jQuery plugins, but there’s no reason why you can’t start doing this today. That way, you don’t have to keep writing the same functionality over and over again. Instead you write it once, and then just pass an object a few options to change little things here and there. Then your code becomes a reusable module.

var Object = {
  init: function( options, el ) {
    this.options = $.extend( {}, this.options, 
                    options );

    this.el  = el;
    this.$el = $(el);

    this.init();

    return this;
  },
  options: {
    option1: "default"
  },
  init: function(){
    // Do something with messages
  },
  myMethod: function( msg ){
    // this.$el or this.options is accessible
  }
};
// Basic create / extend of object for browser support
if ( typeof Object.create !== 'function' ) {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}


// Create a plugin based on a defined object
$.inherit = function( name, object ) {
  $.fn[name] = function( options ) {
    return this.each(function() {
      if ( ! $.data( this, name ) ) {
        $.data( this, name, Object.create(object).init( 
        options, this ) );
      }
    });
  };
};
$.inherit('inheritedObject', Object);('#elem').inheritedObject({option1: "Different"});

There are really two things to pay attention to here. The $.extend({}) function is what extracts options out to use within the main object. And the $.inherit() function is what will pass options back up to the Object when something is called.

Interested?

• Essential jQuery Plugin Patterns
• How Do You Structure Javascript: The Module Edition
• Using Objects to Organize Your Code
• The Design of Code: Organizing Javascript
• Using the Inheritance Pattern to Structure Large-Scale Javascript Applications

Managing AJAX and Page Transitions

AJAX stands for Asynchronous Javascript and XML. In practice, it means fetching chunks of HTML or data using Javascript and loading it into a page without a page refresh. Coupled with some new HTML5 features and Javascript libraries, AJAX can really add to your site. It can make screens transition from one to the next, as a user navigates seamlessly around your site.

There are lots of ways to manage AJAX in WordPress. But the way I prefer is to organize the server-side code into a single Class and then use the module pattern to interpret the requests. Rather then try to explain that all here, I’ll let Jay Wood over at WebDev Studios do it for me. Really, click that link. It’s a great article.

I will, however, mention two Javascript libraries of interest: smoothState.js and pjax.

Both libraries automatically fetch pages when a user clicks on any links and loads the content in. smoothState puts more of an emphasis on the transitions between pages, using CSS3 transitions and basic class switching to do most of the work. To set it up you just need a simple object.

(function ($) {
  'use strict';
  var content  = $('#main').smoothState({
        onStart : {
          
          duration: 250,
          
          render: function () {
            content.toggleAnimationClass('is-exiting');
          }
        }
      }).data('smoothState');
})(jQuery);

pjax is even simpler to get started with, but can do a bit more if you dive in. To automatically start pulling in content without a page refresh you just need to load the code and write one line of Javascript.

$(document).pjax('a', '#pjax-container');

But there’s a lot more that can be done. Exploring the library and employing some of the patterns talked about earlier can go a long way. But check out the links below for some great implementations.

Interested?

• pjax theme from UpThemes
• pjax helper plugin from Christopher Davis. A great code reference
• Smoothstate and WordPress
• Adding Page Transitions to WordPress
• Handling AJAX and WordPress in Style

The REST API and Beyond

The big news for WordPress this year was the REST API. Again, this isn’t the time to go too deep into this, but basically the REST API allows you to access your site’s content as basic data JSON objects. These data objects can be read by frameworks like Backbone, Angular and React to process content completely on the client-side (on the browser). This allows you to build more complex web applications instead of just sites. Think Gmail. Or Facebook.

And that’s just scratching the surface of the REST API. It can also be used to connect to third party platforms and services, and even more importantly I think, get sites talking to each other. Which is really cool. And will almost certainly require some Javascript. So roll up your sleeves, find your entry point, and get going.

Interested?

• Javascript for WP
• Calypso, an Automattic Project
• A WordPress + Backbone course at WP Sessions
• Delicious Brains blog, with lots of great tutorials

Just Keep Learning

I’m hoping I peeked your interest somewhere. I’m hoping you’re ready to learn Javascript and have some resources to get started with. The trick is to start somewhere, get familiar and keep the ball rolling.

When I started building websites, I used Notepad, and wrote pages in plain HTML and a little CSS. After a couple of years giving that a go, I moved to WordPress, and found out all about web standards. I’ve certainly written my fair share of PHP, but my primary skill set is the front-end. I was never trained in computer science, and programming has been a slowly acquired skills. Only in the last few years have I truly become serious about JavaScript development. In that time, I’ve picked up a few resources that I wish somebody had told me about when I first started out. Hopefully, a couple of these will help.

The JavaScript / jQuery debate

I’ll cop to it. I learned jQuery first. Some will say that’s wrong. In my opinion, it abstracts away annoying browser quirks and makes diving into code a lot easier. The trick is to avoid simply writing a mess of chained spaghetti right from the get go.

If you really want to understand how jQuery works, I’ll give you the secret sauce. Learn jQuery in 30 Days, from Jeffrey Way. In about 8 hours you’ll learn about how forgiving JavaScript really is, and why you need to fight against that to write maintainable code.

When you’re done with that, follow it up with a real deep dive. An oldie but goodie from Addy Osmani about building large-scale jQuery applications. A lot of the tools he mentions have been abandoned, or are very different these days, but the fundamental concepts are essential.

Structuring JavaScript

To me, the easiest way to start getting better with JavaScript was to learn how to structure code properly. For instance, let’s say you have a set of jQuery events and click handlers throughout your app. How can you organize events to keep things DRY?

One option is to use the module pattern, expertly explained by Chris Coyer over on CSS-Tricks. Modules start simple, a plain JavaScript object that stores your jQuery handlers and delegates events, like so.

var s, 
Module = { 
    el : {
        button1 : $('#button-1'),
        button2 : $('#button-2')
    },
    
    init : function() {
        s = this.el;
        this.bindUIActions();
    },
    
    bindUIActions : function() {
        s.button1.on('click', Module.firstEvent);
        s.button2.on('click', Module.secondEvent);
    },
    
    firstEvent : function(e) {
        e.preventDefault();
        console.log("Event 1 successful");
    },
    
    secondEvent : function(e) {
        e.preventDefault(e);
        console.log("Event 2 successful");
    }
}

Module.init();

Modules, and design patterns generally, help you understand how JavaScript really works. There’s almost nothing more important than wrapping your head around Objects and scope. One trick here is to declare the global variable s and then call it in init(), assigning it to this.el.

Why? Because this is incredibly tricky in JavaScript, and binding it to a global variable from the get-go makes it easier to access in your entire module.

If you’re looking for the next level up, try Rebecca Murphy’s description of using objects to organize JavaScript. Of course, there’s also an entire book by Addy Osmani about JavaScript design patterns if you’re interested.

Understanding JavaScript

Here’s one thing you’ll hear, oh, all the time. 

Everything in JavaScript is an object.

Of course, that’s not entirely true. But it’s also absolutely true. Yes, there are primitives like booleans and strings that aren’t technically Objects, but they are usually transformed into Objects as they’re interpolated. And everything else, functions, arrays, etc. are prototypical Objects free to be mutated and extended. Why is that important? I can tell you one reason.

JavaScript provides a technique that gets us the best of both worlds. We can specify properties that, from the outside, look like normal properties but secretly have methods associated with them.

That’s a quote from Marijn Haverbeke, who wrote a free online book called Eloquent JavaScript. It is, by far, the most in-depth discussion of the why behind JavaScript and how we as developers can use it to our advantage. At the end of the day, you can do just about anything with JavaScript. Eloquent JavaScript will help you understand why you shouldn’t.

Still not convinced? Pick up a copy of JavaScript: The Good Parts. Douglas Crockford is a prophet.

I’ve also heard great things about the You Don’t Know JS series, though I haven’t fully dived in yet.

Learning Frameworks, Learning Always

Ok, but you want to build an application with WordPress as the base, and JavaScript as the client. That’s where I’m at. And for the past year or so, I’ve been doing just that. I’m hoping to share a good amount of those learnings here from time to time, but here’s the thing I’ve learned about all these frameworks: They come and go. Many take fundamentally different ideological approaches, but the underlying foundation remains pretty similar. Learn a library, and you can use it. Bully for you. But, learn basic JavaScript MVC (MV*) principles and you can pick up just about any framework or library in a couple of days.

I know many of you are just looking for comparisons. Here’s a decent one.

But for those that want to understand the right use case for frameworks, WP Sessions has an excellent course on using Backbone and WordPress. The presenters really dive into why using a front-end framework / library like Backbone is important and discuss piratical ways to layer it into existing projects.

Another great introduction into the “why” of MVC is Developing Backbone Applications, again by Addy Osmani. Osmani doesn’t simply walk you through how to create an application in Backbone, he gets to the core of application frameworks, and how they can help you get the job done.

And then there’s React. Which, and I can’t state this enough, is just one of many tools available to you. It’s the new hotness, and I understand why it feels imperative to learn. If you’re a functional PHP programmer, it actually probably makes a lot of sense. What really brought React into view for me was an article called “ReactJS For Stupid People“. I recommend you read it. I can also recommend an excellent tutorial about React + WordPress over on Rastislav Lamo’s site. And of course, Calypso is being written in React.

But always remember, you don’t need a framework.

Just Give Me the Links

Fine.

• Learn jQuery in 30 Days
• Large Scale jQuery Applications
• How Do You Structure JavaScript? The Module Pattern edition
• Understanding JavaScript Function Invocation and “this”
• JavaScript’s “this”: how it works, where it can trip you up
• Using Objects to Organize Your Code
• Learning JavaScript Design Patterns (book)
• Eloquent JavaScript (book)
• JavaScript: The Good Parts (book)
• You Don’t Know JS
• Data Binding Code in 9 JavaScript Frameworks
• WP Sessions Course: WordPress and Backbone.js
• Developing Backbone.js Applications (book)
  
• ReactJS for Stupid People
• React Single-Page WordPress REST API Theme Tutorial
• WP-Calypso
• A JS Framework on Every Table