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
Wix Engineering

--

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

At Wix.com, we see your website as the heart and soul of your online presence. After all, it’s the place where potential clients can find you, read all about your business, book your outstanding services, or buy your unique products. Though, creating your stunning website is just the beginning of your path to becoming a successful business owner.

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

Wix Mobile App designed for you to conveniently and professionally manage your business and day-to-day activities at a glance.

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

It all started approximately 5 years ago. We were 4 dedicated developers at the time, and decided to take a chance on React Native. To be honest, quite a big change, to say the least. Back in the day, React Native was pretty novel, but super promising, and had us fascinated and curious around it. Our first version was released with React Native v0.17.0, just to put things in perspective.

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.

Wix Mobile App

Wix App in Numbers

Today, we are one of the biggest React Native applications in the world:

  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?

A question to be asked. Well, Native implementation is, of course, great in theory, but in practice, Wix is running a business and we needed to keep in mind (and still do) these five principles:

  • 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.

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:

--

--

Omri Bruchim
Wix Engineering

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