Building a React Native App for 100 Million Users

* Given in BuildStuff Kiev on Nov 21, 2016

At Wix.com, we’ve been betting big on React Native. The official Wix app is developed completely in React Native and designed to cater to Wix’s growing userbase of over 100 million users. Production of this scale comes with its set of challenges, especially when using a framework this young.

At Wix.com, we have about 200 Javascript front-end developers and only 10-20 native developers (both iOS and Android). The core of the the Wix product is web-based. It’s obvious that in order to bring the product into native mobile form, we have to rely on the existing workforce and leverage the existing skillset. React Native makes this work, as 70% of our code can be in Javascript. The big question is how the quality of the native app you produce this way can be on par with the best apps in the App Store.

Transcript

1. Building a React Native App for 100 Million Users BETTING BIG ON REACT NATIVE IN WIX.COM linkedin/talkol github.com/talkol @koltal talkol@wix.com
2. TAL KOL Hi. Mobile Apps Lead Architect at Wix.com Kiev
3. The Absurdity of Doing Mobile 01
4. The world went mobile THIS "OFFICIALY" HAPPENED ON EARLY 2014 4.2 4.8
7. Products Today Must Exist on All Channels (Web, iOS, Android)
11. Wix by Numbers 100M users 1300 employees 38% engineering 200 FEDs
12. where is the Wix mobile app ?
13. Mobile Development Is Broken 02
14. A Typical Startup ! ! ! Product ! ! Designers ! ! ! ! ! ! ! FEDs ! ! ! ! Backend
15. ! FED ! Backend JavaScript React, Angular HTML, CSS Scala Spring, Wix FWK Micro, DBs
16. Mobile Apps NOT ALL APPS ARE CREATED EQUAL
17. ! iOS ! Android ObjC / Swift iOS SDK Cocoa Touch, UIKit Java Android SDK Material, NDK
18. ! ! ! ! ! ! ! ! ! ! ! ! FEDs Wix Blog Wix Stores 200 ! ! ! ! ! ! ! ! ! ! ! ! iOS 200 ! ! ! ! ! ! ! ! ! ! ! ! Android 200 Wix Hotels ...
19. Compromise Is Inevitable
20. Compromise Where § Productivity? and do everything thrice § Quality? and make shitty apps § Depth? and focus on one platform ✔
21. ! ! ! ! ! ! ! ! ! ! ! ! FEDs Wix Blog Wix Stores Wix Hotels ! ! ! ! ! iOS ! ! ! ! ! Android ... ...
22. When The Giants Suffer 03
23. Compromise Where § Productivity? and do everything thrice § Quality? and make shitty apps § Depth? and focus on one platform ✔
24. Facebook HOME OF THE MOST POPULAR APPS IN THE WORLD Mobile-first since 2012 Siloed model is killing productivity Have the firepower to start an industry shift
25. JavaScript THE HOLY GRAIL OF CROSS PLATFORM LANGUAGES Only way to conquer all 3 platforms Is JS a compromise? Hey, didn't we hear this before?
26. React Native § "learn once, write anywhere" § JS & React for productivity § free and open source § not hybrid, UI is pure native § async updates for performance § too good to be true?
27. Not for the Faint of Heart § Barely Out! iOS ~20 months ago, Android ~14 months ago § Unstable! now v0.37, minor every 2 weeks, breaking changes § Unpolished! some areas handled poorly (navigation, lists) § Incomplete! ecosystem lacking in peripheral components
28. Any wall we hit is an opportunity for open source
29. The Wix Mobile App 04
30. The Plan § company-wide platform § fully in React Native § one app, not many § implemented from scratch § kicked-off 10 months ago § start with iOS first "Manage your site / business with Wix"
31. FEDs Wix Blog Wix Stores 200 ! iOS 10 ! Android 10 Wix Hotels ... ! ! ! !
32. All Business Logic in JS § Modern dialect ES8, babel, classes, async-await § Type system now Flow, considering TypeScript § Redux dataflow immutable predictable app state § Code reuse between all 3 platforms (web, iOS, Android)
33. JavaScript (React Native) Native Wix Blog Wix Stores Wix Hotels Core Team CI Apple & Google The Wix App Users ~24h API Biz Logic Layout API Biz Logic Layout API Biz Logic Layout API Biz Logic Layout OS Core Wow Modules
34. Continuous Integration § State of mind is that CI/CD are core to Wix engineering § NPM packages published by every product group on push § JS bundle built in CI when a product group releases its module § Code push allows to deploy the JS bundle OTA w/o app stores
35. Module Code Change git push Module Build & Test Module Release Lifecycle Wix App Release Lifecycle publish Private Repo deploy AppBlade deploy TestFlight & GP Module RC Wix App Build & Test RC-GA Wix App RC Wix App Build & Test GA-GA
36. Works but complicated, considering monorepo
37. QA Doesn't Scale § Regression grows linearly (currently 12 man days per platform) § Unit tests are easy, business logic is vanilla JS tested in node § E2E tests much harder, appium is flaky – there's a void here § TDD and full automation are the only ways to scale
38. 100 E2E scenarios each flaky at 0.5% 1 − (1 − 0.005)()) Full suite is 40% flaky! = § flakiness kills E2E § blackbox can't handle flakiness § switch to graybox § special support for RN § write E2E tests in JS § released soon on github detox
39. Production Monitoring § NewRelic for native errors and crashes § Sentry for JavaScript errors and exceptions § Wix BI for reporting business analytics events § Mixpanel for logging redux actions § Appsee for testing usability issues
40. Training ! 2 weeks !! 2 weeks
41. Are We Happy? 6 months from zero to stores 80% code is JavaScript 90% quality of previous stack 300% faster development 70% code sharing
42. React Native is a game changer
43. Making an Impact BRINGING THE "NATIVE" BACK TO REACT NATIVE Any wall is an open source opportunity The Wix App relies on 15 of them
44. react-native-navigation react-native-controllers polymorphic-redux react-native-extended-cli react-native-keyboard-tracking-view redux-testkit react-native-autogrow-textinput enzyme-drivers react-native-swipe-view detox react-native-keyboard-aware-scrollview react-native-wordpress-editor react-native-invoke react-native-camera-kit react-native-notifications
45. @koltal Questions?