Flare in Production
A Year with React Native
Connor McEwen
@connormcewen
Slide 2
Slide 2 text
About Me
cmcewen
@connormcewen
Lead Engineer,
Emerging Products Using React Native
since the beta
Slide 3
Slide 3 text
Flare
• Small business
community app
• 100% React Native
• Featured in App Store
+ Google Play Store
Slide 4
Slide 4 text
Why RN?
• React Component model for UI
• OTA Updates
• JS everywhere
• Cross-platform
Slide 5
Slide 5 text
The Cross Platform Dream
Slide 6
Slide 6 text
Reality
Slide 7
Slide 7 text
Platform Differences
• Design choices - material design
• Phone features - hardware back button
• Different APIs - permissions
• Performance
• Layout
Slide 8
Slide 8 text
Our stats
• ~30k LOC in project (client + server)
• 169 total files in client directory
• 4 .android.js + 4.ios.js = 4.7%
• 41 .js use the Platform API = 24%
imageContainer: {
paddingTop: Platform.OS === 'ios' ? 5 : 10
},
Slide 9
Slide 9 text
Tips to my past self
Slide 10
Slide 10 text
Flow
• Static type annotations
• Catch errors at “compile” time
• Refactoring is much easier
Slide 11
Slide 11 text
Modern JS syntax
• Use async/await, classes, etc.
• This + flow help buy-in from native devs
Slide 12
Slide 12 text
Nuclide
• IDE for RN
• Flow + ESLint erros
Slide 13
Slide 13 text
CodePush
• OTA Updates
• OSS alternatives you can host yourself
Slide 14
Slide 14 text
Redux/Redux-persist
• State management
• Logging much easier
• Auto-sync/rehydrate from disk
Slide 15
Slide 15 text
Node
• Reduces mental overhead
• Team is more multi-functional
• React for web apps is easier
Slide 16
Slide 16 text
Monorepo
• New features usually require client + server side
change
• Encourages everyone to review PRs
Slide 17
Slide 17 text
GraphQL
• Client specifies the shape + data it needs
• Say goodbye to /api/v1 + /api/v2
• Especially helpful since mobile doesn’t guarantee updates
Slide 18
Slide 18 text
ESLint
• Enforce a common style
• Code maintainability
Slide 19
Slide 19 text
npm
• Open source ecosystem is strong, but it’s a double
edged sword
• Use npm shrinkwrap
Slide 20
Slide 20 text
React Native Versions
• Stay a release or two behind bleeding edge for
stability
• Forking may be necessary for specific features or
bugfixes, but try to avoid it
• Forking on iOS/making JS changes is much easier
than Android
Slide 21
Slide 21 text
Team
• Team should be fullstack - features, not layers
• You probably still need 1 iOS and 1 Android
expert
• Get involved in the open source community