• Technology

Javascript Libraries and Frameworks to Inspire Through 2018

Mia E Lee
Mia Ellis-Lee
Design & Frontend Development
Write to Mia

The open-source library Pixi JS was a huge part of helping Flywheel Strategic build our Holiday Card Creator for the winter of 2017. With Javascript libraries on the brain in early 2018, it seemed appropriate to list Javascript libraries and frameworks for developers to check out over the next year. With literally hundreds of Javascript libraries and frameworks floating around the web these days, creativity is often the only limit for web developers. The most popular have become not only immensely useful to learn, but are often highly sought after skills by employers.

Below are 12 Javascript libraries and frameworks focused towards helping you unleash your creativity in 2018 and turn scribbles on a sketchpad into reality. Some are extremely popular and others less well known, but all were included because of their ability to spur invention and innovation. I’ve also included some of my favourite examples that use each library in question to kick-start some ideas. Everything listed below is open-source, so what are you waiting for? Get coding!



Still a great library, but I can't help but wish that they kept the MC Hammer motif following their rebranding

Hammer JS

Hammer JS, a library for adding gesture and touch recognition to your web app, makes it easy to build web experiences optimized for (or centered around) touch devices. Hammer JS supports panning, swiping, pressing, tapping, multi-tapping, rotating, and pinching and also makes it easy to implement through simple Javascript functions. Moreover, all these gestures work for traditional mouses and pointer events too.

Link to Documentation
Examples: EIDOS, Synesthesia.world



Charts JS

Charts JS makes it easy to whip up responsive animatable, interactive charts in Javascript. It comes with a wide variety of chart types, axes types and animations out-of-the box and supports events, callback functions, hooks, and has a wide variety of third-party plugins. Interactivity is easy to implement, allowing your users to add new data, create new charts, or extend existing charts if you choose. It’s also incredibly simple to implement with good documentation.

Link to Documentation
Examples: Multi Axis Chart, Bubble Chart, Custom Line Graph


Aurelia

Aurelia is a front end framework for developing web apps, much like React, Angular, or Vue. Aurelia is composed of many smaller components allowing you to pick and choose features depending on your application, and you can write your app in either ECMAScript or TypeScript. It supports many of the same features as more well-known frameworks like React and Angular (i.e. two-way data binding, routing, extensible HTML, components), but what set it apart to me was the simple and intuitive syntax of Aurelia.

For instance, in order to create a view for a class, you simply have to create an HTML file with the same name as your Javascript file and Aurelia will automatically know what class to render. Rendering properties and data binding are also just as simple to write. All this in conjunction with allowing you to write either ECMAScript or TypeScript means that Aurelia stays unobtrusive and allows you to focus on creation, not syntax.

Link to Documentation
Examples: Farm Track, Name My Band, Ment



Anime JS

Anime JS has almost anything you could want from an animation library. It supports a wide range of targeting (CSS selectors, DOM nodes and node lists, JS objects and arrays) and you can use it to affect CSS properties, object properties, DOM attributes, or SVG attributes. It features everything you expect: timing durations, delays, easing, specific property parameters (so you can change the values, easing, durations, etc for rotating and scaling), directions, looping, function based parameters, relative units, support for RGB and HSL colours, specific initial values, animation elasticity, SVG specific functions, and way more. It also supports playbacks, callbacks, promises, has a bunch of built in easing equations, and custom bezier curves. Even complicated SVG animations become relatively simple to write with Anime JS - if you can dream it, you can achieve it. If animations on the web are your thing, you’ll want to check out Anime JS (seriously, I think I’m in love).

Link to Documentation
Examples: AWSM Logo Animation, Anime JS Logo, Floating Draggable MenuModern Retro - IBM ThinkParticles (also using Three.JS)



D3

I really can’t overstate how powerful of a library D3 is. At its core, D3 allows you to easily create interactive data visualizations with HTML, SVG, and CSS. What this means though, is that it could be in the form of charts, tables, maps, models of the solar system, gauges, graphs, mosaics, games - basically anything you can imagine. The focus of D3 is on allowing users to efficiently manipulate documents based on data as opposed to providing a users a framework with a huge number of features. What this means is that D3 is fast and flexible (allowing D3 to use large datasets and dynamic behaviors) but requires good and creative developers to implement it effectively. D3’s scope is incredibly broad and the library is very powerful, allowing you to represent and interact with data in inventive and potentially stunning ways.

Link to Documentation
Examples: UK Wind Chart, 3D Bar Chart, Wimbledon Visualizations, D3 Tree, Airline On-time Performance, Conway's Game of Life, Word of the Day, Global Excess Nitrogen, D3 Game



PouchDB

