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

Building a React Native App for 80 Million Users

Fda8c6c2e77ab98f85e85f99656859a0?s=47 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.

Fda8c6c2e77ab98f85e85f99656859a0?s=128

Tal Kol

September 15, 2016
Tweet

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
  5. None
  6. None
  7. Products Today Must Exist on All Channels (Web, iOS, Android)

  8. None
  9. None
  10. None
  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?