Our Approach

The idea of writing code that runs on Web as well as native iOS AND Android was once unthinkable. It usually meant having 1 product with 3 completely different code bases and 3 completely different developer teams. All 3 of which will likely run into different technical challenges, be ready on different timelines, and deploy features at different times. React Native and React offer a unique opportunity to maximize code reuse and cross platform consistency. Instead of 3 separate development teams across 3 separate domains we only needed 1 coordinated approach. The biggest challenge in sharing code between React Native and React is at the presentational layer. React uses html and React Native does not. Additionally Web must consider device responsiveness where native mainly has to worry about portrait and landscape mode. However, all the non-presentational business logic can be implemented the exact same way across React and React Native. The network layer, API requests, redux state management actions and reducers, utility functions, etc all of that is just pure JavaScript and can be implemented line for line identically across Native and Web. In order to reduce development time and keep functionality and architecture consistent across platforms, we utilized npm packages that the consuming Web and Native applications could utilize while we let the consuming React or React Native application handle the UI with more fine grained detail with styled components. This created a natural separation of concerns and kept native and web code bases coordinated for with similar architecture and on time releases.

Tools Used

• GraphQL

• Styled Components:

• Cypress & Detox & Jest:

• TypeScript:

• React Hooks

Test Driven Development

We used Cypress and Detox as our automated testing frameworks. Cypress for Web and Detox for Native. Prior to writing any new code for a feature, we designed automated tests then we would write the code to satisfy those tests. This went a long way to improve QA bottlenecks, reduce time spent on regression testing and gave us confidence in each release. Using CircleCI all end-to-end tests would be to be passing before any new code could be merged.

Outcomes

So instead of 3 teams we had one coordinated team that was able to launch ahead of schedule for every major release. Personalization features and user experience remained consistent and launched in parallel across web, iOS, and Android platforms. Over the course of the year, active users increase from below 100k to over 750,000 active users.

Major Releases

Streaks

https://www.fender.com/play/pages/streaks-announcement

Practice Mode

https://www.fender.com/play/pages/practice-mode-announcement

Favorites

https://www.fender.com/play/pages/favorites-playback-speed-and-full-song-lessons-announcement

App Redesign

https://www.fender.com/play/pages/path-enhancements-march-2020-announcement

Tone

https://www.fender.com/play/pages/announcements