JavaScript Frameworks, Library and Tools


It seems like almost every other week there is a new JavaScript
library taking the web community by storm! The web community is
increasingly vibrant, diverse and is moving rapidly on multiple
fronts. It would be an impossible feat to survey every major
JavaScript framework and library. Instead,I will share some of the
most famous and influential ones for front-end development. So
let’s take a look at the top JavaScript web front-end framework,
libraries & tools and when to use them.

AngularJS
Angular is the popular enterprise framework that many developers
are using to build and maintain complex web applications.
Angular’s popularity is immense, and companies using it are as
diverse as Domino’s Pizza, Ryanair, iTunes Connect, PayPal
Checkout, Google. Angular is an open source framework supported
by Google. Angular describes itself as an extension to HTML for
building complex web apps. Also if you’re familiar with TypeScript ,
that’s how Angular 2 was written.
Angular is an MVC-type framework. It offers two-way data binding
between models and views. This data binding allows for an
automatic update on both sides whenever there is a data change. It
enables you to build reusable View Components. It provides a
services framework to allow easily backend-frontend server
communication. Finally, it is just plain JavaScript.
When to use AngularJS? When you are building a complex web
front-end application and need a single modular framework to
handle everything.
GitHub: https://github.com/angular/angular.js
Current Version: 1.4.7/1.2.29
Website: angularjs.org


React
React is this year’s favorite JavaScript project! Everyone seems to
be talking about ReactJS. Every conference I have been to in the
last year had at least a couple of talks on React and other libraries
in the same family ( Flux , Redux ) React is open-source and
developed mostly by Facebook with contributions from other major
tech companies. React describes itself as a JavaScript library for
building user interfaces.
React is mostly the V in MVC. Itfocuses entirely on that piece of
MVC and disregards the architecture of the rest of your
application. It provides a component layer that makes it easier to
make UI elements and combine them together. It abstracts the
DOM away so that it optimizes rendering and allows you to render
React from node.js. Further, it implements a one-way reactive data
flow that makes it easier to understand and use than other
frameworks.
Being the V in MVC, several projects combine React with the likes
of Angular or Ember.
When to use React? When you want a powerful View layer but
don’t need an elaborate framework for the rest of your application
or when you want a View layer to go with your Angular, Backbone,
or Ember application. When you are trying to build an isomorphic
web framework.
GitHub: https://github.com/facebook/react
Current Version: v0.14.0
Website: Facebook.github.io/react/


NativeScript
NativeScript is an open source framework for building
cross-platform truly native iOS and Android mobile apps
using JavaScript. With the NativeScript framework you can
use your JavaScript and CSS skills to write native mobile
applications for iOS, Android and (soon) Windows Phone.
There is no WebView involved in rendering the app, as the
UI is rendered by the native platform's rendering engine.
Because of that, the app's entire UX is native.
The NativeScript framework enables you to use a complete
stack of cross-platform APIs to write your application code or,
if you need to, you can directly access all platform-specific
native APIs using JavaScript only. That’s right—you can access
all native APIs, not only the ones we thought would be useful!
GitHub: https://github.com/NativeScript/NativeScript
Current Version: v1.5.2
Website: http://www.nativescript.org


Backbone
Backbone is a famously simple framework that fits into a single
JavaScript file. Backbone has been around for a while; developed
by Jeremy Ashkenas from CoffeeScript and Underscore fame.
Backbone is especially popular with teams looking for a simple
structure for their small web applications without bringing in a
large framework like Angular or Ember.
Backbone provides a full MVC framework along with routing. The
Models allow for key-value binding and events for handling data
changes. Models (and Collections) can connect to RESTful APIs.
The Views have declarative event handling, and the Router does an
excellent job of handling your URL and state management.
Everything you need to build a Single Page Application without
offering too much and without unnecessary complexity.
When to use Backbone? Backbone is my GOTO framework for
simple web applications.
GitHub: https://github.com/jashkenas/backbone/
Current Version: 1.2.3
Website: backbonejs.org


Ember
Ember is an opinionated web app framework focusing on
programmer productivity. Ember is relatively popular, and the core
team includes smart people like Yehuda Katz, who was part of the
Ruby on Rails and jQuery Core Teams. Ember describes itself as “a
framework for creating ambitious web applications” that doesn’t
waste your time. It is very opinionated and makes many choices for
you.
Ember is also an MVC framework. It includes a templating and
view engine that automatically updates when data changes, just like
Angular, Backbone, and React. It includes the concept of web
components that let you extend HTML with your own tags (just like
Angular). It also has a routing and model engine that knows how to
work with your RESTful API.
When to use Ember? When you just want a framework that just
works. Use Ember when you do not need flexibility because you are
on a tight budget or a hard deadline.
GitHub: https://github.com/emberjs/ember.js
Current Version: 2.1.0
Website: emberjs.com


