JavaScript is about to enter the WordPress world in a big way. WordPress theme and plugin developers have always used JavaScript, of course — it’s an essential part of the web developer’s toolbox. But with the introduction of a JSON REST API and Matt Mullenweg’s suggestion that WordPress developers should learn Javascript (deeply), we’re likely to see a huge number of theme and plugin developers taking advantage of JavaScript to build new and exciting integrations with WordPress — the WordPress Mac App is just the start of what’s possible.
Many of the developers who take advantage of the ability to create front-end applications for WordPress, including themes, will build their projects using a JavaScript framework. JavaScript frameworks come in all shapes and sizes, from full Model-View-Controller frameworks that can power single-page web apps of significant complexity, to simpler helper libraries that make it easier to manage and display data on the client.
I’d like to quickly introduce three of the most prominent JavaScript frameworks and provide examples of how innovative developers are using them to build WordPress integrations using the REST API.
Angular
Angular is the big beast in the JavaScript framework world. It’s a full-powered MVC framework sponsored by Google and used on many of Google’s sites as well as a lot of other large-scale enterprise sites. Angular is a great choice for building single-page web applications, and while there’s nothing stopping you using it for WordPress themes and integrations, it might be overkill if all you want to do is pull data from the WordPress API to populate pages. Angular also has the steepest learning curve of any of the frameworks we’re looking at today.
Yoren Chang has written a useful guide to the basics of using Angular in WordPress theme development, and a set of more in-depth articles about Angular and the WordPress API.
React
React, which was created by Facebook, is a much simpler project than Angular. It’s been described as the V in MVC and is essentially concerned with managing the display of data on the front-end and building interactive user interfaces. Whether you think of that as a good thing depends on the complexity of the application you want to build on top of WordPress and whether you’d rather do server or client-side rendering.
For simpler integrations with the REST API, React is probably a better choice than Angular. React is particularly notable for its use of the Virtual DOM — changes made to the view are made to a Virtual DOM and the actual DOM is only updated once those changes are completed. The result is a fast and fluid user experience.
Take a look at the React homepage for some examples of React code. Kelly Dwan has created a simple WordPress recipe theme using React, the GitHub repo of which is a great way to learn about how React can be used with the WordPress API.
Backbone
Backbone is a full MVC framework, but it’s both smaller and less complex than Angular. Backbone doesn’t have the buzz of the other solutions I’ve discussed, but it’s has been used on some serious online services, including Twitter, Pinterest, and Disqus.
For developers who want to dip a toe into building JavaScript integrations, Backbone is worth looking at because there’s already a Backbone client for the REST API, and there is a version of the Underscore WordPress starter theme that has Backbone integrated with it. Reading _s_backbone’s code is a useful way to learn how to use the WordPress API and Backbone to implement common theme features like infinite scrolling and navigations menus.
I’ve just looked at three examples of JavaScript frameworks here. There are many more that could be used to build Javascript-based themes and applications for WordPress, but hopefully the pointers I’ve given you here are a good place to start.
