-
Notifications
You must be signed in to change notification settings - Fork 21
Angular js to React transition timeline
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.
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.
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.
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.
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.