JavaScript has been a growing topic in the WordPress ecosystem for almost as long as it has existed, but a few recent events are forcing people to pay attention with even more urgency. First, in the last few years JavaScript has gotten ever more important to the topic of web development in general for reasons of user perception of speed, application richness, and more.

Closer at hand, in December WordPress 4.4 came out, which incorporated the first half of the long-coming JSON REST API. (JSON, not coincidentally, stands for JavaScript Object Notation.) And at WordCamp US that same month, Matt Mullenweg, WordPress’s BDFL (benevolent dictator for life) challenged the community to really learn JavaScript in the new year.

I’m not an expert on all things JavaScript. I don’t have a dog in the fight about which framework or library is currently the best and I won’t talk your ear off about any corner of the ecosystem. What I have to offer, though, is a fairly nuanced perspective about a lot of different facets of the complex and difficultly ambiguous task of “learning JavaScript” as someone some distance through the (incompletable) process. Whether you’re sure everyone should be using React today or just think you’ve maybe heard of JavaScript before, I think we’ve got something for you.

JavaScript is Just Another Programming Language

I’ve given a talk a lot in the last year — slides here — about WordPress. One of the points I make is that four languages go into WordPress: CSS, HTML, JavaScript, and PHP. They all have some important stuff in common:

• A defined syntax which relies on English keywords to tell the computer what to do
• The ability to control behavior and presentation on a computer by changes to text files containing the English keywords and a variety of other symbols

HTML and CSS are declarative languages. PHP and JavaScript are both logic programming.

Beyond those similarities, CSS and HTML have more in common with each other than with JavaScript and PHP (which also have more in common with each other than with the other pair). The thing that divides the CSS/HTML pair from the JS/PHP one is this: HTML and CSS are declarative languages, you just create a file with a specific format and it’ll have the effects it should. PHP and JavaScript are both logic languages — some use the more inflammatory version, they’re both “real programming languages.” What we mean, in any case, is that in PHP and JavaScript you write a program that executes, and what your program contains is the set of logic behaviors and transformations that should occur during the process of that execution.

But What Is that Language? ECMAScript, etc.

If you’re a conventional WordPress user or developer, you’ve probably heard at least a bit by now about how there’s a new PHP, PHP 7, out and that it’s way better and faster than the old one (which was called PHP 5.6). This similar sort of thing is true with JavaScript, but it’s more complicated.

JavaScript — which has no relation to the Java programming language, just to vanish any possible lingering confusion — also has versions. What really differentiated JavaScript from PHP is that it runs in web browsers rather than on servers. As such, different browsers have different interpreters — things that take a text file and generate the right behavior in response — out in the world. With PHP (for most intents and purposes) the interpreter and the language standard are the same thing.

Because there are multiple different implementations of JavaScript the language is standardized into specifications by ECMA.

Because there are multiple different implementations of JavaScript — basically one for every major web browser — the language is standardized into specifications which are made by the Ecma International standards body. This group’s name is attached to the various specifications, which are then made to behave correctly in JavaScript interpreters. This standard is sometimes called “ECMAScript.”

The Version of JavaScript You Should Know

ES6 — which is now being called ECMAScript 2015 — came out last year.

Most every browser made in the last five years implements the ECMAScript 5 (often shortened to ES5) standard. This was completed back in December 2009. Parts of the JavaScript world are right now quite excited because the ES6 standard — which is now being called ECMAScript 2015 — was completed last year. This is an important change to many corners of the language. If you know basic JavaScript but hadn’t heard of ES6/2015, you’ll want to look into it. If you’re new to the whole world of JavaScript, don’t worry about the difference much, just know it exists.

The big thing to realize about JavaScript and versions is that each new browser still has to finish and deploy their implementation of ES2015. To my knowledge, no browser currently has it completely implemented. What this means is that if you want to use this new hot JavaScript version today, you’ll need to use what’s called a “transpiler.” A transpiler takes a program in one language — in our case ES6 — and makes it into stuff that works in all current browsers, or ES5. The most popular transpiler today as I write this is called Babel.

And It Does Run Outside the Browser

I hand-waved a bit earlier and said that JavaScript runs in browsers. This was once the only place it did, today it’s definitely not. This journey outward really kicked into higher gear when some folks created a thing called “Node.js” which took the JavaScript implementation from Google Chrome and made it into a web server. This happened in 2009, and since then has had pretty profound effects in the places that JavaScript is used in the world.

Today people run servers with JavaScript — the recent much-touted “Calypso” project from Automattic and WordPress.com actually does this. More substantially, people have also taken the lead from the success of that, and use JavaScript as part of their development process. There are whole suites of “build tools” developers use on their personal computers to handle things like transpilation, LESS/Sass compilation, and more which are all done in JavaScript. The two most common tools you hear talked about here are called Grunt and Gulp.

JavaScript Libraries and Frameworks

Like all programming languages, there are number of common tasks that people need to do with JavaScript that can be implemented once by a library or framework and then used by everyone. You’ve doubtless heard of some of these, but I just want to give a short summary of what I see as the major libraries and frameworks a WordPress developer should know about, which a short summary of what makes them useful, interesting, and/or controversial.

jQuery — The DOM Manipulation Library

If a WordPress developer has used only one JS library, it’s very probably jQuery. jQuery is the oldest thing in this list, and in some ways the simplest. It’s most known and used for small changes to the “DOM” (document-object model, basically rendered HTML in a browser), and can get out of hand if you try to do very complicated logic with it.

“Vanilla JS”

