13 Killer JavaScript Resources to Get Up to Speed for WordPress

13 Killer JavaScript Resources to Get Up to Speed for WordPress

If you’ve heard that JavaScript is the new PHP (or at least, that it’s going to be a key part of the WordPress technology stack in the coming years), or you want to learn JavaScript but are overwhelmed and don’t know where to start, this is the post for you.

There’s been a lot of talk about JavaScript in the past couple of weeks and how it would transform WordPress since Automattic debuted its desktop app Calypso for WordPress.com and the REST API was merged into WordPress core.

In this post, I’ll take a quick look at WordPress’ JavaScript future and then run through my top resources for learning JavaScript.

JavaScript Is the Future of WordPress

It’s been building as a hot WordPress topic for at least the last two years, but the jury is now very much in: JavaScript and the WordPress REST API are going to be at the heart of the platform’s long-term future.

The unveiling of the Calypso interface on WordPress.com (powered by a mixture of React and Node.js) is a clear indication that there’s a new sheriff in town. The arrival of the REST API means developers can effectively sidestep PHP and legacy code concerns and shift front-end development entirely over to JavaScript.

After years of dropping heavy hints in this direction, Matt Mullenweg’s 2015 State of the Word finally put the matter front and center as he explicitly made clear that he sees JavaScript and API-driven interfaces as the future of the platform.

In the course of his address, Mullenweg highlighted a number of JavaScript API-driven projects such as Nomadbase.io, StoryCorps, and Automattic’s own Calypso. We can expect these types of projects will be the tip of the iceberg in terms of future JavaScript integration after the REST API officially moved into core last week.

As Ghost developer John O’Nolan pointed out in an opinion piece on the launch of Calypso, we’re at an inflection point that marks both a shift towards a new dominant programming language for the platform and a potentially decisive break with the past:

“I’ll throw my (optimistic) hat into the ring and say that WordPress 5.0 will be entirely, or almost entirely written in JavaScript. The impending separation of client and server with an API will solve a lot of backwards compatibility baggage. It’s important to point out, however, that Calypso is the single biggest vote of no-confidence in the existing WordPress architecture in the history of the platform. This comes after years of Matt saying ‘If you think WordPress doesn’t scale, just take a look at the 12 million sites we power with WordPress.com – or major news websites like Mashable.'” John O’Nolan

Before we get cracking with our list of resources for upping your JavaScript game, we should probably address the issue of what all this means for primarily PHP-based WordPress developers.

Is now the time to hit the big red panic button?

PHP Will Continue to Power Things Under the Hood (Short-Term)

If you’re currently mostly making your living as a WordPress PHP developer, these could be slightly alarming times. We’re not quite at the point where you should be reaching for the rip cord, but it’s definitely an opportune moment to start widening your skills.

That said, having PHP as its core language has played a major role in WordPress’ success over the years, particularly in regards to self-hosted installs. With the largest install base on the web, it’s going to take quite a while to steer that ship in another direction.

The WordPress core team is also continuously improving PHP coding and security standards across the platform, and the imminent arrival of PHP7 promises some long overdue speed and performance improvements across the board.

PHP 7 benchmarks
PHP 7 promises to bring significant speed increases to WordPress.

Rather than PHP being ditched in the short-term, what’s far more likely to happen is that the REST API will increasingly make the language of WordPress core largely irrelevant. Allied to that, more and more of what we’ve traditionally thought of as plugin and theme development will slowly move to JavaScript.

So, to cut a long story short, these are both challenging and exciting times for WordPress developers. We’re still at the very beginning of this next stage of the platform, but one thing is increasingly clear – ignorance of JavaScript is an increasingly risky strategy to employ.

With that in mind, let’s crack on with our list of resources for quickly getting up to speed with JavaScript. Tackling a new programming language isn’t the sort of task you’re going to knock out over the course of a weekend so we’ve split our picks out across a number of core categories to lend some overall structure to your learning and give you a clear path to follow.

Start with a Solid Grasp of JavaScript Fundamentals

