React Native at Wix

Around 5 years ago, we started our romance with React Native. Today, with millions of active users, we’d like to share our story with the community.

Omri Bruchim
Nov 10, 2020 · 6 min read
Image for post
Image for post
Wix Office — Tel Aviv

This blog post is part of a series of blog posts, which aims to shed some light and share from our experience working with React Native at Wix.

Wix App is one of the first applications built with React Native from scratch. After a 5-years journey, we are excited to look back in retrospective, and recount some of our daily challenges and how we solved them, alongside a couple of major decisions we’ve come to make over the years, and more potentially useful insights that we strongly believe the community could benefit from.

Background

As a dynamic entrepreneur, you may sometimes find yourself running from a meeting to a launch party, while also having to pick up your kids from school along the way. To say that “Time is precious” would be an understatement. That’s why, with the above in mind, we realized there is a need for a creative solution, which will allow you to engage with your clients and manage your website or an online store — all from the comfort of your mobile device.

Wix Mobile App

Image for post
Image for post

With Wix app, you can invite your site visitors to become members through their mobile app. This is the ultimate place to empower your customers and build a strong community of engaged members. From your members’ side, they will be able to do many things: browse your products and services, book appointments based on your displayed schedule, comment on blog posts, converse on your forum, view important updates, join groups, and more.

From Zero to Millions

We’ve grown a lot since. From zero to millions of active users. And from a small team to more than 100 mobile engineers, spread across 30 teams globally. These spiking numbers are just one aspect of this beautiful love story with React Native, the Wix Mobile App has undergone considerable changes during this time — a brand new look was launched, a large number of features were added in a short period of time, leading to the rapidly growing number of users.

Of course, one implication of product growth is performance degradation, especially when it came to things like seamless transition, fluent animations, crash rate, and general slickness of the app. So we had to develop our own tools to measure and improve the performance of the app, to regain our users’ satisfaction and happiness.. Furthermore, we had to change the architecture of the app from the ground up, to allow all the developers to run faster and for their environment to be much more stable.

Image for post
Image for post
Wix Mobile App

Wix App in Numbers

  1. More than 650 different screens
  2. Version release twice a week (same versions for iOS & Android)
  3. >100 mobile developers from 30 teams located in 5 different locations
  4. App Store & Google Play Rating > 4.5 with over 50K ratings
  5. ~0.2% crash rate

Why React Native?

  • Efficiency: Given that Wix is a web-oriented company, and so, our current stack is React — made much more sense to consider React Native before any other cross-platform framework. It makes it easier for mobile developers to catch up with the lightning speed pace of changes in the world of web development. React Native projects keep developers focused on the product business instead of adopting new stacks.
  • Time-to-Market: Velocity is key to success here at Wix Engineering. Development cycles with React Native are faster than Native development and thanks to “fast-refresh” and other React Native features, we got quicker development iterations of our UI components and user flows.
  • Code Sharing: In fact, ~95% of our business logic codebase is shared between iOS and Android. Furthermore, few of our teams chose to share their business logic code with the Web platform as well, meaning, a feature is implemented by a single team for 3 different platforms without sacrificing the user experience.
  • Scale: We are growing fast, really fast. This is taken into consideration in every decision we make, especially in our organizational structure, so nothing will be a blocker for us to scale up at any time.
  • Community & Open Source: Since the early days of React Native, we were thrilled by the enthusiasm and contribution of the community to the framework, it gave us confidence that React Native was here to stay. In addition, we are big fans of open source and as a rule of thumb, every non-Wix related code should be open source from the first commit. It’s not always possible, and can be time-consuming when it comes to maintenance, but it’s totally worth the while, so we make the time and do our best to shift resources to support the community.
Image for post
Image for post

The (critical) choice to stick with React Native across all other hybrid frameworks back then, dealing with the obstacles early adaptation brought along with it, implementing loads of workarounds to fit our needs and get on track, and fighting startup time, got us to contribute to the core project of React Native while also maintaining our fork for critical fixes. This approach led to the origin of a few projects, some even seen as a pioneer in the React Native community: react-native-navigation, react-native-ui-lib, detox, react-native-notifications and react-native-calendars, where all of them are still alive and continue to grow day by day.

It is nearly impossible to summarize in a single post the entire adventure of deploying a mobile app with React Native, particularly one that touches so many users around the world and was, and still is, developed by a huge group of developers. Although there were real pains and challenges, the overall gains significantly exceeded the costs, and we are still very much motivated at Wix Mobile to keep investing in this platform.

In this series of blog posts, I outline our experience with React Native, share our best practices, and what’s next for us.

Part 1 — Intro

Part 2 — The Architecture I

Part 3 — The Architecture II (Deep Dive)

Part 4 — Open Source

Part 5— Performance [coming soon]

Part 6 — Tools [coming soon]

Part 7 — Testing [coming soon]

Part 8 — Challenges and future plans [coming soon]

If you’d like to get updates, follow me on Twitter.

To hear more about mobile at Wix Engineering listen to our podcast episode where Lev Vidrak and I deep dive into Reach Native and talk about adopting and using it to build the Wix Mobile App.

For more engineering updates and insights:

Wix Engineering

Architecture, scaling, mobile and web development…

Thanks to Lev Vidrak and Dshwartz

Omri Bruchim

Written by

Mobile Engineering Manager @Wix // former @Soluto // #ReactNative enthusiast // #React #iOS 👨🏽‍💻

Wix Engineering

Architecture, scaling, mobile and web development, management and more, written by our very own Wix engineers. https://www.wix.engineering/

Omri Bruchim

Written by

Mobile Engineering Manager @Wix // former @Soluto // #ReactNative enthusiast // #React #iOS 👨🏽‍💻

Wix Engineering

Architecture, scaling, mobile and web development, management and more, written by our very own Wix engineers. https://www.wix.engineering/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store