Every week or other we find a new javascript library taking the web community As web is very versatile and ever-growing field and its impossible to do a survey of every major javascript framework and liberary but we will share one of the most famous and all in one frameworks and libraries for front end development.
- We tried our best to integrate almost all popular frameworks and libraries.
- Keep updating the frameworks and liberaries it has best cross browser and device compatible.
AngularJS
It is the most popular open source framework supported by google. It is used by various companies & developers worldwide like Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, and Google etc. Angular JS is an MVC-type framework. It gives two-way data binding between models and views.
When to use AngularJS? When you are building a complex web front-end application and need a single modular framework to work with
React
Reactjs is the other popular JavaScript framework. Its an open source and developed mostly by Facebook and other tech companies globally. React says that they are a JS library for user interfaces. It provides a component layer that makes easier to make UI elements and combine them together.
React is used when we want a powerful View layer but don’t need a vast framework for the application or when you are trying to build an isomorphic web framework.
Backbone
Backbone is a simple yet powerful framework that fits into a single javascript file. Backbone has been developed by Jeremy Ashkenas from CoffeeScript and Underscore fame. Backbone is specially used by the people who are looking for simple structure for their small web application. Backbone provides a full MVC framework with routing. Backbone has everything you need to build a single page application.
Ember
Ember shows that it is a framework for creating ambitious web applications that doesn’t waste your time. It is very opinionated and makes many choices for you. It is also a MVC framework; it includes a templating and viewing engine that automatically updates when data change like Angular, Backbone & react.
When you just want a framework that just works.
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.
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