There’s more than one way to skin a cat when it comes to diving into a new language. While there’s a lot to be said for exploratory poking around and learning by doing, it’s hard to beat some sort of structured learning track for optimizing your time. Our first four resources are aimed at providing exactly that.

  • 1. Eloquent JavaScript

    Now into its second edition, Eloquent JavaScript by Marijn Haverbeke is free to read online and can also be purchased on Amazon as both Kindle and paperback. It’s a highly approachable, top-to-bottom overview of the language split out into three main parts: language syntax, dealing with the browser, and working with Node.

    Eloquent JavaScript's platform game won't be winning any graphic design awards, but it gets you into the heart of the language quickly.
    Eloquent JavaScript’s platform game won’t be winning any graphic design awards, but it gets you into the heart of the language quickly.

    You can follow along in the browser as you study via nicely integrated live code samples that you’re free to tinker with and explore.

    Five project chapters are also included where you can get your hands dirty by building small projects such as an AI simulation, a fun and colorful platform game, and a dynamic website.

    If you’re brand new to JavaScript and programming, or have been put off by previously failed attempts to get to grips with its basics, this is an excellent primer that will get you through most major parts of the language in a concise, well-structured manner.

    Interested in 1. Eloquent JavaScript?

  • 2. How to Learn JavaScript Properly

    How to Learn JavaScript Properly is an opinionated learning path from Richard Bovell split out across two different paths for beginners and experienced developers. Both tracks take a different approach from Eloquent JavaScript in that they are a structured collection of links to external resources rather than a self-contained, standalone course.

    Given the amount of excellent JavaScript resources online, this is a smart approach to take. Both the beginner and developer tracks present a well-selected learning path split out across a six to eight-week timeline and include sample projects to tackle along the way.

    Rather than simply throwing a wall of books and websites at the student, the course cherry picks specific elements of existing titles and courses. It also points out useful ancillary material for beginners to tackle prior to getting started such as Code Academy’s Web Fundamentals track.

    Whether you’re a beginner or an experienced developer, How to Learn JavaScript Properly will give you a solid grasp of the fundamentals of the language and move you through an otherwise potentially bewildering range of source material quickly and effectively.

    JavaScript Learning Tracks
    A range of JavaScript learning tracks from leading developers is available online.

    If you’re a fan of the opinionated learning track approach, you can find a complete list of alternative options at JavaScript Learning Tracks including offerings from developers such as Derek Sivers and Addy Osmani.

    Interested in 2. How to Learn JavaScript Properly?

  • 3. JavaScript the Right Way

    The idea of JavaScript the Right Way will be familiar to many PHP developers from a similar effort in PHP the Right Way. In this case, it’s a nicely executed one-pager that manages to pack a huge amount of useful information into a tight space.

    If you’re a relatively experienced developer, this is a great jumping off point for quickly getting a grip on what constitutes a lot of current JavaScript best practice and gives you plenty of avenues for further exploration. The section on who to follow, for example, is a particularly useful introduction to some of the leading voices in the JavaScript community generally.

    Interested in 3. JavaScript the Right Way?

  • 4. JavaScript: The Definitive Guide

    A simple Google search or trip to Stack Overflow is enough to solve all manner of programming conundrums these days, but there’s still an awful lot to be said for having a definitive reference guide to hand – whether you’re approaching a language for the first time or an expert user.

    O’Reilly titles have been a godsend for developers for decades now and if you’re going to splash out on one JavaScript reference book, it might as well be David Flanagan’s JavaScript: The Definitive Guide. It’s not exactly a rip-roaring yarn in terms of sequential reading, but as a bulletproof reference it’s hard to beat.

    Interested in 4. JavaScript: The Definitive Guide?

Fine-tune Your Development Environment

As your JavaScript skills grow steadily sharper, you’ll naturally start turning more and more of your attention towards fine-tuning your local development environment to avoid repeating yourself and keep things ship-shape as you code.

There are a huge number of options available in this regard in JavaScript and, as with any programming language, more than a few fiercely held opinions about what is the best tool for a particular job. With JavaScript’s current popularity, new tools are also appearing every day.

