It’s been a less than a year since Matt Mullenweg confirmed what many in the WordPress world had long been suspecting – JavaScript is at the heart of the platform’s future. The subsequent launch of Calypso on WordPress.com also served to drive the point further home.
Naturally, all of this sparked something of a stampede among developers to finally fully engage with the language’s potential, rather than treating it as something they occasionally have to deal with on the front end. Learning to love the widely used libraries is a major part of the process.
In this piece, we’ll help you jumpstart your learning by stepping through seven essential JavaScript libraries that every developer should be familiar with, and highlight the specific learning opportunities they offer.
Let’s kick things off with a classic!
1. jQuery
First released in 2006, jQuery is very much the grand old man of JavaScript libraries, and remains an essential piece of kit to this day. You’ll find it chugging away under the hood of WordPress itself, and across innumerable other projects that power the modern web. It’s also explicitly backed by some of the biggest names in the business.
From a budding JavaScript developer’s point of view, the promise of jQuery is nicely summed up in its tagline – “write less, do more.” Start diving into it and you’ll get an elegant way of handling the DOM, along with a natural introduction to the wider JavaScript front end ecosystem in the form of jQuery UI, jQuery Mobile, Sizzle, and QUnit.
Tackling JavaScript from scratch these days can be an unnecessarily bewildering experience – virtually nothing will give you a firmer grasp of the basics than really getting comfortable with jQuery. The official jQuery Learning Centre will get you off to a great start, and the Learning jQuery blog has a nice mix of beginner, intermediate, and expert resources to take things further.
2. Numeral.js
Formatting and manipulating numbers is at the heart of a huge amount of day-to-day programming tasks, and the Numeral.js library does an excellent job of making that substantially simpler in JavaScript. Not only does it make life easier for developers who are new to the language, it’s also an admirable example of a library that tackles one problem well. It’s definitely one to add to the toolkit as soon as possible.
3. Retina.js
Continuing our theme of practical libraries with obvious everyday utility, Retina.js is both a front end workhorse and practical way of easing into using JavaScript libraries on personal projects.
We’re living in an increasingly high-definition world these days. Sites of all stripes need to be able to handle retina devices gracefully, while not forcing unnecessarily large images on everyone else – Retina.js gives you an easily understandable way of doing just that.
Taken in the context of Envato’s excellent Essential JS Libraries for Web Design series, it’s also a great way of starting to look at how JavaScript libraries can help you elegantly tackle all manner of UI and layout problems with ease.
4. D3.js
Having gotten numbers firmly under control with Numeral.js, you’ll eventually be looking to do some fancy things with data generally. That’s where D3.js comes in. D3 enables you to create data-driven documents to your heart’s content in a way that’s truly compatible with web standards.
As even a quick look at the project’s list of examples shows, this has a huge range of practical uses across all manner of projects. Start diving into the impressive list of associated tutorials, and you’ll soon be confidently displaying data with just a few lines of code.
5. Backbone
Full-fledged JavaScript frameworks such as Angular and Ember attract a lot of the headlines, but there’s a huge amount to be said for beginning with Backbone when you’re just getting to grips with JavaScript. It’s an easy route into the concept of models and views in JavaScript, supported by great documentation and tutorials, and a great way of starting to explore the power of the REST API in WordPress to boot.
Incredibly comprehensive resources such as Addy Osmani’s, completely free, Developing Backbone.js Applications also make this an excellent library to cut your teeth on before deciding whether you really need that fancy framework all your colleagues are talking about.
6. Chai.js
Testing is a topic that should always be at the front of any responsible developer’s mind, and it’s just as true in JavaScript as it is in any other language – perhaps even more so given the bewildering number of devices and scenarios where it’s deployed. If you’re just starting with the topic and have a few dollars to spare, it’s hard to beat James Shore’s Lets Code: Test-Driven JavaScript series.
As you start getting to grips with frameworks such as Jasmine, QUnit, and Mocha, take a bit of extra time to explore Chai.js – it’s a handy BDD/TDD assertion library that works with all of them. To get a flavor of how it can be used on practical projects, hit up the project’s own guide section, or check out Michael Herman’s in-depth guide to using Chai with Mocha.
7. React
We’ve deliberately left the newest library for last. With its groundbreaking approach to thinking about modern UIs, Facebook’s React library has caught the attention of developers worldwide, the team at Automattic being among them, but it’s not necessarily the easiest programming paradigm to get your head around.
Scotch.io’s intro to the library is an excellent starting point, and Andrew Farmer’s list of tutorial recommendations provides plenty of material for further exploration – Build With React is a particularly notable resource that he identifies.
In terms of integrating React with WordPress, we’ve scratched the surface here on Torque recently, and also recommend Delicious Brains’ tutorial on using React Native with WordPress. Chris Hutchinson’s revamping of Twenty Sixteen as a React app is also well worth a look in this regard, as is his background blog post on the subject.
Conclusion
There are few things dearer to a developer’s heart than a carefully constructed library that takes care of most of the heavy lifting on a project. The list of seven examples we’ve identified should help you substantially up your overall JavaScript game, while also saving you a huge amount of time in your day-to-day work.
Let’s recap them one more time:
- Master the DOM with jQuery.
- Take control of your figures with Numeral.js.
- Please your users with Retina.js.
- Dominate data with D3.js.
- Introduce structure to your projects with Backbone.
- Dive into testing with Chai.js.
- Reimagine your front ends with React.
Tackle that list in sequence, and you’ll be well on your way to being a certified JavaScript ninja. However, they’re not the only games in town. If there’s a key library we’ve missed, get in touch via the comments section below and let us know!
Image credit: geralt.
No Comments