PouchDB is a Javascript database allowing web applications to work effectively both online and offline by storing data locally when offline and then synchronizing the database when the application is online. With PouchDB, web apps will still work even when offline, allowing you to build digital experiences that just work - regardless of a user’s current network status.

Link to Documentation, Link to API
Examples: MTBA Alerts (used to code the bot that operates the account), Pokedex.org, Money Tracker



P5 JS

P5 is a Javascript library of canvas functions designed to be accessible for artists, designers, educators and non-coders/beginner coders. This makes it easy to create canvas-centered web experience and quickly create something interactive and creative.There are also a variety of supplementary libraries as well. For instance: P5 DOM (for interacting with the document object model), P5 Sound (for audio functions),  P5 Collide 2D (for calculating collision detection for P5 2D geometries), and P5 Bots (allowing you to interact with Arduinos or other microprocessors from your browser). Since the target audience of the library was non-developers, the syntax is incredibly simple and the library stays out of your way through the process of creation. Check out the Snake example below to see how little Javascript it took to create.

Link to Documentation
Examples: Snake, P5 Data Visualization, Sticky the Marshmallow (also uses Matter.JS), Rainbolt (CAUTION: can contain strong strobing effects), Fun with Colourful Particles, Abandoned Art 30: 300'000 Points



Three JS

Three JS has been one of my favourite Javascript libraries since I started coding for the web. The immensely powerful library for creating, rendering, and interacting with 3D graphics has seen a ton of use from a wide variety of individuals and organizations. From musicians like J Dilla to companies like Porche, Three JS has been used to create a (frankly) amazing list of immersive and interactive 3D web experiences. Three JS allows you to create your 3D assets through the library itself, or you can import assets through JSON files from assets made in 3D rendering software like Blender or Maya Autodesk - speeding up development time by allowing you to create complex assets in software designed for the task specifically.

Link to Documentation
Examples: A Way To Go, Particle Love, Paper Planes,  Deprogrammed, Short Trip, Under Neon Lights, I Remember    



Phaser

Robust only just begins to describe Phaser - a complete Javascript framework using the P2 physics engine for creating 2D games. Phaser alone features support for basically everything you need to create a robust 2D game on the web: preloaders, tilemaps, sprites, physics, inputs, particles, a camera, sound, varying game states (for multiple levels), and more. Jerome Renaux of Dynetis games has even created a multiplayer online game using Phaser, Socket.io, and Node.js. The syntax and conventions of the framework are simple and intuitive and it has strong documentation, so learning Phaser is easy. I’m cheating a bit by sneaking a thirteenth library into this list, but check out Babylon if you’re interested in a framework for 3D games.

Link to Documentation
Examples: Star Wars: Porg Invasion, Ramp Lab, Rogue Fable II, Zehkiflorn, STBA




Pixi JS

Pixi JS is a 2D graphics renderer that allows developers to create interactive 2D experiences. Not only is it lightning quick, but it works cross-platform and cross-browser and falls back to the HTML5 canvas in environments that don’t support WebGL. The broadness of Pixi JS’ scope means that while you can use it to create games, you can really use it to create any interactive media application that features 2D graphics. Pixi JS is widely used and also supports plugins, so if anything is missing for what you need to build, there’s likely a plugin that will solve your problem.


Link to Documentation
Examples: In My World, Wake it Up, Pixi Star Cluster, Inculerate, These Beats are Dope, Jetlag.photos



Matter JS

Matter JS is a Javascript 2D physics engine with a renderer built in. What sets it apart from a game framework like Phaser is that Matter JS’ focus is solely on the physics engine itself. Matter JS is very robust physics engine, offering features like: compound and composite bodies, conservation of momentum, friction, elasticity, and collision filtering. Matter JS is also mobile and touch compatible and supports plugins (the plugin “matter-attractors” allows you to simulate forces like wind and magnetism!).

Link to Documentation
Examples: Pablo the Flamingo (also uses Three.JS), Remember Spook?, Twitterpile



React VR

This one blew my mind when I first discovered it in 2017. React VR enables developers to build VR applications using only Javascript. Yep, you read that correctly. Moreover, it uses conventions of React like components, properties, states, and declarative programming so developers can leverage their knowledge of React into easily picking up React VR. It also uses a technology stack of WebGL to render 3D graphics, WebVR API to interact with VR headsets, Three.JS for advanced 3D modelling and a framework called OVRUI which allows Three.JS scenes to be rendered for VR. The popularity of these underlying technologies means that the whole tech stack for React VR is well supported. React VR is cutting down the barriers to the exciting world of VR development through their coding conventions, use of well-supported and popular technology, and open-source distribution.

Edit (2018-11-28): "React VR" is now called "React 360"

Link to Documentation
Examples: React VR Player, The British Museum Interactive TourBitcoin VR

Author: Mia Ellis-Lee
Web Developer 
Back to Top Arrow Up