The A-Z of JavaScript Frameworks, Libraries and Resources
[Note 10th August 2019: the information below hasn’t been updated since 2016 so some of the material is out of date. I will update it after I have completed the Angular Learning Path.]
Introduction
This is a live work in progress of my final vision of a full JavaScript encyclopedia. Phase 1 was one A-Z of all useful frameworks. This has now grown so large that it needs to be split into different categories. So I have moved out all transpilers, and polyfills into their own categories at the bottom of the main section, and am identifying further categories.
I am gradually more detailed information on every listed framework, including reasons to adopt or not adopt. However you might still be left wondering which framework(s) to use. I have written some pointers here.
Occasionally you might decide to use more than one framework or library together. For example see
Also check out these:
JavaScript chart libraries
The Future Is JavaScript Only Less Terrible
The Future Is JavaScript Only Less Terrible Part 2
ES6: The Future is now by Jim Cowart
DevChat TV Adventures in Angular Podcasts. Not just about Angular, it covers various JavaScript topics
Jon Rimmer: Are We Componentized Yet?
List of ES6 Tools
All sorts of arguments could be made on which framework should be the main “stands for” its letter of the alphabet. They don’t necessarily reflect the quality of the framework, I have given more weight to the popularity of the framework than my perception of its quality. This is because I want to give most advertisement to the frameworks that are likely to be of most relevance to the most amount of people.
A is for Angular
Bringing “simple” back to the development of complex webapps…
Looking for an introductory video?
Have an hour free? Check this out: AngularJS Fundamentals In 60-ish Minutes
Only have 12 minutes? Try Getting Started with Angular JS
Want to use Active Directory with JavaScript? Watch this: Microsoft Azure Active Directory Authentication
Reasons to adopt Angular 1.x:
reasons to adopt angularjs to master web application development
5 awesome Angular features
Reasons not to adopt Angular 1.x:
Let’s Code JavaScript: An unconventional review of Angular JS
Angular JS The Bad Parts
Angular 1.x Browser Compatibility
Works well with various versions of Firefox and Chrome. If you need to support IE6+ use Angular 1.0 or 1.1. If you need to support IE8+ use Angular 1.2. For IE9+ you can use Angular 1.3+
Angular 2 is currently at alpha preview stage
Angular 2 is between 5 and 10 times faster than Angular 1.x and approximately as fast as React (based on Dave Smiths demo, performance of course varies from test to test). However, unlike Angular 1.x it is not yet production ready, it should be released early 2016.
If you are in a dilemma over whether to learn v1 or v2 I recommend reading this post on Angular First
Also stands for:
aurelia – next generation client framework built on top of other frameworks like Babel. Created by the author of Durandal, also an ex-member of the Angular team, and with a team of active contributors, this let’s you focus on writing vanilla JavaScript ES6/7 code. The blog posts below compare against the alpha version of Angular 2 and show much less code required in Aurelia
Aurelia and Angular 2 code side by side
Aurelia and Angular 2 code side by side Part 2
Aurelia is currently at alpha stage, and should reach Beta sometime around July, at which point it should be production ready for the most part. Aurelia can also work with React if you want.
Ally – making accessibility easier
Ampersand – small fast framework. Especially great for mobile devices due to its small size.
amplify – a set of components designed to solve common web application problems with a simplistic API. Amplify’s goal is to simplify all forms of data handling by providing a unified API for various data sources.
appendto
Ammo – a port of the Bullet physics engine
Asynquence – Async library
ava – test runner
B is for Backbone
Backbone gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Backbone is built on top of jQuery and Underscore.
Looking for an introductory video?
Have an hour free? Check this out: Backbone.js Tutorial – Beginners
What to dive deeper? Free e-book: Backbone Fundamentals
Pluralsight course: Backbone Fundamentals by Liam McLennan
Also stands for:
Bacon – functional reactive programming library
Bootstrap – The most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Babylon – a complete framework for building 3D games with HTML 5 and WebGL
bignumber – a library for arbitrary-precision decimal and non-decimal arithmetic
Bin – Collaborative JavaScript Debugging
Benchmark – Robust performance testing for your JavaScript. Upload your results to the crowd sourcing website jsperf.com so that everyone can learn what runs fastest under each browser.
C is for CodePen
CodePen is an online application for quickly testing out and sharing small web applications
Also stands for:
C3 – D3 based reusable chart library
Can JS – App development library with 2 way binding. New and quickly growing in popularity.
Cappuccino
Cubism – Time Series Visualisation
Crafty – Game engine
Candy – multi-user chat client
Cookies – Cookie Manipulation Library
Cubic VR – Web GL library (also see Three JS below)
D is for Dojo
Saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.
Dylan Schiemann: Building high performance web applications with Dojo
Also stands for:
D3 – Data Driven Documents
date – a library to make it easier to work with dates
Decimal – a decimal type system, including trigometric functions
Durandal – Single Page Apps Done Right
Duck – API documentation generator for Sencha JavaScript frameworks
E is for Ember
Open-source web application framework based on the model-view-controller (MVC) software architectural pattern.
Also stands for:
Epik – a small, modular and extensible MVC framework for modern web development, built in the spirit of AMD and bower components. It will also work with global exports (w/o a dependency loader) and it works under node.js. epik offers 90% of the functionality of Backbone but allows you to develop in the style of MooTools classes via primish. The views are either powered by jQuery or via a built-in rivets.js adapter for bi-directional binding in the style of AngularJS.
Express – Fast, unopinionated, minimalist web framework for Node.js
Email-Autocomplete – A jQuery plugin that suggests and autocompletes the domain in email fields.
F is for Fiddle
Test and share JavaScript, CSS, HTML or CoffeeScript online.
Also stands for:
Falcor – A new technology for efficient data access, written by Netflix
Fuel UX – extends Bootstrap with additional lightweight JavaScript controls for your web applications.
Flow – Providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API
Flow type – Advanced Static Type checker
Flot – Attractive JavaScript plotting for jQuery
Forever – run your scripts forever
G is for Grunt
The JavaScript Task Runner that can do most of your mundane work for you
Also stands for:
Garden – a growing collection of documentation about the most quirky parts of the JavaScript programming language
Grips – Simple Templating Engine aimed at the sweet spot between logic-less templating engines (e.g. see Mustache) and those that allow you to add a lot of business logic (e.g. Handlebars)
Gulp – Automate and enhance your workflow. Many people prefer this to Grunt.
H is for html2canvas
This script allows you to take “screenshots” of webpages or parts of it, directly on the users browser.
http://html2canvas.hertzen.com/
Also stands for:
HTML5
Hint – Code Quality Tool
I is for Idiomatic
Principles of Writing Consistent, Idiomatic JavaScript
https://github.com/rwaldron/idiomatic.js/
Also stands for:
io – a fork of Node with an open governance model and takes advantage of the latest browser support for ES6
Imagesloaded – Detect when images have been loaded.
Immutable – Immutable Collections library
Intern – next-generation code testing stack
J is for Jquery
The Write Less, Do More, JavaScript Library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Also stands for:
JSON – light-weight, language independent, data interchange format
JISON – Bison in JavaScript
Jasmine – Behavior Driven JavaScript
Jest – a wrapper for Jasmine. Jest provides you with multiple layers on top of Jasmine:
Automatically finds tests to execute in your repo
Automatically mocks dependencies for you when running your tests
Allows you to test asynchronous code synchronously
Runs your tests with a fake DOM implementation (via jsdom) so that your tests can run on the command line
Runs tests in parallel processes so that they finish sooner
jspm – package manager for front end JavaScript.
K is for Kendo UI
Everything you need to build modern sites and apps with HTML5/JS
http://www.telerik.com/kendo-ui
Also stands for:
KnockOut – Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM)
Have a spare hour? Watch Steve Sanderson – Architecting large Single Page Applications with Knockout.js
Kinetic – Enterprise class interactive
web graphics
KOA – A new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. Through leveraging generators Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within core, and provides an elegant suite of methods that make writing servers fast and enjoyable.
Marcus Hammarberg has produced a 2 hour introductory Koa course on pluralsight
KOAN – KOAN stack: Koa, Angular, Node, Mongo, Web Sockets. I guess MANK stack didn’t sound too good!
L is for Lungo
HTML5 framework for developing cross device mobile applications
Also stands for:
Layzr – dependency free lazy loading
Load image
Leaflet – An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
Lo-dash – A utility library delivering consistency, customization, performance, & extras
Lab – Loading and blocking JavaScript
N is for Node
A platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
M is for modernizer
A library that detects HTML5 and CSS3 features in the user’s browser.
Also stands for:
Massive – Postgres centric data access driver
MEAN – project template featuring the whole MEAN stack: Mongo, Express, Angular and Node
Mori – Functional library: ClojureScript’s persistent data structures and supporting API from the comfort of vanilla JavaScript
MySQL – MySQL NoSQL Connector for node.js
Mocha simple, flexible, fun javascript test framework for node.js & the browser. (BDD, TDD, QUnit styles via interfaces)
Moment – date and time library
Mongo – Node.js module that implements the offical mongo api
Mustache – Logic-less Templates
Min – A super tiny JavaScript library to execute simple DOM querying and hooking event listeners.
O is for Opalang
Opa is an advanced framework for JavaScript, made of two parts:
1. A compiler from the Opa language, which features JavaScript-like syntax but introduces many enhancements;
2. A JavaScript library, which is used at runtime.
Also stands for:
Object Playground – practice your JavaScript with automatic diagrams explaining how your code works!
oc Lazy Load – Lazy Loading support for Angular 1.x
Otto – A JavaScript interpreter in Go (golang)
Obviously Cookies – EU law requires all websites to notify its users about use of any cookies if any cookies exist anywhere on the site. This is the most simple and irreverent solution to getting on the right side of the law.
P is for Prototype
Useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.
Also stands for:
Passport – simple unobtrusive authentication middleware for Node
PureMVC – a lightweight framework for creating applications based upon the classic Model-View-Controller design meta-pattern
Phantom – a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
Physijs – physics engine plugin for Three JS
preload – provides a consistent way to preload content for use in HTML applications. Preloading can be done using HTML tags, as well as XHR.
Protractor – End to end testing framework built on top of Web Driver especially useful for testing Angular apps
polyglot – a tiny I18n helper library written in JavaScript, made to work both in the browser and in CommonJS environments (Node). It provides a simple solution for interpolation and pluralization, based off of Airbnb’s experience adding I18n functionality to its Backbone.js and Node apps.
postal
Pusher – web sockets library
Q stands for Qunit
a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI and jQuery Mobile projects
Also stands for:
Q – Async library
Qooxdoo – a universal framework
with a coherent set of individual components
R stand for Require
File and module loader. Optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Can improve the speed and quality of your code.
Also stands for:
Ramda – Practical functional library for JavaScript. Recommended in the Frontendmasters course Hardcore Functional Programming in JavaScript
React – Library For Building User Interfaces, using a virtual DOM diff implementation for ultra-high performance, and a one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding
React Router – A routing library that is often used with React
Reqwest – a micro library for AJAX requests
Restify – a node.js module built specifically to enable you to build correct REST web services.
Raphael – a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Resumable – multiple simultaneous, stable and resumable uploads via the HTML5 File API.
S stands for Sencha
Sencha develop powerful libraries for web developers, such as Touch and Ext JS. Ext JS was created in 2008 and is now up to version 5. Touch was created more recently to create powerful, universal mobile web apps.
http://www.sencha.com/products/touch/
http://www.sencha.com/products/extjs/
Also stands for:
sane stack – Sails and Ember
Serenade – client side framework built on the MVC pattern. It makes it simple to create rich client side applications by freeing you from having to keep the DOM up to date with your data through powerful data bindings.
Sammy – RESTful Evented Javascript.
Sigma – library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.
Showdown
Socket IO – framework for working with web sockets
Splint JS – Functional first-aid for JavaScript/jQuery code
Standard – Standard JavaScript Style
Superscribe – Client side URL routing
T is for Three
Also stands for:
Tedious – SQL Server data access driver
Timeline – Beautifully crafted timelines that are easy and intuitive to use.
Taffydb – opensouce library that brings database features into your JavaScript applications.
Tween – animation library
TZ – library for working with different timezones
U is for Underscore
Provides over 100 functions that support common functional helpers: map, filter, invoke — as well as more specialized goodies such as function binding, templating, creating quick indexes, deep equality testing etc.
Also stands for:
Uglify – parser / mangler / compressor / beautifier library for NodeJS
V is for verbalexpressions
Regular Expressions made easy
https://github.com/VerbalExpressions/JSVerbalExpressions
Also stands for:
Vash – templating engine using Razor Syntax
Vim – JavaScript port of Vim
Vivagraph – Graph drawing library
Validate – Lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 2kb gzipped, and customizable!
W is for Wakanda
Wakanda is a broad platform that appeals to many different types of developers
https://github.com/Wakanda
http://www.wakanda.org/
Also stands for:
Web GLU – Utility library for Web GL
Wysihat – a WYSIWYG JavaScript framework that provides an extensible foundation to design your own rich text editor. WysiHat stays out of your way and leaves the UI design to you.
Wiki – indexes libraries and resources available for JavaScript.
Wind – An demo animation of wind on a Canvas layer in the JSAPI
Also stands for:
XRegExp – an open source (MIT License) JavaScript library that provides augmented and extensible regular expressions. You get new syntax, flags, and methods beyond what browsers support natively.
Xdomain – A pure JavaScript CORS alternative. No server configuration required – just add a proxy.html on the domain you wish to communicate with. This library utilizes XHook to hook all XHR, so XDomain will work seamlessly with any library.
Y is for Yslow
Analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites
Also stands for:
Yeoman – helps you kickstart new projects, prescribing best practices and tools to help you stay productive.
Z is for Zepto
Essentially a smaller version of jQuery with a similar API. Because of its smaller size, it is popular for mobile applications. Backbone projects can use zepto instead of jQuery. Doesn’t support IE 10 or below because it supports __proto__
A-Z of JavaScript Object Relational Mappers
B is for Bookshelf
Bookshelf.js is an ORM for Node.js, designed to work well with PostgreSQL, MySQL, MariaDB and SQLite3.
L is for Lovefield
Lovefield is a relational database for web apps, built upon IndexedDB, developed by Google and written in JavaScript. It doesn’t support raw SQL queries, but it comes with an API that tries to mimic the SQL syntax.
S is for Sequelize
Sequelize is another ORM for Node.js and io.js, supporting PostgreSQL, MySQL, MariaDB, SQLite and MSSQL. It features solid transaction support, relations and read replication.
W is for Waterline
waterline provides a uniform API for accessing stuff from different kinds of databases, protocols, and 3rd party APIs. That means you write the same code to get and store things like users, whether they live in Redis, mySQL, LDAP, MongoDB, or Postgres.
A-Z of JavaScript Polyfills
E is for ES5 Shim
Don’t wait for IE8 to go away before using ES5 methods. ES5 shim will convert your methods into ones that creaky old browsers can understand.
https://github.com/es-shims/es5-shim
Also for eCSSential – CSS polyfill
M is for Media Match
media match – library for testing media queries
R is for Respond
Respond – polyfill for media queries
P is for Polymer
polymer – makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
S is for System
System – A shim for ES6 modules
X is for X-Tag
X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.
http://www.x-tags.org/
X-Tag vs Polymer
A-Z of JavaScript Optimisers
A is for Ajax Min
This is actually mostly written in C#, but acts on your JavaScript as well as your CSS. Released under the Apache 2.0 Open Source License.
C is for Closure Compiler
Closure Compiler – A JavaScript checker and optimizer written by Google
J is for JS Min
There are actually two JS minifiers. There’s this quick and easy online service:
http://javascript-minifier.com/
And there’s Crockford’s original
http://crockford.com/javascript/jsmin
P is for Packer
http://dean.edwards.name/packer/
S is for Squishit
For .NET web applications
https://github.com/jetheredge/SquishIt
Y is for YUI compressor
For more information on Optimisation I recommend reading Scott Hanselman’s post
A-Z of JavaScript Transpilers
For a good introduction to Transpilers, see The Benefits of Transpiling To JavaScript
A is for ASM
ASM – a super fast subset of JavaScript, developed by Mozilla
B is for Babel
Babel – the new name for 6 to 5 which is a transpiler that allows you write ES6 style JavaScript now and transpile it into working ES5 JavaScript
C is for CoffeeScript
A little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.
Want to get started: CoffeeScript for beginners
D is for Dart
A cohesive, scalable platform for building apps that run on the web, developed by Google
G is for GrooScript
Groovy to JavaScript
J is for JSIL
A compiler that transforms .NET applications and libraries from their native executable format – CIL bytecode – into standards-compliant, cross-browser JavaScript. You can take this JavaScript and run it in a web browser or any other modern JavaScript runtime.
J also stands for:
Easy to learn and powerful programming language designed for high-quality web development, with classes and type checking
L is for Lua JS
LuaJS – An ECMAscript framework to compile and run Lua code, allowing Lua to run in a browser or in Flash
O is for Opal
Ruby to Javascript Compiler
P is for PureScript
PureScript – A meta language that compiles to JavaScript
P also stands for
Pyjamas – Python to JavaScript
S is for Scala
Scala – compiles Scala code to JavaScript, allowing you to write your web application entirely in Scala!
S also stands for
Sweet – Sweet is a macro language allowing you to extend JavaScript
T is for TypeScript
A typed superset of JavaScript that compiles to plain JavaScript.
TypeScript is being used in Angular 2. Google originally began developing AtScript but have since worked with Microsoft to use TypeScript instead. This is good news because many developers are already using TypeScript and/or Angular. TypeScript is now a much more attractive option for Angular 1.x developers to get started with.
http://www.typescriptlang.org/
T also stands for Traceur
A JS.next to JS of today compiler written by Google
W is for Whalesong
Racket to JavaScript compiler
For an introduction to the Racket Language see here
Zombie Code Kill 
I might suggest including useful browser stuff (if you’re not restricting it to frameworks – I see you already have “HTML5” for example) like:
WebRTC
Web Workers
Web Sockets
Service Workers
IndexedDB
Awesome list(s)! One language notably missing: LiveScript, from livescript.net. Definitely worth inclusion.
Pingback: Underscore and Lodash | Zombie Code Kill
Pingback: The Case for F Sharp | Zombie Code Kill
Pingback: jQuery Fundamentals | Zombie Code Kill
Pingback: Setting up Express JS | Zombie Code Kill