Tweet
Tweet

Slide 1

Slide 1 text

React Na(ve Launch Brian Leonard TaskRabbit 04/06/2016

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Prototype •  10x faster (to develop) than iOS! but... •  Rou(ng? •  Flux? •  App structure? •  Tes(ng? •  Android?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Rou(ng tasker://ongoing/42/chat

Slide 7

Slide 7 text

Rou(ng tasker://ongoing/42/chat/schedule

Slide 8

Slide 8 text

Rou(ng •  URL completely contains state •  Components can bootstrap •  Push no(fca(ons •  Reloading can skip ahead

Slide 9

Slide 9 text

Flux Ac(on Dispatcher Store View

Slide 10

Slide 10 text

Flux Ac(on Dispatcher Store View

Slide 11

Slide 11 text

Flux Ac(on Dispatcher Store View

Slide 12

Slide 12 text

Flux Ac(on Dispatcher Store View

Slide 13

Slide 13 text

Flux Ac(on Dispatcher Store View

Slide 14

Slide 14 text

Flux Ac(on Dispatcher Store View

Slide 15

Slide 15 text

Data Storage •  Large Lists – Tasks (ac(ve and history) – Chat messages •  Singletons – User account / profile – Device – Environment

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

App Structure •  Self-contained screens •  Shared components •  Shared mixins •  Flux PaWern •  Naviga(on •  PlaXorm-specific

Slide 22

Slide 22 text

Tes(ng •  Unit •  Component •  Integra(on

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Test (mocha) Server (koa) Simulator (appium) Stub respsonses Give setup state Click on things Verify contents Runs Packager Ask for setup state Make API requests

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Android •  Just launched! •  87% shared code •  Not Shared – Environment Manager – Push No(fica(ons – Pickers: Date, Selec(on, Image – Ac(vity Indicator – Modals – Back BuWon

Slide 27

Slide 27 text

To Summarize •  React is awesome •  React Na(ve is awesome x 2 •  Rethink mobile paWerns

Slide 28

Slide 28 text

Thanks tech.taskrabbit.com taskrabbit.com/careers twiWer.com/bleonard $ off your next task! Promo code: BLSENTME