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
The post JavaScript Libraries and WordPress: What You Need to Know appeared first on Elegant Themes Blog.