Why Migrate From Angular to React in 2019

Why Migrate From Angular to React in 2019

First things first, it is important to remember that Angular is a framework and React is a library, which influences the way we compare those two. Obviously, the learning curve with React will be smaller and blending it will other libraries will be easier. Moreover, it allows the twelve-factor methodology to be applied. Using Angular forces you to do everything the ‘Angular way’ but let’s not get ahead of ourselves.

Why Migrate to React?

There are many reasons behind the decision to migrate from Angular to React. Most of them are related to it being closer to JavaScript and taking full advantage of modularity.

React is an innovative place

React consists of building blocks, giving you the flexibility to pick and choose the ones suitable for the particular problem you are experiencing. They are also easy to exchange if you ever feel the need to. This exchangeability of React allows experimenting with novel approaches and get them adopted by the community, making React innovative.

Redux and MobX can be used for state management while the React core can be exchanged for other building blocks like Inferno and Preact.

Such approaches are impossible with Angular, since it provides its own solutions.

JSX syntax blends well together with javascript

JSX is React’s own syntax for component building that can be mixed up with JavaScript and HTML. JavaScript can be used for composing and manipulating DOMs and you can make use of its built-in functionalities like map and filter. This way the full potential of JavaScript can be used within your HTML code. This can speed up the development time even 4x.

On the other hand, we have Angular, which does not like to mix logic and view, even though there is a way to achieve the same things as in JSX.

React has a simple API

React components come with lifecycle methods. There are only 9 of them that you and use to control your component. Usually, you need only a couple of them even in the case of mature React applications.

Apart from that, you should know a React ES6 class component method setState() which is used to update internal components state. Obviously, there are more concepts like props and state, but you can read all about them in the official React documentation. With React you get no steep learning curve. It essentially is a view library that was made to solve one problem. And it does it well.

Lightweight Components

React has two different ways of defining components: functional stateless components and ES6 class components. Even though functional stateless components are only functions, they come with no boilerplate, which means you should use them when access to the component state or lifecycle methods is necessary. By doing that you are making sure that the components are lightweight and you are keeping them small while being reusable.

Functional Programming

Functional programming is a declarative programming style where everything is bound in mathematical functions style. This type of programming feels natural in React and its ecosystem, mostly because of its similarity to JavaScript. In React, functions should be defined with no side-effects making them predictable - since they always return the same output - and composable - because functions of higher order can be used to compose them into each other. React is considered being the leader of functional programming among other JavaScript libraries.

Unidirectional Data Flow

Contrary to Angular, React does not have two-way data binding. It follows the rule of unidirectional data flow, which means that the process of debugging is a lot easier. In React, child components are nested within higher-order parent components.

A component deals with updating the internal component state through setState(). What is more, React gives you complete control over the native HTML elements. All that makes React state management predictable and maintainable.

Community

The community is also an important factor you should consider when choosing a framework. The React people are constantly supporting and encouraging each other. No matter if your contribution was related to a blog article or the implementation of a new library. Where there are people there are answers. In a community, nothing goes unresolved. Somebody somewhere will have an answer to your problem or will help you come up with one. What is more, the people standing behind React crave innovation and are experimenting every day, that is why new solutions are welcomed.

Obviously, that that goes not only for React but Angular as well, and every other community. Every programming language has amazing people present behind the scenes, who day by day work on improvements and are ready to help you anytime. However, in my personal experience, there are more high-quality 3rd party libraries in React then in Angular, which goes to show how popular React really is.

Migration Strategy

There are a couple of different approaches to migration from Angular to React. You can decide to work bottom-up or top-down. In a bottom-up approach you will embed React components into Angular application, but have to bear in mind that this can the state management layer migration. On the other hand, in the top-down approach, you replace big chunks of code, usually URL based, with React ones. This means having two separate state management layers.

A very popular one is the so-called Strangler pattern which consists of modularizing a monolithic architecture and slowly converting it over time. This method includes the creation of a new, parallel view and allowing the two views to coexist to later remove it as users stop using it. To start applying this approach we first have to identify the bounded contexts in the application design. It is important to choose a bounded context that is the smallest and least expensive to refactor.

Summary

The goal of every library or framework is to provide tools and solutions that increase productivity and be adaptive to ongoing changes in the industry. React is an amazing library giving developers lots of possibilities. It introduces innovation thanks to its building blocks, offers lightweight components and promotes functional programming. However, if you are thinking about migration from Angular to React make sure to consider the business value and costs it will inevitably entail. Thankfully, with React you gain access to a much larger community and 3rd party libraries which should be able to cover for the migration costs.

Related articles