This one is technically older than jQuery, but that’s because it’s neither a library or framework. It’s just a sort-of-clever way people will sometimes refer to plain old JavaScript. I note it so you can (1) steer clear of trolls who might tell you it’s a hot new framework, and (2) to note that as JavaScript implementations got better at following the ECMAScript standards, some people have dropped jQuery and other compatibility-improving libraries in favor of using nothing but JavaScript itself. You save your visitors from downloading an extra file, and your code itself is likely a bit faster too.

Backbone — An MV* Library

Backbone is the most lasting of the libraries that came the generation after jQuery. Backbone is, essentially, a proto-MVC framework. (It’s technically MV*.) If you’ve never heard of MVC, model-view-controller is a pattern that is often used in web applications to keep your data (model), your templates (view), and behavior (controller) from walking all over each other. The ugliness I mentioned about “jQuery spaghetti” is because of a lack of this sort of structured pattern. Backbone provides a “model” and “view” object so you can have a bit more sanity, but doesn’t really have an opinion about how your application behavior is implemented.

Underscore — Functional Programming Aid

Underscore (not to be confused with _s, the theme skeleton) is Backbone’s little brother. I note it because of the naming confusion and because it lets me make another point that people should know. Underscore is basically, like jQuery, something that people use less as ES6 comes in, but it was the first popular “functional programming” library for JavaScript.

What’s Functional Programming?

Functional is the name for a style of programming which contrasts with “object-oriented” and “procedural.” Having “functions” in the language doesn’t make it functional.

This is a short aside about a topic that’s quite important but also very esoteric the first fifty times you encounter it. You’ll often hear people say that JavaScript is a “functional” programming language. Functional is the name for a style of programming which contrasts with “object-oriented” and “procedural.” Having “functions” in the language doesn’t make it functional — most WordPress functions are simply “stored procedures”, most of WordPress is written in a procedural paradigm.

Object-oriented programming, which some of WordPress is, is about having entities which perform and live in your system. (In PHP, you spot this with the new and class keywords being used.) Functional programming is about having “first class” functions, which can be passed around like variables and used as inputs to other functions. These functions are also, ideally, “pure” functions in the mathematical sense — they take inputs, and produce nothing but outputs. That is, they don’t have “side effects.”

That very brief summary may be over your head, the core idea I want non-experts to take away is just that “functional programming” is not just about making functions, and it’s worth keeping an eye out for and learning more about. </aside>

Angular (2) — The Most Popular Full Framework

Angular 1 was the first big framework of the post-Backbone generation, and for quite some time the most popular. I mentioned in my Backbone summary that it is an MV* library which doesn’t really care how you handle the behavior of your application. Angular was the first popular JavaScript “framework” — basically bigger more ambitious library — which did want to dictate how you built your application. It told you how to make your templates, how you would show your data, and where you would put things.

I’ve never really learned Angular deeply, in part because when the team behind it announced their next version — Angular 2 — they threw a lot of their core ideas out the window. They’ve since backed off — making an Angular 1 app into an Angular 2 app no longer seems like it would be a fool’s errand — but when Angular 2 comes out later this year adoption of it is still a big and important question.

Ember (2) — Another MVC Framework

Ember is of the same generation as Angular, very similar conceptually, and I have used it. Unlike Angular, Ember 2 promised a clear migration path forward from its first version, so I built a sizable Ember application. Ember is even more opinionated about how you use it, how you build your application, and what it all means than Angular is. Ember’s always said that have URLs inside of your JavaScript app are crucial, and it also strictly uses the terms of the MVC pattern and makes it very easy to use each of those named entities. Ember 2 has moved the emphasis from “controllers” to “components”, but you can still think of Ember as “a whole-application JavaScript MVC framework”.

React — Fastest Templates in the West

React is the last of the “current generation” JavaScript things I want to talk about. The core feature of React isn’t a full “MVC” promise like Angular or Ember, but rather that it’s the best darn “view” library a girl could dream of. One of the problems that surfaced in the era of Ember and Angular 1 was that view updates (as those frameworks did them) could become very slow. React’s popularity first grew out of the fact that it was way faster on that specific task, but now encompasses some of its other traits as well.

React is essentially a very opinionated version of a “view” layer, which focuses on making your drawing fast and does that by making you thoroughly think about containment of all your logic around that into a simple little unit. Because of its small ambition, it’s used with a lot of different app structures and data-management flows.

Everything Else

There are WAY more libraries, frameworks, and JavaScript tools that I’ve neglected to mention. This list is not meant to be exhaustive, but to give a bird’s eye view of the ecosystem below. If your favorite isn’t mentioned, don’t hesitate to leave a comment about it. I’d love to hear why it should have been included.

Whew! JavaScript is a Big Topic Area

JavaScript is like PHP but variables don’t need a dollar sign.

I’m drawing to a close not because I’ve told you all I know, nor all there is to know, about JavaScript. To pretend that I could have done so would have been laughable. I hope, though, you now understand that JavaScript has a fair bit in common with PHP, which you might already understand. If so, do know that there are some key ways that JavaScript is different — the “functional programming” section very briefly touched on this; “prototypal inherentance” and “scoping” are good search terms to go learn about others — but they’re the 20% stuff. (Pareto principle.) For 80% of what you need to start being effective, the idea “JavaScript is like PHP but variables don’t need a dollar sign” works fine.

How you choose to learn JavaScript — by starting to build an application with Angular, by doing some DOM manipulation with jQuery, by building a Gulp build process, or even making a Node server — you’re learning what almost everyone agrees is the most important programming language for the future of the web (if not all programming). Happy hacking!

Image credit: Unsplash via Sven Scheuermeier