12 JavaScript libraries to watch in 2017

Default avatar.
November 17, 2016
12 JavaScript libraries to watch in 2017.
With hundreds of free JS libraries out there it’s tough to know where to put your energy. Some end up discarded or forked into new projects, while others grow rapidly and achieve widespread adoption. Most developers already know the big names like jQuery and React. But in this post I’d like to introduce twelve alternative JS libraries that are less well-known but rising rapidly.

1) D3.js

01-d3js-visualization-library Big data is a growing industry and data visualization is quickly becoming just as important. There are tons of charting & mapping libraries but few stand out as much as D3.js. This JS library works with SVG and canvas elements to render graphs, charts, and dynamic visualizations on the web. It’s completely free to use, and it’s one of the most powerful visualization tools built on JavaScript. If you’re looking for a modern way to render data in the browser I would highly recommend taking a peek at this library to see what it offers.

2) Node.js

02-nodejs-logo I know many devs are sick of hearing about Node all the time. But it really is the fastest growing JS library and it offers so much more than a dev environment. With NPM you can manage local packages for all your projects right from the command line. This makes Node a full development toolkit that works well with other tools like Gulp. Plus dozens of related open source projects have been built on Node so you can work with unit testing in Mocha.js or build a front end interface with the Sails.js framework. If you haven’t tried Node yet then you might be surprised just how much you’re missing.

3) Riot.js

03-riotjs-screen Virtual DOM rendering and custom elements litter the React library. It has quickly become the choice of all professionals who want a powerful digital interface library for front end development. But Riot.js is putting up a solid fight offering a nice alternative to React. By using the Riot framework you still have access to a virtual DOM but it’s much easier to control with simpler syntax requirements. Unfortunately this library isn’t as big as React and it’s not powered by Facebook, so you won’t have the huge community. But it’s a healthy alternative and it’s a decent competitor in the front end space.

4) Create.js

04-createjs-easel-js-screen From web animation to digital media you can work with everything in CreateJS. This isn’t one single library, but rather a suite of libraries built for different purposes. For example Easel.js works with HTML5 canvas elements while Tweet.js helps you build custom tweening & animations for the web. Every library in this collection serves a different purpose and offers modern features for all major browsers. But most of these libraries help with specialized features so they’re best used on specialty websites. If you’re curious, then take a look at the Create JS website to see what it offers.

5) Keystone.js

05-keystone-js-cms Earlier I mentioned Node.js and how many other libraries are built on top of it. Keystone.js is a fantastic example that goes beyond Node by offering a full-scale CMS engine. With Keystone you can build MEAN webapps powered by Node/Express and MongoDB on the backend. Keystone.js is completely free but still very new. At the time of this writing it’s only in v0.3 so it has a long way to go for professional use. But if you’re tickled by a pure JavaScript CMS then check it out and see what you think.

6) Vue.js

06-vuejs-logo In the world of front end frameworks you typically find two prominent choices: Angular and Ember. But Vue.js is another very popular choice and it’s quickly gaining more attention since its v2.0 release. Vue is an MVVM frontend JavaScript framework so it moves away from the typical MVC architecture. It’s tricky to learn but the syntax is simple once you understand how it all works. It’s certainly a viable choice in the war of front end frameworks, and it’s worth keeping a close eye on it over the next few years.

7) Meteor

07-meteor-js-logo You can integrate any platform into the Meteor framework with fantastic results. This open source project helps developers build JS-powered applications whether they’re real-time chat apps or social communities or custom dashboards. There’s even a social news framework called Telescope built on top of Meteor. This lets you create a social news/social voting website from scratch running on Meteor and React. Meteor is a beast of a library with lots of features, but it’s not easy to learn. However it is fun and skilled JS developers can build almost anything with this platform.

8) Chart.js

08-chartjs-canvas-demo With Chart.js you can build bar charts, line charts, bubble charts, and many other similar features using JavaScript and the canvas API. This is one of the simplest JS libraries for data charting and it comes with built-in options for animations. This is one of the few libraries I recommend for data graphs because it’s easy to setup, easy to customize, and it comes with some of the best documentation of any open source project.

9) WebVR

09-webvr-logo It seems like virtual reality has taken the world by storm with new startups and excited developers working tirelessly on VR projects. That’s why I wasn’t surprised to find WebVR, a new JavaScript API made for VR in your browser. This works off the most popular devices like the Oculus Rift and the Vive but it’s currently in a development stage. The API is open source and constantly being tested against modern browsers to gauge how it functions on VR devices. If you’re curious to learn more or get involved with the project check out the official site or visit the MozVR page for more info.

10) Three.js

10-threejs-3d-graphics-webgl It’s crazy to see how much 3D animation has grown dating back to the 1980s up to today. We’re all familiar with 3D animated movies but web animation is still a new frontier. And thankfully we have libraries like Three.js blazing a path for 3D animation on the web. On the main site you’ll find dozens of live examples of Three.js in action. You can build motion-sensitive backgrounds, custom 3D web graphics, and dynamic interface elements that use 3D animation effects. If you have enough patience and drive you can build any 3D effect with this library. It is the best resource for 3D motion on the web, and it comes with lots of examples to get you started.

11) Omniscient.js

11-omniscient-js-library Functional programming with JavaScript is not a new thing. But it is fairly new on the web and it’s now much more commonplace with libraries like Omniscient.js. This free open source library handles views with a top-down rendering process for all front end components. You can write functional JS code from scratch and work with existing UI libraries like React. I would specifically recommend this library to any experienced developers who want a smoother development process. It’s a complicated subject for beginners but Omniscient can radically change your dev workflow when used in coordination with React components.

12) Ractive.js

12-ractive-js-demo If you’re looking for a UI library that’s different than the rest I think Ractive.js fits the mold well. It comes with two-way binding for template elements and data so you can construct templates with elements that bind to Ractive functions in JavaScript. This is a pretty dense library but it offers one of the smoothest learning curves for beginners. It’s not as detailed as React, and it uses vastly different syntax in JS and HTML. Visit the main site to learn more, and check out the examples page to see what’s possible with Ractive. All the libraries in this post have something unique to offer the JS community. If you enjoy tinkering with JavaScript then take another look over each library here and see what they can offer your web dev projects.

Jake Rocheleau

Jake is a writer and user experience designer on the web. He publishes articles discussing HTML5/CSS3 and jQuery coding techniques. Find out more on his website or you can follow his updates on Twitter @jakerocheleau

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…