Why We Moved From Angular to React

Why we chose to move 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.

The MVC model

Now add in more models and views like in the case of any webapp:

The MVC problem

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

There is just an explosion of command flows, and it is hard to tell if there is any infinite loop that might be causing a cascading effect.

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.

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

 

But on Sunil Pai's recommendation, we started exploring React more. A quick look into 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

The React model

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 have to be handled seperately.
  • 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 frontend 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 uglify, minify-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 from our migration are amazing. With extremely modular and reusable components, debugging has never been easier and the development time has decreased significantly.

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.

Further reading:

Why I Ditched Angular for React
Why We May Ditch AngularJS For React
From AngularJS to React: The Isomorphic Way

Did we mention that we are building our frontend team? If you share our passion for building great products, APPLY NOW.

Engineering
Leave a Comment