React Native Launch: React Native Meetup

We have a large React Native app in production and have developed patterns and approaches that have been fairly successful. Many of these are showcased in an open source sample project. How should you handle navigation? Is Flux any different in Native? What about testing? How do you share code across platforms? How easy is it to internationalize? In this talk, I’ll go through some implementations in the app and the decision criteria behind them.

Transcript

1. React Na(ve Launch Brian Leonard TaskRabbit 04/06/2016
4. Prototype •  10x faster (to develop) than iOS! but... •  Rou(ng? •  Flux? •  App structure? •  Tes(ng? •  Android?
6. Rou(ng tasker://ongoing/42/chat
7. Rou(ng tasker://ongoing/42/chat/schedule
8. Rou(ng •  URL completely contains state •  Components can bootstrap •  Push no(fca(ons •  Reloading can skip ahead
9. Flux Ac(on Dispatcher Store View
10. Flux Ac(on Dispatcher Store View
11. Flux Ac(on Dispatcher Store View
12. Flux Ac(on Dispatcher Store View
13. Flux Ac(on Dispatcher Store View
14. Flux Ac(on Dispatcher Store View
15. Data Storage •  Large Lists – Tasks (ac(ve and history) – Chat messages •  Singletons – User account / profile – Device – Environment
21. App Structure •  Self-contained screens •  Shared components •  Shared mixins •  Flux PaWern •  Naviga(on •  PlaXorm-specific
22. Tes(ng •  Unit •  Component •  Integra(on
24. 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
26. 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
27. To Summarize •  React is awesome •  React Na(ve is awesome x 2 •  Rethink mobile paWerns
28. Thanks tech.taskrabbit.com taskrabbit.com/careers twiWer.com/bleonard $ off your next task! Promo code: BLSENTME