Want to Learn JavaScript Deeply? Choose the Right Framework for You

Last year, Matt Mullenweg encouraged developers to “Learn JavaScript deeply.” He said, and I agree that future of WordPress will use JavaScript-driven interfaces powered by the WordPress REST API. Using JavaScript in conjunction with the REST API makes for a great experience for both the developer and end user, which is why every WordPress developer should have some understanding of JavaScript.

For this vision to be a reality, that can’t just apply to WordPress core. Plugins and themes will need to deliver a similar experience. A great JavaScript framework is the fastest and most scalable way to deliver that in your plugin or theme.

That said, choosing the right framework to use isn’t easy. Recently Roy Sivan and I published a free mini-course on this subject. You can watch all 4 videos in the series, for free, but I wanted to dive into some of the most popular options here.

Comparing The Major Options

There are a lot of JavaScript frameworks, and new ones popping up every day. Every time I see a new one I can’t resist the urge to try it out.

A good JavaScript framework combines a ton of stuff you could do yourself, into one system that works to take care of all kinds of things like DOM manipulation, AJAX requests, event handling and more with a simple API. Again, you could do all of that yourself, but a good JavaScript framework makes this so much easier, reduces code duplication and offloads the maintenance of much of your code to a larger community of developers, often with major corporate backing.

Bottom line, you’re going to want to use a framework, but they’re not all created equal. Here are a few quick thoughts on the pros and cons of the major options.

Backbone

I have mixed feelings about Backbone. On one hand, it’s included in WordPress, and ships with a Backbone client for the WordPress REST API. At the same time, Backbone is the least magical and oldest of the options I’m discussing here. I have limited experience with it, but I’ve always felt like it wasn’t worth the effort versus DIYing it.

Backbone is the oldest and most stable of the options. That is good and bad. It’s a bit frozen in time, but it works and isn’t changing much. It’s not very modern, but it works and doesn’t change fast, kind of like WordPress. Not changing fast is something that you might want after a bit of time in the fast moving React or Angular ecosystem.

Angular

I have a real soft-spot for Angular 1 (NG1) which was the first JavaScript framework I really understood. It helped me learn a lot about JavaScript and programming in general. For example, I love how it uses a service to provide reusable sources of data to other components, an excellent design principle.

Also, I love that NG1 uses HTML for views. HTML is a great way to write HTML — as opposed to say JSX in React. That said, all of the data attributes you use in an NG1 template can get out of hand real quickly.

NG1 is a great way to get started with a JavaScript framework and I’ll probably keep using it for some things. I haven’t had time to check out Angular 2 yet because it has more than I need and the docs are written in TypeScript, which I don’t know. That said, it would be worth checking out if you’re a fan of the original.

Also, Angular 4 came out in March. To be honest, I can’t keep up at this point. I don’t have time to live and breath the latest JavaScript bleeding edge.

React

React is developed by Facebook, and is also used by Automattic extensively on WordPress.com and Jetpack. While Backbone is the only JavaScript framework included in WordPress, I expect it will be included soon. The new editor prototype that is currently under development using React. So while I may not be a fan, anyone wanting to contribute to WordPress should learn it.

React is not the only reactive framework out there, but it’s the most popular. Reactive frameworks are very comfortable for WordPress developers because of the events that the application life cycle emits that you can bind events to. Very much like WordPress hooks.

React is also very, very modular, designed for creating reusable modules you can tie together to create an application. I don’t love that the view is created using JavaScript, JSX specifically, and this is why I don’t use it, along with the fact that the setup and a number of dependencies feel like way too much for my needs as a humble WordPress plugin developer.

I’m getting ready to give ReactJS another shot myself. At LoopConf this year, Adam White gave a great talk about the REST API and showed a simple journal app he built in ReactJS. You can watch the talk and read the code, but when I saw it, I wanted to give React another shot. I love the way components are self-contained, yet reusable units.

VueJS

In Caldera Forms, we recently released a front-end entry viewer feature, powered by VueJS. I love VueJS. It’s a reactive framework, so it provides all of the benefits you want, but it’s also very simple. React is probably the most opinionated framework, and good for you if you agree, while VueJS is the polite and accommodating framework.

Because of its simplicity, you may only need one very small file. This can be good or bad, depending on your use. While VueJS has an official package for HTTP, I tend to use jQuery AJAX because it’s always on the page in a WordPress site anyway. VueJS has packages for a router but recommends others to try. I do like their router for how well it integrates with Vue components. VueJS has a package for state management, but you can use Redux if you wish.

I hope you’re seeing the pattern. React is opinionated, so am I and I don’t agree with React’s opinions. VueJS lets me impose my own opinions.

Also, VueJS’s templates are HTML. The syntax is like a reigned-in version of NG1’s template syntax. Of course, they have a thing like JSX, because that is sometimes needed, but for the most part, HTML templates are all you need.

I’ve been building more and more with VueJS and while it’s making me tempted to try React, I am super happy with it. I am currently working on an app that uses VueJS for the UI, with everything organized into single file components, and the developer experience it great.

I know enough to understand why React or Angular is probably better, but as someone who isn’t living and breathing JavaScript full time, VueJS is the perfect balance of approachable and powerful.

Which JavaScript Framework Is The Best Choice For WordPress?

Personally, I used to be very satisfied with Angular 1. But, the framework is showing its age and I’ve found myself more drawn to reactive frameworks over time. After looking at React, Preact, JSView, and VueJS, I started to use VueJS more and more. I love how lightweight VueJS is and how fast it is to learn and get started with. I still like using Angular 1, but moving forward I will probably use more VueJS. We use it for the front-end entry viewer in Caldera Forms and it probably will be used in future version of our admin form builder.

I invite you to watch our video series from Caldera Learn where we discuss our preferences and opinions. I’d love to hear your thoughts on which framework is best or if you like one that I didn’t cover here. Please leave a comment and let me know what you think.

Josh is a WordPress developer and educator. He is Founder/ Lead Developer/ Space Astronaut Grade 3 for Caldera Labs, makers of awesome WordPress tools including Caldera Forms — a drag and drop, responsive WordPress form builder. He teaches WordPress development at Caldera Learn.