With that in mind, some of the points in this section will be necessarily general and you may well find other options more suited to your particular workflow as you explore on your own. The options below should, however, get you off to a solid start.

  • 5. WebStorm Text Editor

    The choice of text editor is always a potentially contentious one among programmers.

    If you’ve already hitched your wagon to a classic such as Emacs or Vim, you’ll find ample support in both for efficiently working with JavaScript syntax. If you’re used to using Sublime Text, a range of plugins targeted at JavaScript developers is also available. Many WordPress developers will be familiar with JetBrain’s PhpStorm which can also be used to crank out JavaScript code with ease.

    If you really want to get down to work with an IDE that’s optimized for JavaScript out of the gate, JetBrain’s WebStorm may well be the one to go for. It’s got first-class support for JavaScript, Node, HTML and CSS, along with a slew of built-in debugging, version control, and task runner tools.

    Regardless of which text editor you plump for in the end, the point is that it’s well worth your while mastering its basics in terms of general code wrangling, and honing in on JavaScript-specific features if available.

    Interested in 5. WebStorm Text Editor?

  • 6. jsFiddle

    It’s incredibly useful to have a pen and paper to hand when you’re coding in order to quickly sketch out a concept or get something out of your head. In a similar way, jsFiddle enables you to instantly create, test and share small pieces of JavaScript, HTML, and CSS in a browser.

    To get up and running, consult the easy to follow introductory tutorial in the jsFiddle documentation or check out the video below.

    If, for some reason, jsFiddle doesn’t float your boat, there are a number of similar alternatives available to experiment with online including CodePen and JS Bin.

  • 7. Chrome Dev Tools

    Debugging in JavaScript is a notoriously tricky affair. In addition to leaning on whatever tools your IDE makes available, you should also get familiar with using native browser tools to help work out what’s actually going on with your code as you learn.

    There are debugging tools available for Firefox, Safari, and IE, but one of the best places to start is with Chrome Dev Tools.

    Google have an excellent walkthrough of debugging JavaScript to explore further and Addi Osmani’s What’s New in Chrome Dev Tools is also a highly informative overview.

    Interested in 7. Chrome Dev Tools?

  • 8. Wider JavaScript Tooling Resources

    We’ve covered some fairly general purpose tools so far, but modern JavaScript development workflow relies on an increasingly large range of tools specific to the language.

    This is a fluid and potentially hair-raisingly complicated area if you are still getting to grips with the language so treat this section as an introductory overview to wet your whistle, rather than a set of prescriptions for what you should be using.

    Let’s Code JavaScript have a comprehensive – if slightly terrifying – survey of many of the current options deployed by JavaScript developers. Marcin Grzywaczewski’s overview of modern JavaScript tooling tackles much of the same material in a substantially more accessible manner. You’ll find clearly written introductions here to tools such as Gulp, Grunt, Bower, and Mocha to help you start exploring further.

    Going too far into any of the tools mentioned here is potentially confusing and you’ll hit most of them naturally if following one of the language learning tracks we mentioned up top. If you’re looking for a gentle introduction to tools such as Yoeman and Jasmine, Dan Wellman’s Pro Front End Workflows course on Envato is worth a look.

    Many of the tools you’ll run across above rely, one way or the other, on the presence of Node and that’s where we’ll turn our attention to next.

    Interested in 8. Wider JavaScript Tooling Resources?

Discover the Power of Node

It’s hard to get too far into modern JavaScript development without hitting Node.js.

Invented in 2009, Node enables you to run JavaScript on the server – locally or remotely – putting the language on the same footing as Ruby, Python or PHP in that respect. The emergence of Node, along with the Node Package Manager (npm) has driven a huge increase in JavaScript’s popularity over the past five years.

