React Native: New Milestone in Shopify Mobile Development

Or why Shopify is switching to React Native.

After many years of native mobile development, we decided to move in full steam towards the development of mobile applications on React Native. It will be clear below that this decision was not easy for us.

At the end of each quarter, we see the same picture: most of our customers make purchases through mobile devices (in the third quarter of last year their share was 71%). Black Friday and Cyber ​​Monday is the hottest time for our sellers, and the activity of customers these days is off the charts. This year, during the discount period, Shopify partners recorded a 3 percent increase in orders from mobile devices, and the average share of such purchases accounted for 69% of the total number of transactions.

So why did we decide to switch to React Native? And why now? What will happen to our native mobile development now? You won’t be able to quickly and briefly answer these questions. Let’s start with the background.

Shopify Mobile Development – 2019

We have developed a special practice at Shopify – to bet on relatively young technologies that are at an early stage of development, or are just gaining popularity. It helps us grow faster.

Usually, we focus on several technologies and rely mainly on them in development. This gives several points of growth:

• we form a unique expertise on a small set of technologies (and often make a significant or even major contribution to their development);
• Each technological solution has its bottlenecks, subtleties, and we delve deeply into them;
• expert development teams share best practices with each other, so everyone can use and maintain code written by colleagues if necessary;
• new employees get on track faster.

At the same time, new technologies are constantly appearing that give us opportunities to gradually increase the efficiency of engineers or the productivity of our products. We are experimenting a lot to open up new opportunities and translate quantitative improvements into qualitative ones, but, ultimately, we are not introducing all our achievements into the main technical process.

When we introduce young technologies, languages ​​or frameworks, we try to calculate the probability of success or failure. Instead of avoiding risk, we thoroughly study, research and evaluate different risks based on the individual characteristics of our projects. As often happens, hidden opportunities can be found in the risk zone. And we primarily think about how to neutralize the negative aspects of risk:

• What if developers stop supporting the technology?
• What if we encounter a bug that we cannot fix?
• What if the developers of this technology (product) develop it contrary to our interests?

Ruby on Rails was at an early stage of development and did not yet take shape as a full-fledged framework when in 2004 Toby (our CEO) became a major contributor open source project. For many years, Ruby on Rails was considered frivolous, ineffective solution. But choosing and exploring this technology at such an early stage of development gave Shopify a competitive edge, although it was an unpopular choice. Using Ruby on Rails, the team was able to quickly create products and attract resources. After all, it was a modern technology, with a higher level of abstraction than traditional programming languages ​​and frameworks that existed at that time. Similarly Paul Graham once told about how he decided to use Lisp to create Viaweb. 6 of the 10 most expensive companies Y Combinator today use Ruby on Rails (although, again, the framework is still not very popular). On the other hand, none of the 10 most expensive companies Y Combinator uses Java, which is considered a proven and fairly reliable corporate solution.

Similarly, 2 years ago Shopify decided to switch to Google cloud. Again, this is a rather risky venture for the second largest e-commerce service in the United States (as of 2019) – to conduct cloud migration outside of its own data centers for the sake of a fairly new product, Google Kubernetes Engine. We saw that the value-added curve pushed us to focus on what we are really good at (this is helping business), allowing others (in this case Google Cloud) to take on the hard work of keeping equipment running condition, ensuring capacity, security, updating the operating system, etc.

React Native – what is it?

In 2015, Facebook announced and released the open source framework release. React native. Previously, it was already used internally for the development of its mobile applications. React Native is a framework for cross-platform development of natively displayed mobile applications using the js library React. Thus, it makes it possible to use the top js-library to create a user interface for native mobile applications.

At Shopify, this idea (then, in a sense, now too) was skeptical, but many thought it was promising. So another Shopify event Hackdays was entirely dedicated to React Native. Although the team then appreciated the benefits of the framework, we decided that in 2015 we could not implement the React Native application, which we could be proud of later. This was mainly due to performance problems and the lack of full support for Android OS. But we clearly realized that we liked the paradigm Reactive Programming and language GraphQL. In addition, after meeting with React Native, we developed and posted renderer for iOS. In 2015, we implemented these technologies on our stack, but did not use React Native for mass mobile development. About our first experiments in detail written here.

Until today, Shopify has had native mobile development as the standard. We created two teams, mobile tooling and foundationsthat focused on iOS and Android, and also helped us speed up the development process. Despite the fact that they showed good results, it seems to us that the development will become more effective if we:

• We use the power of JavaScript and other web-technologies in mobile development;
• introduce the reactive programming paradigm in the development of client applications;
• we will combine development for iOS and Android on React Native into one technological stack.

How does React Native work?

React Native allows you to create cross-platform natively displayed mobile applications using JavaScript. React Native is similar to React: we also declaratively create a user interface in JS with a tree of UI elements, or with a virtual DOM (VDOM), in terms of ReactJS. If ReactJS displays interface elements in a browser, then React Native converts VDOM objects to native platform-specific visual elements for display on mobile devices using binders: native components are wrapped in React. We are only interested in the Android and iOS platforms, but there are enthusiasts who are interested in developing React Native for Windows, macOS and Apple tvOS.

ReactJS interacts with the browser, and React Native interacts with mobile APIs.

When do we not use React Native?

There are situations where the Shopify team does not use React Native to develop mobile applications. In particular, if we are required to:

• launching the application on the old hardware (CPU <1.5 GHz);
• sophisticated processing;
• ultra high performance;
• many threads running in the background.

Please note: low-level libraries, including various open-source SDKs, remain completely native. We can create our own native modules if we want to be in closer contact with the hardware.

Why are we switching to React Native right now?

We have 3 main reasons:

1. After acquiring the Tictail marketplace (the service was developed on React Native, on the principle of mobile first) in 2018, we saw what kind of development React Native received and in 2019 we invested in three more projects.
2. Shopify actively uses React in web development, now it is time to apply our know-how in the development of mobile applications.
3. We noticed that the performance curve crawled up (for example, what it could before, and now what Google Docs can do compared to the desktop Microsoft Office) and made a bet on React Native in the long run – just as we once believed in Ruby on Rails, Kubernetes, and Rich Media.

Mobile development at Shopify in 2019

In Shopify, sellers and buyers can interact in several ways: through web and mobile applications. All last year, our three teams were experimenting with React Native, and as a result, they developed three mobile applications: Arrive, Point of Sale and Compass.

After our experiments, we made the following conclusions:

• when copying the Arrive app to React Native, the team found that the productivity of work doubled compared to the native development, even if you write only for one platform;
• testing the Android version of Point of Sale app at low power, we found that the application runs at a lower CPU frequency: 1.5GHz (written in React Native) versus 2GHz (native development);
• we tentatively estimated that the proportion of platform-independent code would be ~ 80%; and we were surprised when in reality it turned out to be much higher: 95% for Arrive and 99% for Compass.

But it is worth making a reservation: although we decided to write new applications on React Native, this does not mean that we will rewrite all our old applications.

Arrive

At the end of 2018, we decided to rewrite one of our most popular client applications on React Native, Arrive. This is a high-performance, high-rated iOS app with millions of downloads. We chose Arrive because we did not have its Android version. So we went to meet the users of Android devices. Now both the iOS and Android versions are written in React Native with a 95% share of the total cross-platform code.

In the process of rewriting, we have achieved the following results:

• when running the cross-platform version for iOS, fewer crashes occur than in the native version;
• we launched the version for Android OS;
• Both mobile and non-mobile developers were able to work on the project.

In addition, the team was able to try out an excellent method for quickly executing pull-requests “work-in-progress”. Just scan the QR code from the Github comment using your phone, and your application’s JS bundle is updated. Thus, every time you can instantly update the application and use its current version. Our service station recently described this process on Twitter.

Point of sale

At the beginning of 2019, we conducted a 6-week experiment on our flagship product. Point of Sale (POS) appto see if he is a good candidate for rewriting on React Native. We studied this question a lot, as our retailers expected that we would be able to halve the response time of our application: the process of customer service using our application should be fixed in the muscular memory of sellers, and they should not be distracted by this.

In order to fulfill the requirements of our retailers and understand the development of React Native for POS devices at the same time, we decided to create a new native mobile application for iOS, and write a version for Android OS on React Native.

We have allocated two separate teams for these tasks, and here’s why:

1. We already had a team with strong expertise in iOS, including developers of native POS applications.
2. In addition to the direct application performance, we wanted to be able to test our development speed on React Native, comparing all this with our gold standard, that is, with native iOS development.
3. To meet the high performance requirements of sellers, we decided to make all updates Facebook re-architecture updates to React Native (however, it turned out that this is not critical for performance). By identifying separate teams to work on two projects, we reduced the risks associated with disrupting the release plan.

We announced a rewritten POS at the conference Unite 2019. Both versions, iOS and Android on React Native, will be available in 2020.

Compass

Spotify has a Start team that helps customers start their own business. Before the company made a fundamental decision to develop mobile applications on React Native, this team studied in detail Flutter and React Native. The choice fell on React Native, and now they have beta versions iOS – and AndroidCompass applications. Moreover, ~ 99% of the code they have in common.

The first releases will be released within three months.

Mobile development in Shopify 2020 ++

We have prepared a lot of interesting things for 2020.
Will we rewrite our native mobile apps? Not. Although this decision is made by each team independently.
Will we hire native developers? Yes, many!
We want to become leading members of the React Native community, create platform-specific components and continue to understand the intricacies of each platform. And this requires a strong expertise. Sounds good, right?

Collaboration and Open Source

We believe that software development is a team game. We are involved in the development of open web, open source and other open standards.

We are contributing to the financing of Software Mansion and Krzysztof Magera’s projects (co-founder of React Native for Android) related to React Native.
We’re collaborating with William Candillon (lead Can It Be Done in React Native on the YouTube channel) on architecture and performance improvements.

We plan to work closely with the React Native team from Facebook on automation, creating third-party libraries, and overseeing some of the modules in the Lean Core project.

Together with Discord, we are actively working to quickly prepare an open source version of the FastList for React Native library (allows you to render only those list items that are in the visible area) and optimize it for Android OS.

Our Tooling and Foundations Commands for React Native

When you rely on technology and delve into it, you want to get the maximum effect from it. In order to quickly set goals and achieve this goal, we have created two types of teams that help other Shopify employees to be productive. The first type is the tooling team, which helps with configuration, integration, and deployment. The second type is the foundation team, which deals with SDK, code reuse and open source. In 2020, both teams began to develop towards React Native.

Our popular Shopify Ping app, which allows you to chat with hundreds of thousands of customers, is currently only available in the iOS version. In 2020, we will be working on a version for Android OS using React Native in our branch in San Francisco, where we will hire employees.

In 2019, Twitter released desktop and mobile web applications using a technology called React Native Web. The name may be a little confusing, but its main difference is that this technology allows you to use the same React Native stack for developing web applications. As a result, Facebook immediately chanted Nicholas Gallagher, lead developer of the project. In 2020, we at Shopify will also conduct several experiments with React Native Web.

Subscribe to our Instagram developer