How RigUp is transitioning to React

Duane Bester
Mar 14, 2019 · 4 min read

Part Uno

Riggy the Rhino

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.

Photo by Richard Lee on Unsplash

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!

Photo by rawpixel on Unsplash

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:

Once our <ProductManager> component was injected, it became the usual React dev experience (with Routing, Suspense, & Lazy loading!):

This was super clean and easy to reason about. We had no trouble creating components, loading them into Storybook, and testing them with Jest and Enzyme. There were several other factors that helped sway our opinion:

  1. Hiring
  2. Developer ramp-up
  3. Existing React Native mobile app
  4. Easy testing with Jest and Enzyme
  5. Flexibility
  6. Passion

The battle might be over but the war between our new front-end and our old front-end has just begun. We are holding a bunch of small focused meetings around the fundamentals of a great React app. Out of these areas, we bundled the ones that need to come before the others to get developers started as soon as possible. The chart below shows the highest priority areas we’re tackling first from left to right.

Once we have good documentation and examples for these areas, our team can start building! We’ll discuss and add things like Apollo, Redux, Relay, etc as the complexity increases; state management, tooling, and GraphQL are next on the priority list:

One area not listed above, but core to our business, is our design language system. This is being developed in parallel with our design team and will be discussed in part 2 of this series. Stay tuned!

Duane Bester is a Tech Lead for the Engineering Enablement Product Line Team here at RigUp. He focuses on core infrastructure and technology that gives our developers maximum time and ability to focus on their work and deliver great products.

Earlier this year RigUp announced a Series C “… to rapidly expand our products and services in response to a fast-growing customer base,” — CEO and co-founder Xuan Yong. To aid in this effort, RigUp has been hiring a lot of software engineers to aid this effort. The time was coming to transition to a more modern front-end library/framework as it would enable faster ramp-up and development for the team.

Building RigUp

The RigUp Product & Engineering Blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store