Migrating To React Native: Top Case Studies From Well-Known Companies
Migrating Cross-platform apps to React Native at Walmart
Walmart is made of many different brands, such as Walmart Grocery, Sam’s Club, ASDA, Walmart.com, etc. — each with its own IT needs, requirements, and dev teams. Things get even more complex on the mobile side. Each brand has two teams of mobile developers, building apps for each OS, that are similar in functionality, but different in execution. This was not by choice, but rather necessity as it is very difficult to find highly-skilled developers who are adept at writing native apps in both iOS/Android.
For associate tools, they mostly wrap web apps using ionic or similar solutions.
They felt that React Native could really change the paradigm.
Alexander Grigoryan, the senior director for software engineering, application platform and online grocery for Walmart Global eCommerce, tells that his team looked at various options for building its cross-platform apps.
So, they already have mobile apps in production that have lots of features powered by tons of code.
Typically, developers who want to move their apps to React Native would have to either rewrite their app from the ground, build a quick and dirty integration that’ll cost them later, or build a new platform and tooling for integrating React Native into their apps. Rewriting everything would be a massive investment of time, hiring, and training (translation: money). And a complete rewrite is prone to failure compared to an incremental migration approach.
Walmart went with the last option. They created the Electrode Native Platform. The basics idea here is that Electrode Native allows large companies like Walmart to take their existing apps and slowly migrate parts of their code to React Native.
Alex Grigoryan, Sr Director of Software Engineering at WalmartLabs, says, "Electrode Native offers a streamlined integration of React Native into existing mobile applications. With Electrode Native, there will no longer be a need for an engineer who specializes in both mobile and React Native technology in order to put the two technologies together. For your existing mobile application, there is no heavy infrastructure, code, or development lifecycle changes.
When considering their approach to using React Native, WalmartLabs developers decided that building features into production applications incrementally would be the solution with the highest chances of success.
As of February 2017, they migrated one of the webviews to RN. As of August 2017, they were migrating few more webviews and building new features in RN. Walmart developers reported no scaling issues.
Native iOS and Native Android to React Native at Bloomberg
Bloomberg is a financial software, data, and media company headquartered in New York City with 9.4 billion USD revenue (2014). Bloomberg’s mobile app for iOS and Android, launched on January 2016, offers users personalized content, videos and live feeds. To develop the app, an engineering team at Bloomberg’s New York City headquarters developed the app using React Native.
- With React, Bloomberg engineers were able “to more easily and quickly rebuild the company’s consumer app for both mobile platforms”.
While other free software projects like Titanium and PhoneGap promise to offer developers a native look and feel, Bloomberg found that React Native was the best tool available in the market today to create native apps simultaneously for both iOS and Android platforms.
- Before React Native, Bloomberg teams would have developed the iOS and Android versions in parallel without being able to share most of the code they wrote, leading to delays and repetition. By comparison, the React Native platform’s unified development capabilities and made for a seamless process that allowed each developer to focus on one feature at a time.
That helped speed things along. It took the team of developers in New York just five months to develop the app—roughly half the time it would have taken had they not used React Native.
- Another benefit of React Native is that it automates code refreshes, accelerating the release of new product features. Instead of recompiling, your app reloads instantly. Once users open the app, they get the latest update.
- That same feature lets coders experiment, iterate and quickly push out upgrades with A/B testing. For example, before the app’s launch, the team tested user preferences by placing images on the left and right sides within the app, collecting data and metrics to identify what internal beta users favored. This was just one of the many experiments the team conducted to validate this tech and workflow.
“React Native is the best out there,” says Gabriel Lew, a senior software engineer at Bloomberg who led the development team’s effort. “Expect it to appear in other Bloomberg mobile apps in the future.”
Native iOS (Swift) to React Native at Artsy
Artsy is a New-York based startup with total funding amount $100.9M. It is a marketplace for buying and selling visual art online. Artsy’s database contains over 270,000 pieces for sale from the top galleries and auction houses. Artsy’s iOS app was first developed in Swift but soon “a small team of iOS developers with decades of native experience switched to React Native”. In the series of blogposts Artsy Engineering team covers the reasons why they made that choice, including “support other future platforms such as Android without creating more teams”, enabling “different business teams to work on the app without disrupting each other”, evolving “our architecture in order to increase programmer efficiency”. As they concluded, “new apps going forward we will default to React Native apps”.
Other Case Studies
- Wix.com is a cloud-based web development platform enabling users to create HTML5 web and mobile sites through the use of online drag and drop tools. The video-study “Building a React Native App for 80 Million Users” explains why the team chose React Native for their official app, what challenges they resolved, what practiced methodologies they applied and what gaps they still trying to solve. Presented by Tal Kol (Head of Mobile Engineering at Wix.com). Popularity: 49,330 views; 547 likes. Date: October 1, 2016.
- Instagram is a social networking app developed for sharing media content (photos and videos). The study “React Native at Instagram” describes how React Native was integrated into an existing Instagram native app: the main challenges and results. React Native allowed product teams to ship features faster to both their iOS and Android apps. Written by Martin Bigio, Don Yu, Brian Rosenfeld and Grace Ku (Software Engineers on the Core Client team at Instagram New York). Popularity: 3.9 K likes. Date: February 6, 2016.
- UberEATS is an online platform for ordering food from restaurants. The study “Powering UberEATS with React Native and Uber Engineering” describes how Uber’s engineering team rebuilt their app’s Restaurant Dashboard with React Native. Written by Christopher Lewis (SR Software Engineer at Uber). Popularity: 855 shares. Date: March 28, 2017.
- SoundCloud is an online music and podcast streaming platform that enables its customers upload, record, promote, and share their originally-created sounds. The study “React Native at SoundCloud” describes how SoundCloud engineering team built SoundCloud Pulse (an app for creators) with React Native: how they started working, what things they learned along the way, what features they preferred and what further steps towards React Native implementation were planned. Written by Jan Monschke (Frontend Engineer at SoundCloud) and Peter Minarik (Engineer at SoundCloud). Date: August 3, 2016.
- Skype is a telecommunication app software product that focuses on providing video chat, voice calls and instant message communication between computers and mobile devices via the Internet. The study “Introducing the next generation of Skype” informes how the programming team rebuilt Skype app and what new features were introduced. Popularity: 2K shares. Date: June 1, 2017.
- Facebook Ads was created to let users who advertise on Facebook manage their accounts and create new ads on the go. The study “React Native for Android: How we built the first cross-platform React Native app” describes the way Facebook software engineers developed the Ads Manager app. The team shares how they built this Facebook’s first fully React Native app and the lessons they learned. Written by Daniel Witte (?) and Philipp von Weitershausen (Ex-Software Engineer at Facebook and Firefox, Software Engineer at Silk Labs). Popularity: 1,3 K likes. Date: September 14, 2015.
- Mapbox is a location data platform for mobile and web apps. The company provides building blocks to add location features like maps, search, and navigation into any experience its customers create. The study “Our React Native GL library is in alpha” describes the way Mapbox mobile team rewrited their current experimental React Native library and released an alpha. Written by Nicholas Italiano (Software Engineer at Mapbox). Popularity: 352 likes. Date: September 28, 2017.
- Airbnb company hosts an online marketplace and hospitality service allowing its customers to rent short-term lodging including vacation and apartment rentals, homestays, hotel rooms, and hostel beds. In the talk “Hybrid React Native Apps” the speaker focuses on how the engineering team introduced React Native into an iOS and Android code base and what main challenges they faced. Presented by Leland Richardson (Software Engineer at Airbnb). Popularity: 396 likes, 71,812 views. Date: September 13, 2016.
- Glitch app allows users to buy Adidas Glitch customizable boots that can be combined with differently colored uppers and inner-shoes for more personal football cleat experience. The study “How we have been breaking patterns with the adidas GLITCH” describes how POSSIBLE development team created the app from scratch by using React Native framework. Written by Istvan Makary (UI Developer at POSSIBLE). Popularity: 301 likes. Date: December 12, 2017.
- Clubhouse is a software development company aimed at building intuitive project management tools. The study “Going Mobile with React Native” describes what best practices the company’s development team used when building and alpha testing the Clubhouse iOS app. Written by Camille Emefa Acey (VP at Clubhouse Software). Popularity: 67 likes OR 195 shares. Date: July 6, 2017.
- Made by Many is a digital product design company specialized in product innovation and digital transformation. The study “A Year of React Native: Styling Part 2” describes how React styling concepts provided flexible ways of creating apps for iOS and Android. The developers team explained why they had chosen React Native and what best practices they had learned along the way of using the technology. Written by Sam Murray (Developer at Made by Many). Popularity: 11 shares. Date: September 21, 2017.
- Yeti Smart Home was developed to control all the home’s devices from a single app. The study “Developing beyond the screen” describes the methods how React Native and Firebase helped the team to release Yeti. Written by Jesús Darío (CTO and Co-Founder of Netbeast, today’s Yeti) . Popularity: 32 likes. Date: January 13, 2017.
- Discord is a freeware VoIP app designed for gaming communities. The study “Using React Native: One Year Later” is centered around the React Native features the developer preferred when building an iOS app from scratch. He shares his doubts about React Native usage and explains why he revised his opinion. Written by Fanghao Chen (iOS Developer at Discord). Popularity: 1,4 K likes. Date: June 7, 2016.
- Gyroscope was created for the purpose of checking constantly and showing an overview of how users do across various health aspects: mental health, weight, physical activity, heart rate, etc. The study “Building the Gyroscope App with React Native” describes how the team developed and released their new iOS app on React Native and how it should be used to deliver the best results. Written by Anand Sharma (Founder and CEO at Gyroscope). Popularity: 1 K likes. Date: June 16, 2016.
- Huiseoul is an e-commerce company that provides personalized skincare counselling and Korean skincare products exclusively to China. In the study “Building a conversational E-commerce app in 6 weeks with React Native” are listed the tools that helped the developers build a mobile app for a conversational e-commerce service. Written by Johnwook Choi (Software Engineer at Huiseoul). Popularity: 50 likes. Date: September 8, 2016.
- The li.st app is a way to create lists where users can share their personal experiences, opinions and discover lists from the leading voices in TV & film, music, food, sports, news, fashion and more. The video-study “Building li.st for Android with Exponent and React Native” develops the topic about what knowledges developers should have when building large apps on React Native. Presented by Brent Vatne (Software Developer at Expo). Popularity: 18,743 views; 116 likes. Date: June 7, 2016.
- Townske is a travel publishing platform focused on sharing and discovering visual city guides to help people easily explore any city in the world. The study “Townske app in react native” is based on the experience of a web developer who built a Townske iOS app on React Native: why he chose React Native, what challenges he faced, and what benefits he discovered. Written by Dean McPherson (Co-Founder of Paperform). Popularity: 100 likes. Date: December 15, 2015.