jQuery
jQuery is the library that needs no introduction. It is single-handedly
responsible for making cross-browser sites a reality and for
bringing the web to where it is today. Web Standards have been
adopted and genuinely respected by most major browser
manufacturers and jQuery is one of the reasons why. The mission
of jQuery Foundation is “to improve the open web, making it
accessible for everyone, through the development and support of
open source software, and collaboration with the development
community.”
jQuery is the most used JavaScript library in the world, and no app
should ever go without it unless you dislike programmer
productivity. It makes DOM traversal, event handling, animation,
AJAX so much simpler and easier across all browsers.
When to use jQuery? Always, unless you want to use a lighter-
weight version like Zepto.
GitHub: https://github.com/jquery/jquery
Current Version: v1.11.3 or v2.1.4
Website: jquery.com


Sails
Sails.js is a web framework that makes it easy to build custom,
enterprise-grade Node.js apps.
Sails is a comprehensive MVC-style framework for Node.js
specifically designed for rapid development of server-side
applications in JavaScript. It’s robust service-oriented
architecture provides different types of components you can
use to neatly organize code and separate responsibilities. And
if you’re disciplined, then developing an enterprise-level
application with it is even possible.
Written in JavaScript, Sails gives you the additional benefit of
being able to share your code between the server and client .
This could be very helpful, for example, for implementing data
validation where you need to have the same validation rules
both in the client and on the server. Also, with Sails you need
to master only one programming language, instead of several.
Github: https://github.com/balderdashy/sails
Current version: V 0.12
Website: http://sailsjs.org


Underscore &lodash
Sometimes what comes built-in to JavaScript is just not enough for
programmers to be truly productive. There’s always a utility
function that is missing or a function that would simplify the code.
Underscore (and lodash) is a JavaScript library that provides a
whole suite of utility functions without monkey patching the built-in
JavaScript objects. Both libraries provide over 100 functional
helpers and other specialized goodies; including functions like
map, filter , invoke, reduce, template , throttle , bind, extend, pick , clone and
so much more.
When to use Underscore? When you want a single JavaScript file
that immediately augments programmer productivity.
Underscore GitHub: https://github.com/jashkenas/underscore
Underscore Current Version: 1.8.3
Underscore Website: underscorejs.org
When to use lodash? When you want amodular and slightly more
performant version of Underscore with easier support for AMD and
community plugins.
LodashGitHub: https://github.com/lodash/lodash
LodashCurrent Version: v3.10.1
LodashWebsite: lodash.com


D3.js
Data visualization and charting is a common requirement for web
applications. D3.js is the defacto standard when it comes to any
data manipulation and visualization. It is one of the most popular
projects on GitHub and is used by hundreds of organizations.
Plenty of graphing, charting and visualization libraries build on top
of D3.
D3 allows you to manipulate data documents from any source and
apply a transformation into the DOM or/and SVG or/and CSS. D3
focuses on modern web standards and ensures you are free from
any proprietary format like Flash or Silverlight.
When to use D3.js? Anytime you need visualization of any kind.
GitHub: https://github.com/mbostock/d3
Current Version: 3.5.6
Website: d3js.org


Babylon.js
Looking to build a video game that runs entirely on modern web
standards and across browsers? Take a look at Babylon.js, a 3d
game engine based on WebGL and JavaScript. You can create
incredibly high-quality games complete with physics, audio and
particle systems among other things.
When to use Babylon.js? Whenever you are building a video game
or a complex 3D scene of any sorts.
GitHub: https://github.com/BabylonJS/Babylon.js
Current Version: 2.2
Website: babylonjs.com


Three.js
Want to build a 3D visualization but do not need a full-blown game
engine? Three.js provides a lightweight 3D library that allows
rendering 3D to an HTML5 canvas, SVG, and WebGL. It is quite a
straightforward library, and there are hundreds of beautiful
examples in the three.js showcase.
When to use Three.js? Whenever you need a simple 3D
visualization that can output to a Canvas.
GitHub: https://github.com/mrdoob/three.js/
Current Version: r73
Website: threejs.org


