React Guild Week Vol. 2
It was the third week in June, and Guild Week was once again upon us. While our (northern hemisphere) users were dreaming up glorious post-work routes for the summer solstice, the Web Guild had our own plans to leave our mark on the summer. For one week, we would be pressing pause on our regular product work. Instead we would focus on projects to improve our underlying technologies and frameworks.
Our first Guild Week was all about learning React. While this narrow focus allowed our team to take critical steps toward integrating a modern JavaScript framework into our main Rails application, we had several other projects we wanted to delve into this time around. Therefore, we divided ourselves into smaller scrum teams with about 8 of us focusing on React for the week.
Goals for the Week
- Convert some of our Backbone/CoffeeScript UIs to React
- Expand React knowledge among Web Guild members
- Establish clear patterns for writing React at Strava
In our first meeting as a React team, it was clear the major goal for the week was getting code to production. We wanted to apply what we learned in the previous guild week in order to establish clear patterns for what React looks like at Strava. To that end, we selected three three different web pages/web views to convert from Backbone.js to React.
It was our hope, that these projects would not only result in the integration of React into our codebase, but also allow us to deepen React knowledge across the Web Guild by involving members who do not work in React on a day-to-day basis.
Office Hours: Can I get a React(ion)?
We quickly set to work — some of us working solo, others teaming up to take on React. In an effort to foster collaboration and surface opportunities for knowledge transfer, the React group had daily “office hours.” These office hours ended up leading to valuable discussions around the advantages and disadvantages of adopting certain code patterns and libraries like Redux.
Heading into the week, we were unsure that the scope of these smaller React projects warranted the use of a state management library like Redux. However, office hours discussions lead us to concluded that Redux would be a valuable tool for Strava long term and having examples of Redux in the code base would be advantageous for future development.
Challenges: Managing the Current State of Things
One of the major challenges we ran into in over the course of the week had to do with inconsistencies in existing code. When converting the gear page (pictured below) to React, we discovered that the Shoe and Bike views were backed by two different endpoints that handled the data very differently. This made building reusable components challenging. In a code base that is 9 years old, there are similar inconsistencies that could slow down React development in the future because they require a preliminary refactoring of the underlying code.
Onward: A Proactive Approach to React
Overall, Strava’s second guild week was a great success.
On the React team, we:
- Converted our bike/shoe management UI and starred segments UI to React components
- Integrated React into our segment explore view
- Introduced Redux (for the first time in the case of many on the team)
- Solidified key React patterns to use in future development
With checkmarks next to all of the goals we set out to accomplish at the beginning of the week, we were proud of the work we had completed and what it meant for the future of React at Strava. This week was proof that not only was it possible to convert full pages to React fairly quickly, but also React’s componentized system allows us to seamlessly convert small pieces of a page without having to convert an entire page in a single refactoring. Completing a full page overhaul can be a large undertaking, but piece-by-piece upgrades are well within reason for our normal development cycle. While there is still a lot of work to be done to build our component library, flesh out React testing in Jest, and update internal React documentation, guild week allowed us to commit to a future in which all new front end JavaScript code will be written in React.
