WordPress developers are officially supposed to learn JavaScript. Not only because it’s homework from Matt: also because the REST API is chugging along in Core, and now we can do everything from build much smoother plugin interfaces to use WordPress as the backend for web and mobile apps. But we need JavaScript to do it.
It’s JavaScript Framework Time
To be a bit more specific, we need a JavaScript framework: an organized body of code written by a very smart group of people that lets us do amazing things with JavaScript if we follow its rules.
If you’re relatively new to JavaScript, as I am, jQuery may be the closest thing to a JavaScript framework that you’ve used. Although jQuery is actually a library, not a framework, it does give a similar sense of “JavaScript plus superpowers.” If you are more seasoned in JavaScript, you’ll already be decently familiar with the more popular of the literally hundreds of JavaScript frameworks out there: Names like Angular, Ember, React, Vue, and Backbone.
JavaScript frameworks are most important for developing applications—web properties built on a greater degree of interactivity than more static websites. JavaScript frameworks are behind both relatively simple apps like Every Timezone and giant apps like SoundCloud, and handle everything from routing between pieces of the application to refreshing views when the underlying data changes.
Now here’s the next question: Which JavaScript framework is best for someone just getting fully into JavaScript? Let me point out two tricky properties of the JavaScript ecosystem:
- It’s enormous and atomized, with dozens of suggested technologies (from task runners to package managers to transpilers) working to complement any framework choice
- It’s incredibly frothy, with frameworks rising and falling on a timescale of months
The remainder of this article will narrate why, for me—a not-especially-JS-savvy WordPress developer working to stay educated—ReactJS was the best JavaScript framework to move forward with, and why I’m happy with my choice.
What ReactJS Is
ReactJS is a framework for building user interfaces, built by Facebook initially for internal use on Facebook and Instagram, and later open-sourced.
React grew quickly in popularity, and by 2016 it was probably at the top of the JavaScript hotness heap. That may no longer be true (no one stays there for long), but it’s still healthy and very much under active development.
Just the View By Default (and Why That’s a Good Thing)
By default, React only handles displaying data. That could make it perfect for WordPress developers, who can often use WordPress itself as the backend.
Unlike other frameworks, React by default only displays data. It doesn’t store your data for you, or give you immediately built-in ways for the underlying data that’s driving your application to be changed or updated. For example, in a recipe application, React could easily display a list of recipes that it was given, perhaps as a REST API endpoint; but it wouldn’t natively, all by itself, have a place where you store the data for that list, nor would it have the machinery for a “My Account” page with a bunch of saved and starred recipes.
In other words, React by default is only the View layer in the Model-View-Controller (or MVC, or MV*) system that defines most JavaScript frameworks.
In my experience, this makes React relatively easy to learn, because you’re just learning a new way to cause data to show up in the browser, without a lot of other immediate baggage from a system which is concerned with structuring and manipulating underlying data.
This also makes React potentially perfect for a WordPress developer, since on a lot of projects we bring our choice of backend—WordPress itself, serving data through REST API endpoints—along with us.
Also, with other tools that I don’t understand yet, in particular Redux, React can have much fuller state (data) modeling and manipulation. So React, with some immediately adjacent tools, really can be a full-fledged framework; it can be more than a View layer, but it doesn’t have to be.
What Makes ReactJS Attractive
Now that we’ve said a bit about what ReactJS is, let’s talk about why it’s attractive—especially for what I believe is the pretty common profile of “well-meaning developer based in another technology.”
1. ReactJS is Large, Popular, and Stable
If you’re looking for a technology with good documentation that isn’t going to vanish in six months, ReactJS has an awful lot of things going for it:
React is Stably Maintained by Facebook.
React will live as long as Facebook cares to support it, which will be quite a while.
Other JavaScript frameworks can die or change dramatically because of the whims of their developer communities—open-source communities like WordPress, but with a much shorter attention span.
As a case in point: I considered learning AngularJS, but Angular 2 is out and is vastly different from Angular 1 because of a huge number of improvements that also represent breaking changes. This makes it just about impossible to jump in and learn Angular, because it means that the oldest and best-vetted documentation for Angular—Stack Overflow posts, video tutorials, and so on—will all be wrong because they’re referring to an old flavor of Angular. I’m also not eager to invest in something that wishes me to relearn everything every two years, as well-intentioned as the breaking changes may be.
React, by contrast, is stably piloted by Facebook, and this corporate sponsorship means that React will be supported as long as Facebook cares to do so—which is, on average, going to be a lot longer than how long a group of volunteers will be able to actively develop their own framework idea, especially as that idea slides off the top of the hype heap.
React’s Documentation is Very Good.
React is in a lovely part of its lifecycle where it’s been both very hot and also around for a bit. As a result, I’ve never had a question in React whose answer I couldn’t readily find through a Google search. The main documentation from Facebook themselves is outstanding, as well—which, again, I feel speaks to the good health that emanates partly from its sponsorship by an ungodly-rich corporation.
As an illustration, I would consider learning VueJS, the possibly-hottest-JS-tool-right-now, but I’m worried the documentation won’t hold up, and this is borne out even in highly complementary reviews: “Unfortunately, there are nowhere near the resources available [for Vue] as there are for React, Angular, Ember, Elm, Backbone… you get the point.”
2. ReactJS is Pretty Simple to Learn
Ultra-basic ReactJS feels like it largely revolves around three main concepts:
state
,props
, and therender()
function.
I learned ultra-basic React in the course of writing a WPShout article on the topic—meaning not more than a few hours of frustration.
The biggest early frustrations, in my experience, are to manually include all the JavaScript files that the article lists. I didn’t understand exactly what Babel was doing, and thought the other .js
files besides the main react.js
were optional. Not so.
Once you’re there, though, you’re left with probably three main concepts: state
, props
, and the render()
function. There are outstanding demos that explain each one, and once you get the idea that “state should be in the highest-level components and flow down into lower-level components as props,” the whole thing makes a lovely amount of sense.
Contrast this to Angular (I guess specifically 1)’s famous “hockey stick” of difficulty once you get into the topic of two-way data binding, and I’ll argue that React has a more gentle and less I-quit difficulty curve than many of the primary alternatives.
And, of course, there’s always more to learn before I actually know what I’m doing. Fortunately, it’s all in the form of independent components, like Redux. Once I want to manage state more intelligently, I’ll be able to learn Redux; it’s not something I have to learn to be able to do anything at all, the way the many core concepts of a larger framework would be.
2. ReactJS Lets You Build Native iOS and Android Apps(!) with React Native
Crazily enough, ReactJS is also your route into becoming a mobile app developer, through React Native.
I’ve saved the absolutely craziest part for last: ReactJS is also your route into becoming a literal mobile app developer, with React Native.
I’ve verified this myself: I have an Android app, on my phone, that I wrote in a few hours through React. I’m going to build the iPhone version—using almost the exact same ReactJS code—as soon as I can delete enough space off my girlfriend’s Mac to download the iOS SDK.
On that topic: as a piece of advice, don’t attempt to use React Native on a Windows machine. The setup steps are hideously frustrating, and you can’t develop iOS app on PCs thanks to a bit of lock-in by Apple. This would be a great time to treat yourself to a Mac.
Obviously, “this-to-that” software projects always sound a little suspicious, but React Native isn’t some sort of fragile hack: it’s a fully functioning alternative to developing mobile apps directly in Java and Swift, used happily by big-time folks like SoundCloud.
This is opening up an entire new world to me: WordPress websites as data stores, with mobile apps that consume that data into an intimate and accessible user experience. Only a few of my clients will get value from this, but I’ve already spoken to two of them since starting to learn React Native. (“When you’re a hammer…”)
And, again, I’ve only spent maybe a total of ten or twenty hours being stuck or confused—contrasted to the maybe 150 hours I spent in that state trying to learn Java-based Android development a couple of years ago.
React, Quickly!
I don’t argue that React is the best JavaScript framework for everyone, but if you’re in a similar boat as me, and the considerations I’ve outlined seem persuasive to you, I really strongly recommend it as the JavaScript tool you put the effort into learning.
Thanks for reading!
I always keep an eye on JavaScript frameworks. I’ve tried AngularJS and Vue and love the syntax. I want to try React, but the weird JSX syntax makes me stop.