Reading: Why We Moved From Angular to React?
React v/s angular
Why We Moved From Angular to React?

We believe connecting great talent to great companies requires every line of our code to be special. And this is the first of many posts to come on the engineering developments from Belong.

Every startup’s fondest dream is to keep building functionality and features and make an exhaustive app. All this, while making an easy and intuitive interface for the end user. However, that’s easier said than done. Initially, we used both Angular and jQuery to get to an MVP. But soon, our front-end started getting cluttered with more logic on managing external dependencies than the actual view logic. The price of maintainability and evolution in the long-run was soon wearing on us and we realized that we had to choose a single framework fast.

The Angular problem

When Angular first came into the spotlight with their MVC (Model View Controller), a lot of people were simply blown away with its two-way binding logic, dependency injections, reusable directives and philosophy of Model as the single source of truth.

There is just an explosion of command flows, and it is hard to tell if there is an infinite loop that might be causing a cascading effect. Also, for every view/model added, the code to manage the communication increases.

Also, Angular did not come with extensive support for AMD or CommonJS patterns. To be fair, much of this is being fixed in the upcoming Angular 2.0. But with no backward compatibility and the scope of release in 2016, we were on the hunt for a good JS framework for our app that could allow us to:

  • Automate the front-end build system
  • Do quick prototyping

How React came into the picture

The world of front-end is very fast-paced and there is a new technology every day with a community to support it.

We started exploring React more. A quick look at Facebook’s React documentation made it clear that React is predominantly the V in MVC. Though, FB provides a library called flux, which helps React play the flux way.

Flux over MVC

Unlike MVC, in Flux, the data flow is unidirectional. So when an action comes in, the dispatcher acts as a traffic control and updates the store. And every time the store gets saved, the view renders again. The dispatcher is the critical part over here; even if the view throws back another action, the dispatcher does not proceed with the action until the store is saved from the previous effect.

Which means that as long as stores are correctly defined and views are listening to stores, all many-to-many relationships between Views and Stores are automatically handled. Because of this, the tedious two-way data binding code could be done away with.

Why React works better

In React, the control is internalized. The state that updates the logic of the state remains inside the state, giving consistency in views, which ensures that the DOM at any given time is a function of state and nothing else.

  • To be fair, most of this can be done on Angular as well with javascript libraries. However, when the models in Angular are updated using external JS libraries, the dirty-checking mechanism of Angular has no way of learning about the change. Which means the view has to be updated explicitly (by running the $digest cycle).
  • Using third party tools, integrating npm packages is also easy since you don’t need to write wrappers around them like in the case of Angular.
  • Using build systems like webpack, gulp and grunt for ES5 in React is much simpler than compared to Angular. As, Angular does not provide easy walkthroughs for build systems and module patterns.
  • All dependencies can be handled using Browserify and the ordering is unambiguous. This is a clear advantage that React (with Flux) has over Angular where dependencies are loaded in order which again has to be handled separately.
  • React has a pure JS approach. When used with the JSX library, which allows you to define the HTML view (this also takes care of cross-browser issues) in the js file itself. You can also add state-specific styles as JSON objects to the view as well. For example, it allows the developer to have one Dropdown.js which contains all the HTML, the drop-down specific CSS, and the js in one file, which helps in the development process.

How has it been so far

With React unit testing is much easier. Facebook’s engineers have developed a testing framework called jest that gels well with React. Jest automatically mocks dependencies and also runs tests with a fake DOM implementation.

Our front-end development cycle has improved drastically with more features being pushed in lesser time with lesser effort. What once took us a week is now taking up only a day.

In the process, we also explored and added more ammunition to our front-end stack by using:

  • Tools like browserify and npm to modularize our code
  • Webpack and react-hot loader for super fast development
  • Other tools like uglifyminify-CSS etc for production specific builds

What’s next for Belong

Going forward, we want to use ES6(and even ES7) more along with transpilers like babel and see if that helps.

At the moment though the results of our migration are amazing. With extremely modular and reusable components, debugging has never been easier and the development time has decreased significantly.

But having said that, we are continuously exploring better options which can improve the code even further. Because being better than what we were yesterday is our motto.

Angular and React are completely different instruments, but both great for writing single-page applications. You can find a lot of information about AngularJS and ReactJS, examples of code at

View React and Angular portfolio –

for any query send us a mail at

Inquiry Now

70% Complete

Welcome, tell us about your project so we can get you a quote.

First, what is your idea called and what do you need help with?

This’ll take about 1-2 minutes.

What are we building? (Select all that you need)

Are we starting from scratch or building on top of an existing product?

Ideally, when would you need us to start by?

Tell us what you’re building. Feel free to include features, links to sketches, similar products or competitors, and existing apps.

What is the max budget you have planned to invest in the project? We’ll strive to make it work within your range

Schedule your call to discuss the project’s features, costs, and timelines. Select a date and time that works for you.

All done. Where would you like to receive your quote and where do we reach you for asking questions?

Thank you!

We look forward to reviewing your project and discussing it with you at

3:30pm EST on
Monday, Jan 2, 2018.

If you need to reach us earlier, you may do so at or +91-9806719331


Are you sure you want to cancel?

Your progress will be lost and we won’t be able to give you a quote on your project.