Building a React Native App for 80 Million Users

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

TAL KOL Hi. Mobile Apps Lead Architect at Wix.com

Slide 3

Slide 3 text

The Absurdity of Doing Mobile 01

Slide 4

Slide 4 text

The world went mobile THIS "OFFICIALY" HAPPENED ON EARLY 2014 4.2 4.8

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Products Today Must Exist on All Channels (Web, iOS, Android)

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Wix by Numbers 90M users 1200 employees 38% engineering 200 FEDs

Slide 12

Slide 12 text

where is the Wix mobile app ?

Slide 13

Slide 13 text

Mobile Development Is Broken 02

Slide 14

Slide 14 text

A Typical Startup ! ! ! Product ! ! Designers ! ! ! ! ! ! ! FEDs ! ! ! ! Backend

Slide 15

Slide 15 text

! FED ! Backend JavaScript React, Angular HTML, CSS Scala Spring, Wix FWK Micro, DBs

Slide 16

Slide 16 text

Mobile Apps NOT ALL APPS ARE CREATED EQUAL

Slide 17

Slide 17 text

! iOS ! Android ObjC / Swift iOS SDK Cocoa Touch, UIKit Java Android SDK Material, NDK

Slide 18

Slide 18 text

! ! ! ! ! ! ! ! ! ! ! ! FEDs Wix Blog Wix Stores 200 ! ! ! ! ! ! ! ! ! ! ! ! iOS 200 ! ! ! ! ! ! ! ! ! ! ! ! Android 200 Wix Hotels ...

Slide 19

Slide 19 text

Compromise Is Inevitable

Slide 20

Slide 20 text

Compromise Where § Productivity? and do everything thrice § Quality? and make shitty apps § Depth? and focus on one platform ✔

Slide 21

Slide 21 text

! ! ! ! ! ! ! ! ! ! ! ! FEDs Wix Blog Wix Stores Wix Hotels ! ! ! ! ! iOS ! ! ! ! ! Android ... ...

Slide 22

Slide 22 text

When The Giants Suffer 03

Slide 23

Slide 23 text

Compromise Where § Productivity? and do everything thrice § Quality? and make shitty apps § Depth? and focus on one platform ✔

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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?

Slide 26

Slide 26 text

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?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Any wall we hit is an opportunity for open source

Slide 29

Slide 29 text

The Wix Mobile App 04

Slide 30

Slide 30 text

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"

Slide 31

Slide 31 text

FEDs Wix Blog Wix Stores 200 ! iOS 10 ! Android 10 Wix Hotels ... ! ! ! !

Slide 32

Slide 32 text

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)

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Works but complicated, considering monorepo

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Training ! 2 weeks !! 2 weeks

Slide 41

Slide 41 text

Are We Happy? 6 months from zero to stores 80% code is JavaScript 90% quality of previous stack 300% faster development 70% code sharing

Slide 42

Slide 42 text

React Native is a game changer

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

@koltal Questions?