Tech Holding | Fender-React Native Shared Code

Fender-React Native Shared Code

Fender partners with Tech Holding to build a personalized user experience for their flagship product, Fender Play, using React Native shared code.

Challenges

Increase user retention and engagement for Fender’s flagship digital product Fender play (subscription application for users to learn to play guitar.)
Develop continuous integration and delivery across Web, iOS, and Android.
Needed engaging features that personalizes user experience across multiple platforms.

Solution

Build personalized learning experience across all devices by using React and React Native.
Shared code between Native and Web to improve development time and cross-platform consistency.

Benefits

Utilize React Native and React for 1 coordinated approach as opposed to 3 separate code bases and 3 separate development teams.
Developed continuous integration and delivery across Web, iOS, and Android.

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

Other Case Studies

USC Keck School of Medicine “Find a Provider” Search Flow

Tech Holding rebuilds the USC Keck Medicine 'Find a Provider' search flow and provider data API layer.

Happiness Factory

Happiness Factory is an app we came up with to do a little good for the world. It came to us after reading a book by Mo Gawdat called Solve for Happy. It was very apparent to us that in order to be happy one has to be surrounded with a group of people who are happy and has to take positive actions daily to get to this happy state. Thus Happiness Factory was born.