Intro

The JavaScript ecosystem is absolutely massive. JavaScript is everywhere and the community of developers surrounding it are constantly coming up with new tools to harness the power of the language of the Web and make it easier to build amazing things.

This resource gathers together some of the top frameworks and libraries written in JavaScript. It’s by no means complete, and it will continue to grow over time, so check back.

Front End

JavaScript started out as a strictly front end language. That’s still where it’s most dominant. There are loads of tools to do everything from simple manipulation of HTML to complete front end web applications.

General & DOM

jQuery

jQuery

If you’ve worked with JavaScript, you probably know about jQuery. jQuery is a rather larger JavaScript library that makes manipulating the content of pages much simpler than plain JavaScript.

jQuery is used both by a lot of websites, and other projects either incorporate it or build upon it. The reason is simple. jQuery reduces the complexity and amount of code that you need to write.

Dragula

Dragula

Have you ever seen a website that allowed you to drag and drop pieces of it around and rearrange it? There’s a good chance Dragula was involved.

Dragula is a library that enables developers to create drag and drop features in their websites as easily as possible. It lays down all of the groundwork for you, so you can focus on applying it to the elements of your page.

Polymer

Polymer

Polymer is a different sort of library. It allows developers to create custom reusable HTML elements.

Those elements can be dynamic and interactive. Polymer turns static HTML into something which behaves more like an object oriented language.

Zepto

Zepto is a lot like jQuery, but it’s super light weight. It’s built to be compatible with jQuery, and it uses the same syntax, but it cuts out a lot of the unnecessary extras that can slow jQuery down.

It doesn’t have the same constraints as jQuery. Zepto doesn’t worry about supporting legacy browsers or often unused parts of jQuery. It focuses on giving developers what they need, and nothing they don’t.

Animation and Graphics

Animate

Animate isn’t purely JavaScript, but it works works using JavaScript to trigger CSS animations, so it’s still worth including.

This very simple library allows developers to include basic CSS animations with minimal effort.

Anime

Anime is something similar to Animate, but it uses a lot more JavaScript and is capable of much more complex animations.

It is able to create custom freeform animations that include more motion in a more natural and, well, animated way. Anime’s animations are fluid and natural

D3

D3

Big data has been exploding over the past few years, and developers need a way to visualize and present that data. That’s where D3 comes in.

D3 is designed to make creating a wide variety of data visualizations easy. It provides functions for making visually appealing and animated graphs using large sets of data. D3 is trusted and stable.

Chart

Chart is very much like D3, but simplified. It can easily create animated and well designed graphs of a number of varieties.

Chart doesn’t have the same number of options as D3, but it is also simpler to use. It’s fairly light weight for what it is and what it is capable of. For developers looking for a simple charting solution without the overhead of D3, Chart is a great option.

Velocity

Here is another descendant of jQuery. Velocity re-implements jQuery’s animation functionality without the bloat of jQuery.

As its name implies, the goal of Velocity is speed. Surprisingly enough, Velocity hasn’t sacrificed browser compatibility to achieve its goal. Velocity doesn’t exactly use jQuery’s syntax, but it will immediately be familiar to any jQuery developer.

Parallax

Parallax can empower developers to create amazing animations that play with visual depth to create 3D like effects.

It can create scrolling animations and create the impression of changing perspective. It handles a lot of the hard animation work for you, so you can focus on implementation.

Frameworks

Angular

Angular

Angular is a big deal. It was developed by none other than Google, and for a while, it dominated the front end JavaScript framework space.

Angular is an MVC framework that developers can use to make front end web applications using JavaScript. It is relatively simple, and serves as in integral part of the popular MEAN stack.

Google made somewhat of a mistake, though. Angular 1 and Angular 2 are different frameworks, so there is no smooth upgrade between them. Make sure you know which you’re working with.

Vue

Vue

Vue can look a lot like Angular, but it’s generally more simple. It’s a front end MVC framework. It comes complete with routing and just about every feature you’d expect from a front end framework.

Despite that, Vue is lightweight and has a simple learning curve. It is intuitive and uncomplicated, and it’s a smaller dark horse project that’s managing to compete with Google and Facebook. Actually, it’s even included it the popular Laravel PHP framework.

Ember

Ember

Ember is the Rails of front end frameworks. It’s big, opinionated, and powerful. Ember tells you what to do, and if you follow, you can make some great things easily.

Ember is big, though. It comes bundled with the Handlebars templating engine and all the batteries included. This is awesome for larger desktop web applications, but might seriously slow down on mobile.

React

React

Facebook made it’s own front end framework, and that’s React. It’s a favorite among developers because it’s easy to learn and teaches developers. React also has a large and active community of developers.

React is centered around building and using independent components. These encapsulated components are reusable and don’t interfere with one another, making them the perfect building blocks of your applications.

Aurelia

Aurelia is another full-featured MVC framework that makes full use of two-way data binding, routing, and custom HTML components.

It’s a great option for developers looking for a more complete framework along the lines of Angular but without the baggage of the of Angular’s versioning.

Mithril

Want something super minimal? Mithril may be for you. Mithril is a fast no-nonsense framework with many of the options that you’d expect from a much larger project.

As a framework, it looks and feels like regular JavaScript. It’s uncomplicated, and uses standard JavaScript functions. Mithril is a great option when you need a framework, but don’t want a lot of overhead.

Backbone

Backbone

For another more minimal solution, consider Backbone. It aims to provide the structure needed to build powerful web applications.

Backbone is lightweight with a design that focuses on passing data between models, views, and a database. Of course, it has existing functionality to make building these components easier.

Riot

Riot is something a bit different. It aims to bring the component based functionality of React and the ability to create custom HTML elements together.

Riot is a minimal framework alternative. If you don’t need a full framework, but do want reusable components, consider using Riot.

Redux

Redux isn’t really a full framework. It’s more of an add-on that you can use with React or another view library.

Redux refers to itself as a state container. It attempts to maintain the state of your web applications and enable them to run consistently.

Back End

The back end is the domain of NodeJS. Node allows JavaScript to run as a back end language, and it’s incredibly powerful. These frameworks work with Node to enable developers to build robust web applications.

Frameworks

Express

Express

Express is another key component of the MEAN stack. It’s a minimal back end MVC framework built on top of NodeJS.

Express is great for building both full featured web applications and APIs. Because Express is minimal by default you have the choice of how much you want to build, and you don’t end up with a lot of features that you’re never going to use.

Sails

Sails

Sails is actually based on Express. It’s sort of like Rails for NodeJS. It comes with a lot of work already done when you spin up a project.

It abstracts a lot of the more low-level work like interacting with databases away, making the process simpler. Sails also comes with features like automatically generated REST.

Koa

There’s an even more minimal solution than Express. Koa. Is a super minimal back end framework that can still be used to crate web applications and APIs.

Koa only provides a middleware kernel and builds upon Node’s existing HTTP modules. It’s much closer to NodeJS itself.

Adonis

There’s another great full featured framework, Adonis. Adonis provides all of the major features that you’d expect from an MVC framework, like routing and ORM for handling database connections.

Adonis aims to build in all of the features that you’d want in just about every project so you can get started building your application faster.

Meteor

Meteor

It’s kind of hard to tell were to put Meteor. It’s actually a full stack framework that provides tools for building both the front end and the back end of your web applications.

Meteor would be most comparable to the entire MEAN stack. It provides everything in one package. That means that while Meteor can be convenient, it can also be somewhat inflexible.

Meteor is a complete toolkit that you can immediately begin building a web application with.