Mocha& Chai
Testing JavaScript has been incredibly annoying for a long time.
Scratch that, testing any code is typically seen as annoying, but it
is something that every developer should do. Instead of testing
their code, every developer seems always to disdain and ignore it.
There is a fix to this hatred, and it comes in the form of Mocha
and Chai. While both libraries take their names from yummy hot
beverages, both libraries do help you test your code but in different
ways.
Mocha is a JavaScript test framework that makes it easy to test
the async code in your node module or browser app. Mocha tests
can run in series and have the added quality of tracing exceptions
to the correct test cases.
Chai is a behavior-driven development/test-driven development
assertion library that can be paired with Mocha. It makes it simple
to express what you are testing in a readable style.
When to use Mocha & Chai? ALWAYS! Please test your code and
make the world a better place.
Mocha GitHub: https://github.com/mochajs/mocha
Mocha Current Version: 2.3.3
Mocha Website: mochajs.org
Chai GitHub: https://github.com/chaijs/chai
Chai Current Version: v3.4.1
Chai Website: chaijs.com


Karma
Having included Mocha and Chai on this list, it would be
incomplete not to include a test runner to run these tests or
perhaps to setup continuous integration testing. Karma is a tool
designed to help automate running your tests against different
browsers. It will help you run your Mocha and Chai tests on all the
browsers out there.
Not every browser runs on every platform but luckily there are a
couple of free tools you can use to test other browsers, take a look
at Browser Screenshots. If you are running on OS X and want to
test Edge or Internet Explorer, you can use this tool for free .
When to use Karma? Whenever you have a comprehensive test
suite for your applications and want to ensure the tests pass on all
the browsers.
GitHub: https://github.com/karma-runner/karma
Current Version: v0.13
Website: karma-runner.github.io


PhantomJS
Running full browsers to test your code is memory and CPU
intensive. PhantomJS allows you to run a headless WebKit – the
rendering engine behind Safari and previously Chrome (now Blink).
It enables you to run your tests, capture screenshots, monitor the
network and automate page browsing from a JavaScript API.
When to PhantomJS? When you need to do more testing,
manipulate pages and monitor network requests.
GitHub: https://github.com/ariya/phantomjs
Current Version: v2.0
Website: phantomjs.org


Grunt & Gulp
Building websites for production typically involvesome tasks to
improve performance like minification of JavaScript and CSS,
compilation of CoffeeScript/TypeScript, unit testing, lintin. Perhaps
you already have a toolchain ready to prepare your website for
production but if you do not, you want to use a task runner like
Grunt or Gulp. Both have endless plugins to do just about any
transformation to your website to get it ready for production.
When to use Grunt? When you prefer writing configuration files and
don’t mind your task runner generating intermediary files.
Grunt GitHub: https://github.com/gruntjs/grunt
Grunt Current Version: v0.4.5
Grunt Website: gruntjs.com
When to use Gulp? When you prefer to write code over
configuration and want to take advantage of node.js’ streaming
capabilities for faster task execution.
Gulp GitHub: https://github.com/gulpjs/gulp
Gulp Current Version: v3.9.0
Gulp Website: gulpjs.com


Babel
JavaScript as a language is evolving quickly. ECMAScript2015 was
released last summer and many of its new features are
implemented in the latest browsers. If you want to take a look at
ECMAScript 2015 compatibility, you can take a look at this table
from @kangax. You’ll notice that the latest versions of Edge,
Firefox and Chrome have near-complete compatibility.
We do not live in a perfect world. As developers, we will need to
continue supporting older browsers that do not have the latest and
greatest JavaScript features. We do want to advance the web and
improve our code bases. Babel is a JavaScript compiler that
compiles the latest JavaScript standard to ES5-compliant
JavaScript allowing you to run on browsers as old as IE9. It has
some plugins that make it easier to develop with React and even
use features that are not part of the specification (e.g. ES7).
When to use Babel? When you want to use new JavaScript
language features and still support older browsers.
GitHub: https://github.com/babel/babel
Current Version: 6.1.2
Website: babeljs.io

.............
Put together by Rami Sayer, Technical Evangelist @ Microsoft on Web development

What of vuejs?
Have been hearing some good stuff about it, though I have not used it.

maekhel:
What of vuejs? Have been hearing some good stuff about it, though I have not used it.

I too I think I av come across it. But don't know what it really does

maekhel:
What of vuejs?
Have been hearing some good stuff about it, though I have not used it.

My colleague uses it and I have evaluated it, it's the next best thing if not for Angular 2 it's minimal and Component oriented, compared to the crap called Angular 1

What of Dojotoolkit, the next version is going to be in TypeScript and it's going to have much more components than ever, Deliteful is already in the works that's the Web Component aspect of it.

In fact this TypeScript is a threat to JavaScript. The moving away of these frameworks from JavaScript to TypeScript is something else dis days. Before we know of Angular 2 now dojo too is moving again. This shit must stop o.
Well I thank God that what is making them to run after TypeScript has already bin resolved with d coming in of JavaScript ES6.
JavaScript all d way

React is the only thing on that list worth considering.

Metalzoa:
React is the only thing on that list worth considering.

Lol.
React is the JS Library of the Year.

Olumyco:
In fact this TypeScript is a threat to JavaScript. The moving away of these frameworks from JavaScript to TypeScript is something else dis days. Before we know of Angular 2 now dojo too is moving again. This shit must stop o.
Well I thank God that what is making them to run after TypeScript has already bin resolved with d coming in of JavaScript ES6.
JavaScript all d way

Already jumping to TypeScript, never really liked JS that much, because i prefer Static typed languages.

pcguru1:


Already jumping to TypeScript, never really liked JS that much, because i prefer Static typed languages.

Haaaaaaaaaaaaaaaaaaaa! !

Olumyco:


Haaaaaaaaaaaaaaaaaaaa! !

lol i started with C++, then Java and C# so JavaScript syntax took me the longest and compared to others it's easy to structure my code because of strict type, but mehn in JavaScript it was hard for me took me years to master it but with TypeScript i can code like C#.

Also fear not JavaScript Syntax is 100% valid in TypeScript, TypeScript is just a superset of JS only thing i fear is debugging but TypeScript aligns with ES6 so no wahala. Come to the dark side

JavaScript or bust, bro.

Nice one from you Olu

Nmeri17:
Nice one from you Olu

Thanks bro

Olumyco:

Thanks bro

uwc. Ermmm...isn't NativeScript worth mentioning?

Nmeri17:
uwc. Ermmm...isn't NativeScript worth mentioning?

Yea Nativescript is anoda strong JavaScript framework. It's worth mentioning. Though it's drive in d mobile industry is bin contested by react native. React/React native is anoda beast .....

Olumyco:


Yea Nativescript is anoda strong JavaScript framework. It's worth mentioning. Though it's drive in d mobile industry is bin contested by react native. React/React native is anoda beast .....

Oya naa. maybe you should update the list there for the many that don't know about it

Why does react native topple NativeScript

I salute all you web developers and app developers in the house.

Olumyco:
JavaScript Frameworks, Library and Tools

React
React is this year’s favorite JavaScript project! Everyone seems to
be talking about ReactJS. Every conference I have been to in the
last year had at least a couple of talks on React and other libraries
in the same family ( Flux , Redux ) React is open-source and
developed mostly by Facebook with contributions from other major
tech companies.

Please don't forget to invite for the next conference you will be attending.

WafiJoe:
I salute all you web developers and app developers in the house.



Please don't forget to invite for the next conference you will be attending.

Lol

I no go d conference myself o.

Rami Sayer - the "putter" of the article did

NativeScript Framework added....

Olumyco:


Lol

I no go d conference myself o.

Rami Sayer - the "putter" of the article did

Okay boss. Nice write up anyway.

Sails added.....

What about NodeJS?

in any case sha lemme put my own framework written from scratch by my self its called tigerjs, its a full-fledged library with many advanced modules like an Iterator modelu, an IO module, a utility module, widgets module(s) amd much more.. see it here https://sourceforge.net/projects/tigerjs/

hope u guyz wouldn't mind taking it for a spin, i have actually used it on an already released project and its the only library i needed.

stack1:
in any case sha lemme put my own framework written from scratch by my self its called tigerjs, its a full-fledged library with many advanced modules like an Iterator modelu, an IO module, a utility module, widgets module(s) amd much more.. see it here https://sourceforge.net/projects/tigerjs/

hope u guyz wouldn't mind taking it for a spin, i have actually used it on an already released project and its the only library i needed.

Wao! U mean U did that urself..... kudos

I can see d library does many tins.....

But what do u mean by Fx library and small memory footprint......

Olumyco:


Wao! U mean U did that urself..... kudos

I can see d library does many tins.....

But what do u mean by Fx library and small memory footprint......

the Fx module allows you apply lots of animation and transition effect to an element via script, see the conntained documentation for examples, small memory footprint means it doesn't signigicantly increase the memory usage of the page its running on, i actually did bemchmarks and compared with sench and dojo libraries...

stack1:


the Fx module allows you apply lots of animation and transition effect to an element via script, see the conntained documentation for examples, small memory footprint means it doesn't signigicantly increase the memory usage of the page its running on, i actually did bemchmarks and compared with sench and dojo libraries...

Wao! nice one.

Try and put it on Github and give it heavy documentation

Olumyco:


Wao! nice one.

Try and put it on Github and give it heavy documentation

wouuld definitely do that, thanks