It all started with a five minute lightning talk at our Product, Design, and Engineering offsite in January. I did a small demo of Storybook and how it could help bridge the gap between product managers, designers and engineers. My presentation and working demo went well, but there was a catch — my demo featured React components, but our front-end framework was AngularJS 1.6. I demonstrated that we could inject my React component into our AngularJS application with react2angular to provide a way for us to incrementally migrate our front-end. Then, the flood gates opened.
The lightning talk spurred a lot of interest and discussion. We already had a lot of in-house knowledge about AngularJS, and the development team was pretty split between choosing React or Angular 7. We settled on writing two proof of concept (POC) apps, one in React and the other in Angular 7, that would recreate a small section of our admin app. We would then gather the developers who had strong opinions and discuss the challenges around each implementation. We set a two-week deadline on the POCs. The section of the admin app that each POC would recreate required multiple nested routes, calling APIs, form validation, and a paginated list. A lot to do in two weeks!
The React POC came together nicely, but we felt that a lot of flexibility for migrating came from react2angular. Thanks to this library, we could slowly build new components and inject them in the app. We could build full react pages and have the ability to place existing angular 1.x components into these react pages if desired. We also noted that our Angular 7 branch had added or changed a lot more files than our React one.
An example of how we injected our
<ProductManager> component into our Angular controller:
And of course the updated template file: