Building a React Native App for 80 Million Users

* Given in ReactNext 2016 on Sept 15, 2016

Wix.com is betting big on React Native for our official app, catering to over 80 million Wix users. Production of this scale comes with its set of challenges, especially when using a framework this young. This talk is about the challenges throughout the development lifecycle, applying practiced methodologies, gaps we faced and solved, and the ones we are still trying to solve.

Transcript

1. Building a React Native App for 80 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
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 90M users 1200 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 ~18 months ago, Android ~12 months ago § Unstable! now v0.33, 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 8 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 ES7, 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?