Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a React Native App for 80 Million Users

Tal Kol
September 15, 2016

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.

Tal Kol

September 15, 2016
Tweet

More Decks by Tal Kol

Other Decks in Programming

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 [email protected]
  2. A Typical Startup ! ! ! Product ! ! Designers

    ! ! ! ! ! ! ! FEDs ! ! ! ! Backend
  3. ! iOS ! Android ObjC / Swift iOS SDK Cocoa

    Touch, UIKit Java Android SDK Material, NDK
  4. ! ! ! ! ! ! ! ! ! !

    ! ! FEDs Wix Blog Wix Stores 200 ! ! ! ! ! ! ! ! ! ! ! ! iOS 200 ! ! ! ! ! ! ! ! ! ! ! ! Android 200 Wix Hotels ...
  5. Compromise Where § Productivity? and do everything thrice § Quality?

    and make shitty apps § Depth? and focus on one platform ✔
  6. ! ! ! ! ! ! ! ! ! !

    ! ! FEDs Wix Blog Wix Stores Wix Hotels ! ! ! ! ! iOS ! ! ! ! ! Android ... ...
  7. Compromise Where § Productivity? and do everything thrice § Quality?

    and make shitty apps § Depth? and focus on one platform ✔
  8. 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
  9. 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?
  10. 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?
  11. 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
  12. 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"
  13. FEDs Wix Blog Wix Stores 200 ! iOS 10 !

    Android 10 Wix Hotels ... ! ! ! !
  14. 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)
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. Are We Happy? 6 months from zero to stores 80%

    code is JavaScript 90% quality of previous stack 300% faster development 70% code sharing
  22. 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