Migrating from Angular to React: Services Injection and Dynamic Modals

When building a large scale web app using Angular 1, the app may have some performance issues since Angular (as we all know today) just can’t handle the scale.

For us, Angular’s main issue was that too many watchers were living on the same scope, which was causing poor user experience.
Click here for more about Angular’s issues and some solutions
Click here for more about counting watchers

Eventually, we decided it was time to migrate our codebase to React and were left with one question — how?

This post will focus on the integration between Angular and React and how we solved some of the main problems we encountered during our migration process: services injection and rendering dynamic modals.

React & Angular can play together

Obviously, rewriting the entire code base is not an option so migrating one component (directive) at a time is the way to go.

ngReact is an Angular module that allows using React components within Angular — this is the first step needed to start the migration.

Let’s take a look at this simple Angular directive called “Hello World”:

Now let’s take a look at the same directive, written in React:

Here’s the magic!
Check out the directive registration bellow the JSX code.

When adding HelloWorld to module, we’ll be able to use it in Angular

Our index.html file can now look like this:

Angular services Inject into React

Angular directives use services, for example, an API service to contact the API. To inject the service to the directive requires the following code:

In order to use the same service with ngReact, we’ll have to pass it as a prop to our HelloWorldReact directive. This also means Angular’s parent scope of HelloWorldReact must be injected with the service:

If we are being realistic, making sure the parent scope is injected with any service we are going to use and then passing it to the directive, would be both annoying and wrong.

The best solution is to add a function so we can easily “inject” services anywhere we want.

Now we can do this and use any service we want anywhere in our code.

React Dynamic Modals

Before the migration we were using UI-Bootstrap for Angular. This package includes a great modal service, and which allowed us to open any type of modal programmatically.

When migrating to React, none of the Bootstrap packages had this ability.
Having to explicitly render the modal (hidden) would look like this:

Imagine this page would have multiple modals, and other pages may be using the same modals — this would cause a HUGE code duplication.

Let’s see how we can use templates and open our modals programmatically.
We’ll use 3 files:

• ModalService.js will render the modal to the DOM using renderModal function which will get the actual modal from ModalInstance.
• ModalInstance.jsx will create the React modal according to the template requested by ModalService.
• ModalStore.js will be in charge of all general modal logic, currently including only hiding the modal and removing from the DOM.

renderModal function will add the modal to the body

render function will return the selected modal template to renderModal function based on modal’s name

Note: Our React app is using MobX for state management, which allows showing / hiding the modal according to showModal param.

All that’s left is creating the actual modal. Here is an example using ReactBootstrap’s modals, so we can call it when we need it.

HelloWorldReact will create an instance of ModalService and will trigger renderModal function:

Our React web app can now render modal programmatically — with no need for any code duplication!

How to proceed?

Now that Angular and React play well with one another and we can use all of our services until full migration, we can move forward to the next question: What should we migrate first?

We decided to migrate the independent components first, as they have no inner angular directives.

<div>
  <angular-directive></angular-directive>
<div>

Once we had enough migrated components, we were able to migrate directives of this sort:

<div class="complex-directive-name">
  <angular-directive1></angular-directive1>
  <angular-directive2></angular-directive2>
  <angular-directive3></angular-directive3>
  <angular-directive4></angular-directive4>
</div>

Conclusion

The migration from Angular to React is a long journey that really tests the code quality and architecture of the app.

Don’t be afraid to make big changes, taking into account the next time you’ll have to migrate (Vue.js?). I believe vanilla Javascript should be used when possible to avoid unnecessary dependencies and make the transition as smooth and as easy as possible.

This post tackled the main issues we had during our migration. Hopefully this will help you also tackle similar issues.

Good Luck! :)

Looking for a chance to overcome challenges with creative solutions just like this one, with a talented and results-driven team of developers? Wibbitz is hiring in our Tel Aviv office! Click here to apply.