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

    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

    Our Partners

    By using this site, you agree to thePrivacy Policy.