Our working hours are:
7:00AM-8:00PM GMT

Now is 12:25 PM
Minsk time (+3 GMT)

We are working,
and you can call us:
+375 29 620 03 03

Feb. 13, 2019

GRADUALLY Migrating from AngularJS 1.x to ReactJS

Angular vs React

1. Starting point

You have Angular 1.x on your project. It’s functional and works well. Ok. It’s very good. But just imagine that you can beat your competitors with frontend part of your product that has:

  1. Less bugs
  2. More often version updates
  3. Less memory leaks
  4. Simplified development flow that сan cut costs

For these competitive advantages you need at least:

  1. Support of ESMA 6+
  2. DOM garbage collector
  3. Marvelous Debug tools extensions

One of good options is to move to ReactJS+Redux. But this means that you need to have both Angular team for existing app and ReactJS team for new app. Complex and expensive…

But we have a solution!

2. Solution

After some investigations, we implemented interesting architecture based on AngularJS templates with React/Redux components. According to this approach, we can maintain Angular old code adding at the same time new features using ReactJs. Easy and no additional expenses!

3. Solution explanation

As we all understand - we can’t drop existing code we need to migrate gradually, writing new features in new framework, while existing Angular code parts could be replaced but ReactJs + Redux when there is need. But we first need to find a solution to a few problems:

1.React components & AngularJS templates bundle

Here a 3rd-party library react2angular will help us. This library let us insert our React components in AngularJS templates, so we can work with it in any of AngularJS templates:

                        
import { react2angular } from 'react2angular';
import TopBarMenu from 'src/views/components/TopBarMenu';
angular.module('angulartoreact').component('TopBarMenu', react2angular(TopBarMenu));
                        
                    

2.React components & Redux store

We should use a Provider for a correct context usage in our components, that are compose our application. We will use ng-redux library, that will let us pass the store to React components:


import { rootReducer, rootEpic } from '../../src';
angular.module('angulartoreact').config(($ngReduxProvider) => {
  const middleware = createEpicMiddleware(rootEpic);

  $ngReduxProvider.createStoreWith(
    rootReducer,
    [middleware]
  );
})

Let’s rewrite previous code:


import { react2angular } from 'react2angular';
import TopBarMenu from 'src/views/components/TopBarMenu';
angular.module('angulartoreact').component(
  'topBarMenu',
  react2angular(TopBarMenu)
);
angular.module('angulartoreact').controller('TopBarMenuControl', TopBarMenuControl);
function TopBarMenuControl($ngRedux) {
  this.store = $ngRedux;
}

And so now we can send Redux store as a property to our React components.

3.React components & routing

React2angular will be useful again:


import { react2angular } from 'react2angular';
import UserSettings from './components/UserSettings';
angular.module('angulartoreact').component(
  'userSettings',
  react2angular(UserSettings)
);
export const rootUserSettings  = {
  url: '/user_settings',
  views: {
    'user-settings-view': {
      template: '< user-settings store="store"/>',
      controller: ($scope, $ngRedux) => {
        $scope.store = $ngRedux;
      }
    }
  }
};

4. How can we help

We can provide you experienced ReactJs developer or team for implementation of this solution.

Author: Ivan Mishur

Return to blog

Tomorrow Ready

Resources on Request

Make Request

Thank you for contacting us. We will be in touch with you within 24 hours.
Please verify given email.
Please enter your message.
Thank you for subscribe.
Please verify given email.

Let's keep in touch!

Sign up for our exclusive mail list and be the first to receive our exclusive offers!