Overview of front end javascript frameworks

Front End Javascript frameworks and how to choose one for your project

Why do we need front-end frameworks? #

The first question that comes to mind for developers new to front end development and Javascript in general, is why do we need a framework like React/Angular/Vue?
If you have this question, make sure to take a look at this (link to article 'Implementing a todo list with vanilla JS') article to get a sense of how messy things would be if we did not have UI frameworks to depend on.
UI frameworks help us with things like optimizing DOM manipulation and handling complex state management.

Let us take a look at the most popular Front End frameworks, and consider use cases when you would consider using each one of them.

React #

React is a declarative component based library for building user interfaces. It is highly efficient in updating and rendering the right components when the underlying state changes. There is support for server side rendering and mobile app development (using React Native). Note that react is a javascript library as opposed to a full-fledged framework like Angular. You can of course plug-in additional libraries like Redux, React Router, etc to make it work like a framework. While this allows a lot of customization, it can be overwhelming for beginners.

When to choose React:

1. Complex single page applications which require state management.
2. Hybrid apps that need to work across platforms (web, mobile)

Angular #

Angular is a Javascript framework that is used for developing efficient single page applications. It is built on typescript, and has multiple features like component based framework for building scalable apps, collection of libraries for routing, state management, client side communication, and more. And there are multiple developer tools available that support Angular development.

When to choose Angular:

1. Enterprise grade single page applications
2. When you need a batteries-included full-scale javascript framework, with minimum configuration setup

Vue #

Vue.js is a progressive javascript framework. As opposed to monolithic frameworks like Angular, this is more incrementally adoptable. The core library is focused on the view layer and there are multiple supporting libraries and tooling options to develop powerful single page apps with sophisticated state management and other things you expect with a SPA framework. In some ways Vue.js is similar to Reactjs.

When to choose Vue.js:

1. Single page apps with state management
2. Integration with existing applications

Ember #

Ember.js is a javascript framework used for building modern web applications. It provides a robust set of scalable UI architecture with great tooling powered by their cli. Ember provides a complete framework that includes build pipeline, testing, data management, testing and performance management to get started with web apps without having to worry about tooling and plugins.

When to use Ember:

1. When you need a complete UI framework with tooling included and opinionated architecture patterns

Backbone #

Backbone.js is a JavaScript library that provides models with key-value binding, collections and views with declarative event handling that are all backed by a persistence layer via a RESTful JSON interface. Backbone is a UI view layer library that is mostly useful if you are trying to replace jQuery.

When to use Backbone:

1. You need a lightweight JS layer with strong model-view structure that is backed by a REST API
2. Replacing jQuery in legacy applications

Preact #

Preact.js is a lightweight alternative to React with the same API. React uses the same Virtual DOM abstraction similar to react and works as expected with other libraries. Preact can be used directly in the browser without any transpiration steps.

When to use Preact:

1. When you need a high-performance lightweight library that confirms to the React API
2. Replacing jQuery in legacy applications

Comparison #

In depth comparison provided on the Vue.js website