Top JavaScript Frameworks, Libraries & Tools and when to use them

It seems almost every other week there are a new JavaScript library taking the web community by storm! The web community is increasingly vibrant, diverse and are moving rapidly on multiple fronts. It would is an impossible feat to survey every major JavaScript framework and library. Instead, I'll 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.

Also:

• Please don't be offended if I does not include your favorite JavaScript thing.
• Always remember to keep your frameworks & libraries updated. The latest version often has the most cross-browser and cross-device support. You can use tools like this scanner to help determine if a older version is compatible with the largest set of devices.

Alright, let's get to the list!

AngularJS

Angular is the popular enterprise framework, the many developers is using to build and maintain complex web applications. Angular ' s popularity is immense, and companies using it was as diverse as Domino's Pizza, Ryanair, ITunes Connect, PayPal Checkout, Google. Angular is a 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 is written.

Angular is an mvc-type framework. IT offers two-way data binding between models and views. This data binding allows the automatic update on both sides whenever there are a data change. IT enables to build reusable View components. IT provides a services framework to allow easily backend-frontend server communication. Finally, it is just plain JavaScript.

When do I use AngularJS? When your is building a complex Web front-end application and need a single modular the 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 is talking about Reactjs. Every conference I has been to in the last year had at least a couple of talks on React and other libraries in the same F Amily (Flux,redux) React is Open-source and developed mostly by Facebook with contributions from other major tech Companie S. React describes itself as a JavaScript library for building user interfaces.

React is mostly, the V in MVC. It focuses 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, it optimizes rendering and allows you-to-render React from node. js. further; It implements a one-way reactive data flow this 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 do I 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 wan T a View layer to go with your Angular, Backbone, or Ember application. Trying to build a isomorphic web framework.

GitHub: https://github.com/facebook/react

Current Version: v0.14.0

Website: facebook.github.io/react/

Backbone

Backbone is a famously simple framework, that fits to a single JavaScript file. Backbone have 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 the framework like Angular or Ember.

Backbone provides a full MVC framework along with routing. The Models allow to key-value binding and events for handling data changes. Models (and collections) can connect to RESTful APIs. The views has declarative event handling, and the Router does an excellent job of handling your URLs and state management. Everything need to build a single Page application without offering too much and without unnecessary complexity.

When do I 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 a opinionated web app framework focusing on programmer productivity. Ember is relatively popular, and the core team includes smart people like Yehuda Katz, who were part of the Ruby on Rails a nd 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 the also an MVC framework. It includes a templating and view engine that automatically updates when the data changes, just like Angular, Backbone, and Re Act. It includes the concept of the web, the extend HTML with your own tags (just like Angular). It also have a routing and model engine that knows how to work with your RESTful API.

When do I use Ember? When you just want a framework, that just works. Use Ember If you do not need flexibility because is 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's single-handedly responsible for making cross-browser sites a reality and for bringing the web to where it's today. WEB standards has been adopted and genuinely respected by most major browser manufacturers and JQuery are one of the Reaso NS why. The mission of JQuery Foundation is "to improve the open web, making it accessible for everyone, through the development a ND support for 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 programme R productivity. It makes DOM traversal, event handling, animation, AJAX so much simpler and easier across all browsers.

When do I use jQuery? Always, unless your 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

Underscore & Lodash

Sometimes comes built-in to JavaScript are just not enough for programmers to be truly productive. There's always a utility function, that's 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 t He built-in JavaScript objects. Both libraries provide over-functional helpers and other specialized goodies; Including functions like maps, filter, invoke, reduce, template, throttle, bind, extend, pick, clone and so much more.

When do I use underscore? When you want a single JavaScript file, immediately augments programmer productivity.

underscore GitHub: Https://github.com/jashkenas/underscore

underscore current Version: 1.8.3

underscore Website: underscorejs.org

When do I use lodash? When you want a modular and slightly more performant version of underscore with easier support for AMD and community Plugi Ns.

Lodash GitHub: Https://github.com/lodash/lodash

Lodash Current Version: v3.10.1

Lodash Website: lodash.com

D3.js

Data Visualization and charting are a common requirement for Web applications. D3.js is the defacto standard when it comes to any data manipulation and visualization. It's one of the most popular projects on GitHub and are used by hundreds of organizations. Plenty of graphing, charting and visualization libraries build on top of D3.