As with our section on tooling, there’s a risk of overwhelm when going to too far into the woods here so we’ll stick to some solid introductory resources to point you in the right direction. If you need more convincing about whether it’s worth getting to grips with Node, a quick glance at the web giants currently deploying it should be enough to whet your appetite.

  • 9. Learn Code Academy's Node Tutorials

    Learn Code Academy is an excellent YouTube-based learning resource that’s well worth consulting on all manner of front end topics.

    Their set of Node tutorials are particularly useful and will take you through everything from an introduction for those who are completely new to the language up to managing complex deployment scenarios and performance tuning.

    The introductory video below is a good one for PHP developers to start wrapping their heads around Node as it specifically addresses viewers coming from that background.

    Interested in 9. Learn Code Academy's Node Tutorials?

  • 10. Microsoft's Building Apps with Node.js Jump Start

    Proving that Node is very much making waves at an enterprise level, Microsoft’s overview of building Node-based apps is an excellent introduction for developers whether they’re on Windows or not.

    Broken out into a series of well-structured modules, this series takes you through the basics of Node, introduces npm and the Express web framework, and builds all the way up through building a full Node-based app and deploying on Azure.

    Interested in 10. Microsoft's Building Apps with Node.js Jump Start?

A Quick Word about Frameworks

Developers are naturally averse to unnecessarily repeating themselves and, at some stage in your JavaScript education, you’re going to come across the ever-changing world of JavaScript frameworks. There’s a pretty bewildering array of competing frameworks out there with new ones arriving seemingly every month.

Rather than point you in the direction of specific learning resources when it comes to JavaScript frameworks, we’ll simply draw your attention to three leading candidates which are likely to stick around for the long haul:

  1. Backbone: Backbone is the grand old man of JavaScript frameworks and already bundled into WordPress core so it makes an interesting option for WordPress developers to cut their teeth on.
  2. AngularJS: As a Google project, you can be reasonably sure that AngularJS won’t be disappearing anytime soon and people are already experimenting with WordPress REST API integrations.
  3. React/Relay: Though it’s more library than framework, Automattic’s decision to use React on their Calypso project could be an indication of which way the wind is blowing with WordPress/JavaScript integrations. A fully-fledged React-based framework called Relay has recently dropped and is worth keeping an eye on.

Keeping up to Speed with the Community

As you can probably tell from what we’ve covered so far, half the battle with getting to grips with JavaScript is simply keeping track of latest developments. With that in mind, we’ll close out our list with a mix of two podcasts and the one email list you can use to stay up to speed.

  • 11. JavaScript Jabber

    In the same vein as the Ruby Rogues podcast – and featuring some of the same personnel – JavaScript Jabber is a long-running, entertaining, panel-based look at all aspects of JavaScript development.

    With a huge archive of episodes available, you can expect to find episodes covering everything from the subject of online learning generally to the future of JavaScript as a language.

    Interested in 11. JavaScript Jabber?

  • 12. JavaScript Weekly

    Scouring the internet for interesting JavaScript articles is a diverting way of passing a few hours, but hardly the most effective use of a developer’s time.

    JavaScript Weekly from Peter Cooper saves you a lot of unnecessary legwork by bringing a curated list of the best JavaScript news and articles straight to your inbox every Friday.

    Interested in 12. JavaScript Weekly?

  • 13. The Changelog

    Showcased on the excellent 5by5 network, The Changelog is a regular podcast focused on latest developments in the open source community.

    With the explosion of open source JavaScript projects in the last five years, it’s an incredibly convenient way of keeping in touch with what’s coming down the pipeline in terms of JavaScript while staying abreast of wider developmental topics.

    Interested in 13. The Changelog?

A Working Knowledge of JavaScript

Whether you’re a WordPress developer or not, a working knowledge of JavaScript is likely to be a requirement sooner rather than later if you’re creating any kind of front-end online experience.

The current level of JavaScript integration in WordPress offers PHP developers an excellent opportunity to level up your skills and get on board the JavaScript bandwagon at an early stage.

Here’s a quick recap of my five-stage roadmap to success with JavaScript:

  1. Pick a solid JavaScript fundamentals learning track
  2. Start fine-tuning your JavaScript tooling
  3. Get familiar with Node
  4. Start exploring JavaScript frameworks
  5. Stay up to speed with developments in the wider community

I’d love to hear how you’re planning on approaching sharpening your JavaScript skills for the future. Are there any resources we’ve missed above? Get in touch via the comments below and let us know.