Skip to content

Angular js to React transition timeline

Adam Pelle edited this page Feb 20, 2020 · 1 revision

Goals

This project is going through a major refactoring which final goal is to ditch angular js in favour of React & Typescript. As majority of this codebase is in angular, rewrite is not an option, we rather do it incrementally.

Milestones

1. Create infrastructure [COMPLETED]

Goal: infrastructure is ready to use React & Typescript

We need a solution which lets react, typescript and angular live together and bundle everything together. As a side-quest it would be nice to add 3rd party dependencies under package control and move out from the repository. Webpack supports all our needs by loader infrastructure, we need to create custom loaders such as slim and erb (rails related). Using webpack it's possible to replicate the old middleman based build process and improve on that by introducing versioning.

2. Migrate UI components [IN PROGRESS]

Goal: stateless UI components created and optionally some service ported to Typescript

As a result of previous step we can use React components in the project. As a first step I suggest to move UI components only to react components whenever we introduce any change in them. This involves identifying components first using single-responsibility principle on angular templates (this can help: https://reactjs.org/docs/thinking-in-react.html). When we see a connected angular service to that component which is well isolated and does not have many dependencies, we can port that too a plain simple Typescript service using modules.

Testing: expose any smaller filters or services to angular and go through via karma tests, we don't test UI components.

3. Migrate Services

Goal: we have stateless UI components let's create the glue between them

We need to establish an orchestrator layer above the UI components, so essentially we are replacing angular services with plain typescript ones and smart components (or hooks) (following this pattern: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) whenever we change any logic.

Testing: figure out how can we test angular and typescript services together without exposing them back to angular flow.

4. Finish migration

Goal: we port everything to react and Typescript

By this time we should only have very small number of angular code, let's finish them.

Testing: remove karma entirely from testing procedure.