D3 allows-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 is free from any proprietary format like Flash or Silverlight.

When do I use d3.js? Anytime 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 this 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 do I use babylon.js? Whenever you is 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 does 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 is hundreds of beautiful examples in the Three.js showcase.

When do I use three.js? Whenever need a simple 3D visualization the 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 was typically seen as annoying, but it's something, 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 does help you test your code and in different Ways.

Mocha is a JavaScript test framework this makes it easy-to-test the async code in your node module or browser app. Mocha T ESTs can run in series and has the added quality of tracing exceptions to the correct test cases.

Chai is a Behavior-driven development/test-driven development assertion Library of can be paired with Mocha. It makes it simple-to-express what is testing in a readable style.

When to use Mocha & Chai? always! Please test your code and make the world a better.

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

have included Mocha and Chai on the This list, it would is incomplete not to include a Test runner to run these tests or per Haps to set up continuous integration testing. Karma is a tool designed to help automate running your tests against different browsers. It would help you to run your Mocha and Chai tests on all the browsers out there.

Not every browser runs in every platform but luckily there is a couple of free tools you can use to test other browsers, Take a look at Browser screenshots. If you is running on OS X and want to test Edge or Internet Explorer, you can use the This tool for free.

When do I use Karma? Whenever you has a comprehensive test suite for your applications and want to ensure the tests pass in 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 AP I.

When to Phantomjs? When you need to does 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 involve some tasks to improve performance like minification of JavaScript and C SS, compilation of Coffeescript/typescript, unit testing, Lintin. Perhaps you already has a toolchain ready to prepare your website for production and if you don't, you want to use a TAS K runner like Grunt or Gulp. Both has endless plugins to does just about any transformation to your website to get it ready for production.

When do I use Grunt? When you prefer writing the 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 do I 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. ECMAScript were released last summer and many of their new features is implemented in the latest browsers. If you want-to-take a-look at ECMAScript compatibility, you can take a look at the this table from @kangax. You'll notice that the latest versions of Edge, Firefox and Chrome has near-complete compatibility.

We don't live in a perfect world. As developers, we'll need to continue supporting older browsers that does not have the latest and greatest JavaScript feat Ures. We do want to advance the web and improve our code bases. Babel is a JavaScript compiler this compiles the latest JavaScript standard to es5-compliant JavaScript allowing your to RU N on browsers as old as IE9. It has some plugins, it easier to develop with React and even use features that is not part of the specification (e.g. ES7).

When do I use Babel? When you want to use the new JavaScript language features and still support older browsers.

GitHub: Https://github.com/babel/babel

Current Version: 6.1.2

Website: Babeljs.io

More hands-on with WEB development

This article was part of the Web development series from Microsoft Tech evangelists and engineers on practical JavaScript L Earning, open source projects, and interoperability best practices including Microsoft Edge browser and the new edgehtml R Endering engine.

We encourage you to test across browsers and devices including Microsoft edge–the default browser for Windows 10–with Free Tools on dev.microsoftedge.com:

• Scan your site for out-of-date libraries, layout issues, and accessibility
• Download free virtual machines for Mac, Linux, and Windows
• Check Web Platform status across browsers including the Microsoft Edge roadmap
• Remotely test for Microsoft Edge on your own device

More in-depth learning from our engineers and evangelists:

• Coding Lab on Github:cross-browser testing and best practices
• Microsoft Edge Web Summit (from our engineering team and JS community)
• Woah, I can test Edge & IE on a Mac & linux! (from Rey Bango)
• Advancing JavaScript without breaking the Web (from Christian Heilmann)
• The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
• Unleash 3D rendering with WebGL (from David Catuhe)
• Hosted Web apps and web platform Innovations (from Kevin Hill and Kiril Seksenov)

Our community open source projects:

• Vorlon. JS (Cross-device remote JavaScript testing)
• Manifoldjs (deploy Cross-platform hosted Web apps)
• Babylonjs (3D graphics Made Easy)

More free tools and back-end Web dev stuff:

• Visual Studio Code for Linux, MacOS, and Windows
• Code with node. JS with trial on Azure Cloud

Top JavaScript Frameworks, Libraries & Tools and when to use them