Angular to React: tips on a smooth migration

AngularJS is a pretty cool framework by Google — it provides many great features, like routing and two-way data binding. We used it to create the first version of our platform, but today, we see its limits and want to migrate our platform to ReactJS.

Angular helps creating single page applications and renders the content on the client-side, but is utterly bad in terms of SEO referencing. We want to have something that renders our content on the server-side at the first load, but provides the experience of the SPA applications after that: an isomorphic app. We also want to come back to Javascript, pure javascript, not an Angular abstraction, and further control our data stream.

A little more about React and its environment

React is an open source library built by Facebook.

React provides a high performance client and server side rendering with a one-way flow for data binding. It’s not a framework, that’s why we’re talking about React and all of its environnement friends.

1.Flux:

“Flux is the application architecture that Facebook uses to build client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern than a formal framework” — Flux

We chose Redux, as a flux implementation, a predictable state container for JavaScript apps.

“As the requirements for JavaScript single-page applications have become increasingly complicated, our code must manage more state than ever before. This state can include server responses and cached data, as well as locally created data that has not yet been persisted to the server. UI state is also increasing in complexity, as we need to manage the active route, the selected tab, whether to show a spinner or not, should pagination controls be displayed, and so on.

Managing this ever-changing state is hard. If a model can update another model, then a view can update a model, which updates another model, and this, in turn, might cause another view to update. At some point, you no longer understand what happens in your app as you have lost control over the when, why, and how of its state. When a system is opaque and non-deterministic, it’s hard to reproduce bugs or add new features.“

2.Webpack, a module bundler.

Webpack takes modules with dependencies and generates static assets representing those modules.

Refactor time

How do we refactor our entire platform? Several methods are available. To prepare, we often go to React and JS meetups. One of them is exactly on our topic: how to migrate your website to React. The conclusion of the speaker is to migrate little by little, for months, and maintain all this crazy stack.

While that’s great advice, we decide against it. We use the summer to recode the entire platform in a rush and start form zero. We keep no files from the previous version, we create this entire new project. It takes four developers, and three weeks later here we are! Here’s how we made it work.

A little preparation

Before we started coding, we “printed” all of our current website to have a global view. That allowed us to easily analyse what we want to redo. This second version was going to be built on the UI foundations of the old one, with lot of little changes in UI-components to make a better user experience. So the key idea was to abstract website pieces in order to make re-usable multiple component.

To make all of this more readable, we drew the component hierarchy. In React documentation, they call this “Break the UI into a component hierarchy”. The first thing you want to do is to draw boxes around every component (and subcomponent) in the mock and name them.

After the component hierarchy was set up, we took the time to work on our redux store.

The redux store holds the whole state of your application. We have to think about how our data will be structured and how our cache will work.

The first line of code

The first step was to migrate our stylesheets and in the same time to start a real web-styleguide. We took the opportunity to restructure our whole style, and to only keep some global component: typography, layout, buttons, input, etc. All other component will have their own stylesheet attached to them.

In order to have a great project structure, we based our architecture on one of our friends boilerplate: minus a “React / Redux isomorphic starter, focused on minimalism and beauty”.

After that, the coding begins

We split the tasks between the four of us. It was important that each member could move forward without the work of the others. Some of us focused on dumb components and others on smart components.

One very important thing in our project was authentication. Due to an isomorphic app, backend and frontend share the same code, but some code had to be specific, like the cookie handle. So an isomorphic authentication was not really easy.

And now?

Thanks to the isomorphic app, we have an increased performance, mainly thanks to the initial pageload speed. The SEO problem is no more, single page app is crawlable. If you want other benefits due to isomorphic app, you can check this: http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/. It’s a beautiful world.

With this second version, we’ve set up an advanced smooth rendering and navigation of our pages.

To do so, we’ve rendered content as quickly as possible, so we’re never stuck on a page waiting for data.

To achieve this, you need to flush async fragments. For instance, on this page, the structure loads first, then bloc number 1, and finishes with bloc number 2. Users can navigate smoothly and are never blocked on a page:

But one of the greatest benefit of our migration are the improved micro-interactions. All micro-interactions are easy to code with this new stack and really smooth for the user. You can fork a bot on the explore page. There is always an indicator of forking on the bot, wether you navigate on the explore or go back to your profile.

And that’s about it. So if you’re looking to migrate from Angular to React, go for it. It’ll be worth it.

We are working now on a big feature on the platform for October, and the front developers team is growing up, so if you want to know more, drop us a mail!

Jasmine ANTEUNIS — Recast.AI

This post was originally published on our blog. If you enjoyed it, you might also like: Datasets, the gold of Machine Learning