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.
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 Menu,
Modern Retro - IBM Think, Particles (also using Three.JS)
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 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 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 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
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 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 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
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 Tour, Bitcoin VR
Author: Mia Ellis-Lee
Web Developer