Building React Products At Scale &#8211; Lessons From Coinbase
“The transition from native to React Native did not happen overnight.” Earlier this year, the cryptocurrency exchange platform Coinbase successfully migrated its iOS and Android apps to React Native, an open-source mobile application framework developed by Facebook. The framework is typically used to create applications for Android, Android TV, iOS, macOS, tvOS, Windows, etc. San Francisco-based Coinbase caters to over 56 million users, 8K institutions, and 134K ecosystem partners in over 100 countries. In FY21 Q1, the company generated $1.8 billion in revenue. Last month, Coinbase users faced issues logging in and trading as the price of Bitcoin and other cryptocurrencies plummeted. System outages continue to haunt most crypto exchanges. https://twitter.com/JD_2020/status/1395017149605875713 We’re seeing some issues on Coinbase and Coinbase Pro and we’re aware some features may not be functioning completely normal. We’re investigating what’s going on right now, and as soon as we know more we’ll let you know.— Coinbase Support (@CoinbaseSupport) May 19, 2021 Transition For Coinbase, this meant reimplementing over 200 screens and retraining its 30+ native engineers, alongside delivering product performance at each stage of the migration and developing new features on top of its legacy apps. The below table shows the impact analysis metrics of its migration to React Native from native development. (Source: Coinbase) Product journey Coinbase was founded in 2012 by former Airbnb engineer Brian Armstrong and ex-Goldman Sachs trader Fred Ehrsam. A year later, the company started building mobile applications. The first Android and iOS apps they released were native, written in Java and Objective-C. Back in 2017, Coinbase had a small team of Android and iOS engineers working on these apps. But, despite their best efforts, they had a hard time scaling. The company said, while its web engineers saw notable productivity gains, the average mobile engineers’ pace remained stagnant. “As our scaling efforts continued to give disappointing results in 2018, it became clear that we needed to accelerate our rate of growth and speed of interaction on mobile platforms,” said Coinbase. Why React Native? At Coinbase, features are built and maintained by cross-functional teams, typically consisting of two backend engineers and two frontend engineers for each supported platform (web, Android, and iOS). This arrangement required a large number of engineers to maintain a single vertical of its product. Also, engineers were somewhat siloed from other engineers working on the same platform, making it challenging to coordinate larger, systemic changes. The transition helped them to reduce its team size from eight to five engineers, where client engineers could work across all three platforms (web, Android and iOS). The company said it had a well-functioning web engineering platform built on React. Coinbase explored multiple cross-platform technologies, before zeroing on React Native. React Native transition In October 2019, Coinbase released its Pro mobile application developed in the App Store after six months of developing the React Native platform. The company saw positive business results, understood performance challenges better, and noticed a change in developer productivity. “It showed us that web engineers could become effective React Native developers in a short span,” said Coinbase. Soon, Coinbase ventured into phase 2 — a brownfield rewrite of its onboarding flows. The project started in mid-2019 and was launched six months later. Since the onboarding module was in React Native, it was able to be shared between the Coinbase and the Pro mobile apps. The brownfield approach ran into challenges initially. For instance, each change to the onboarding module would require rebuilding a package, then rebuilding native apps using the shared module to test manually. This method was cumbersome and time-consuming, especially for engineers who only had web or native experience. Iterating on the shared code required an understanding of all three platforms. “It left some engineers — both native and web — wondering why we were bothering with React Native at all,” said Coinbase. Here’s a timeline of Coinbase’s React Native migration: Lessons Coinbase spent time with Airbnb engineers to learn from their experiences. “We are grateful to the team for sharing the details of their journey, as the information was invaluable in deciding the best path for Coinbase,” said Coinbase. The company went ahead with re-platforming the primary Coinbase mobile app. It began rewriting the Android, followed by rewriting the greenfield instead of taking a brownfield/piecemeal approach. “Based on our own experience and lessons learned from companies like Airbnb, we concluded that brownfield projects increased complexity, introduced the risk of getting stuck in an in-between state, and created space for prolonged cultural disagreements between engineers on different platforms,” said Coinbase. Outcome Coinbase rolled out the rewrite as an experiment. However, it showed a positive impact across the key metrics. In mid-2020, the company had about seven Android engineers and 18 iOS engineers working on the Coinbase mobile apps. As of today, Coibase’s React Native repo has 113 contributors. “Currently, the client teams are not fully fungible across mobile and web, but we are getting there,” said Coinbase. The company said it is one step closer to creating a single, unified client platform for all Coinbase applications. As of now, Coinbase has managed to minimise the technology platforms from three to two application platforms — React Native and React web, but in the coming months, it looks to bring it down to 1.5. The company is also building a cross-platform design system using GraphQL.
“The transition from native to React Native did not happen overnight.” Earlier this year, the cryptocurrency exchange platform Coinbase successfully migrated its iOS and Android apps to React Native, an open-source mobile application framework developed by Facebook. The framework is typically used to create applications for Android, Android TV, iOS, macOS, tvOS, Windows, etc. San […]
It showed us that web engineers could become effective React Native developers in a short span.
[]
["Go", "programming_languages:R", "AI", "programming_languages:Java", "RAG", "ViT", "GAN", "GraphQL", "R", "Java"]
["AI", "RAG", "R", "Go", "Java", "GraphQL", "GAN", "ViT", "programming_languages:R", "programming_languages:Java"]
Amit Raja Naik, known as the 'AI Human,' serves as the editor at AIM Media House, where he leads a team of talented tech journalists who are driving and shaping technology conversations across India and around the world.