This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
- Always remember to keep your frameworks & libraries updated. The latest version often has the best cross-browser and cross-device support. You can use tools like this scanner to help determine if an older version is compatible with the largest set of devices.
Alright, let’s get to the list!
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.
More from this author
When to use AngularJS? When you are building a complex web front-end application and need a single modular framework to handle everything.
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.
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.
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.
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.”
map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone and so much more.
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.
LodashCurrent Version: v3.10.1
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.
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.
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
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.
Current Version: v0.13
Grunt & Gulp
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
More hands-on with Web Development
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.modern.IE:
- 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 2015 (from our engineering team and JS community)
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- 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:
- manifoldJS (deploy cross-platform hosted web apps)
- babylonJS (3D graphics made easy)
More free tools and back-end web dev stuff: