I’ve said it before, and I’ll say it again: if you’re a WordPress user, you need to become familiar with JavaScript. That’s just the way of the web. The real issue, then, is the disturbing number of JavaScript libraries you have to sort through.
There’s Ember, React, Angular. Vue and Preact. And don’t forget about Ionic, Express, or Node. jQuery, Meteor, and Bootstrap deserve a mention, too. Oh, and what about…
You get my point. (And those are just the ones I could name off the top of my head without opening up a new tab.) JavaScript libraries litter the landscape because they’re pretty much essential for development.
Whether you want DOM manipulation, an MVC framework, AJAX calls, or something else entirely, there’s is likely a library out there you can pull from to help you on your way.
As a WordPress user, that should be music to your ears, and here’s why.
Just What are JavaScript Libraries, Anyway?
Simple: a buncha prewritten code. Nothing fancy. You can do a bunch of fancy stuff with them, though. Which is why they’re awesome.
By using prewritten code and pulling it into your website, you’re able to add functionality that saves you time, but also probably fills in gaps in your expertise. You’re good at what you do, sure, but you’re a WordPress developer–not a JavaScript dev.
That’s okay.
When you’re using JavaScript libraries with WordPress, you’re using other people’s expertise to enhance your site and your users’ experiences.
First Things First
As a WordPress user, you have access to a bunch of JavaScript libraries and their dependencies already in Core. Check out the Codex for a full list and how to use wp_enqueue_script with built-in and external JS.
JavaScript Libraries…What Are They Good For?
A lot of folks get confused when talking about JavaScript libraries because they’re often mislabeled as JavaScript frameworks, which are different. A framework is a kind of library, but functions a bit differently than most.
Frameworks are what you use to build a full-scale application or website. In essence, the JS frameworks serve the same function as WordPress itself–providing the backbone of whatever project you’re working on. They are far more structured in terms of use than non-framework libraries.
Frameworks can be broken down into a few categories: front-end frameworks, back-end frameworks, and full-stack frameworks. If you’re not familiar with the terms, front-end is what the user interacts with, back-end is what deals with server-side issues, and full-stack handles both the front-and-back ends.
You’ve probably heard of a few of the most common/popular frameworks:
How Does All This Play into WordPress?
Some of those libraries don’t. Which is the whole point I want to make: you don’t need a back-end framework (and in that vein, a full-stack framework) if you’re working with WordPress. Our delightful Core already handles that level of structure for us. (Note that is a moot point if you’re a dev who is specifcally contributing to Core and/or doing a ton of customization on your own.)
What you do need to learn to use (or at least understand) are the front-end frameworks and DOM manipulation libraries. These come into play far more often than any other kind of JavaScript libraries.
PHP is an awesome language. It gave us WP as we know it today, and it works really well to put all kinds of logic and functionality in the users’ hands. But JavaScript libraries take the power and increase it exponentially.
Certain plugins like NinjaForms, while written in PHP–because WordPress says so–use JavaScript libraries to give the user a better experience and far more functionality than otherwise possible. WPNinjas used the Backbone and Marionette libraries to accomplish this.
Heck, even here at Elegant Themes, Divi 3.0 (which is awesome and you should totally join up to use on all your sites) is written in React.
So is the upcoming Gutenberg editor (for the moment, at least), and the WordPress.com admin panel called Calypso (as well as Jetpack.) Heck, pretty much everything you do in the .org dashboard is powered by JavaScript until something changes on the server and needs to be saved.
But even that may be changing soon…thanks to the WP REST API.
WP REST API + JavaScript Libraries = BFF
You’ve probably heard of the WP REST API by now. In a nutshell, it is breathing a ton of life into WordPress JavaScript development because you don’t have to make server requests via JavaScript instead of relying on PHP.
Yep, you can now directly access the back-end of your site from the front without having to muddle through PHP, slowing down response time and limiting functionality. WPMU has an breakdown of using the REST API you should check out, too.
You can do so much with JS and REST that it’s almost scary to think about. When you’re using React (and specifically React Native), you can use the WordPress database as a back-end for your mobile app without ever touching PHP. You can directly interact with MySQL through JSON via the REST API.
In a way, this interaction makes WordPress work a lot like the back-end JavaScript frameworks we talk about above, providing the structure of the application and database management without any of the intermediary PHP. It’s nothing new for WP to work like this–that’s what a CMS does, after all–but the implementation and integration with JavaScript libraries and JSON are
While React Native is specifically able to do that for mobile apps, you can also use any front-end framework or library to do the same thing–Vue.js and Ember and normal old React (or Preact, if ya nasty).
And if you’re really nasty, you can take one of these libraries, make your site, and use just enough Swift of Java to wrap it in a web view and throw it up on an App Store thanks to the REST API. It’s a bit ugly, but it should work.
The Future of WordPress
Matt said last year that all WordPress developers should “learn JavaScript, deeply“.
It’s time we all listened, I think. Honestly, it doesn’t matter which JavaScript library or libraries you choose to learn first. Once you’re familiar with how one or two work and interact with WordPress, you’re well on your way to being a part of the JS ecosystem and, in turn, the future of WP.
Whether you want to make an awesome client-experience for your plugin like Divi or Ninja Forms, a great web app where your users need quick and smooth updates, or a mobile app that just uses WordPress as its back-end database, there are JavaScript libraries out there for it.
Article thumbnail by Creative Thoughts / shutterstock.com
This discussion is awesome!
I found that Vue.js is the easiest framework to start with.
“which is awesome and you should totally join up to use on all your sites”
Would love to, but can’t as I don’t have a credit card and you don’t accept PayPal payments due to VAT-related reasons.
Also… will there be a series of posts showing what’s possible with JS libraries, or is this (“JS libraries are awesome and you should use them. Now go Google and figure it out yourself”) it?
Can we use WP REST API to access our custom tables?
What is the right way today of creating custom tables and accessing them when using WordPress with the Divi theme?
Thanks!
Good read.
Programming in Javascript is painful, to say the least. Too easy to make mistakes that are difficult to find at times. Libraries are not that easy to use, either. I thought that WordPress was a content manager that was supposed to keep one away from actual coding. Sure, that’s rather limiting, but more and more effort should be applied to minimize the need for actual programming in Javascript or PHP for the majority of WordPress users.
Excellent post and very juicy information, surely JavaScript is the way, thanks B.J.
greetings from Asturias
Well done sir! This article lays it out perfectly. However, I definitely think a side note worth mentioning is that the React library was developed by Facebook and there was recently a patent clause issue. As a result Gutenberg almost abandoned React for a different library causing Facebook to cave. It was a big victory for the WordPress community.
The main reason I didn’t include that was for longevity purposes. Given how the resolution unfolds, the post itself would have outdated information. But thanks for bringing it up in the comments 😀
Please continue with the next part about using java on practical examples, also your recommendtions tool, you recommended more tools (frameworks), anyway geeks needs advice from older brother which tool is good for him. Explain all tools with no expercience may to route to bad decision and choice.
If JAVA is feature, its DIVI future too, so i think, serial of tutorials can lure more customers for DIVI.
Thanks for this post, Roman from Slovakia
JavaScript !== Java
Just to make it more clear – Java and JavaScript are completely different programming languages)
Agree totally with this. Nothing worse than going down the wrong rabbit hole, especially when starting off. If it is wrong, it can leave a bad taste in your mouth, even put you off for life.
I am currently diving into the whole Sage/Trellis/Composer/Vagrant…doing it it in the CLI etc., because a developer in a web development agency insisted to me that this is the way web development should be done. It is all very educational and to be honest I have learned a lot so far, the WP template hierarchy and all that Jazz. But is it all necessary? Can’t I just live life with DIvi and few other simple tools? I will see at some stage but I am sure that I will gain some new nuggets of wisdom along the way.
My point is, as Roman has mentioned above. Some samples would be encouraging, a taster of what can be done.
Please share some links to learn JavaScript.
You can also check out these books, which are fantastic resources: https://www.elegantthemes.com/blog/resources/what-is-the-best-javascript-book-for-complete-newbies
https://github.com/getify/You-Dont-Know-JS
http://javascript.info/
https://learn-anything.xyz/programming/programming-languages/javascript
Thank you!
Great article.
I am just moving that bit more under the hood of WordPress and it looks like all that is mentioned in the article is pertinent to what I will be doing over the next while…a lot of breaking of eggs to make an omelette.
When you mention Swift, you are referring to the Apple kind?
“In a nutshell, it is breathing a ton of life into WordPress JavaScript development because you don’t have to make server requests via JavaScript instead of relying on PHP.”
Should it be because it *lets* you to make requests via JavaScript?
Thank you!
You are totally and completely correct. #sheepish
“learn JavaScript, deeply“ link needs to be fixed 😉
Thanks, fixed!
“you should totally join up to use” too)
Lovely article, thanks for sharing I believe I need to work more on my JS skills.