Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Year With React Native
Search
Connor McEwen
November 02, 2016
0
110
A Year With React Native
Connor McEwen
November 02, 2016
Tweet
Share
More Decks by Connor McEwen
See All by Connor McEwen
Cross-Platform React Native
cmcewen
0
56
React Native Dev Tools
cmcewen
0
430
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Your Own Lightsaber
phodgson
104
6.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
We Have a Design System, Now What?
morganepeng
51
7.4k
Done Done
chrislema
182
16k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
Flare in Production A Year with React Native Connor McEwen
@connormcewen
About Me cmcewen @connormcewen Lead Engineer, Emerging Products Using React
Native since the beta
Flare • Small business community app • 100% React Native
• Featured in App Store + Google Play Store
Why RN? • React Component model for UI • OTA
Updates • JS everywhere • Cross-platform
The Cross Platform Dream
Reality
Platform Differences • Design choices - material design • Phone
features - hardware back button • Different APIs - permissions • Performance • Layout
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 },
Tips to my past self
Flow • Static type annotations • Catch errors at “compile”
time • Refactoring is much easier
Modern JS syntax • Use async/await, classes, etc. • This
+ flow help buy-in from native devs
Nuclide • IDE for RN • Flow + ESLint erros
CodePush • OTA Updates • OSS alternatives you can host
yourself
Redux/Redux-persist • State management • Logging much easier • Auto-sync/rehydrate
from disk
Node • Reduces mental overhead • Team is more multi-functional
• React for web apps is easier
Monorepo • New features usually require client + server side
change • Encourages everyone to review PRs
GraphQL • Client specifies the shape + data it needs
• Say goodbye to /api/v1 + /api/v2 • Especially helpful since mobile doesn’t guarantee updates
ESLint • Enforce a common style • Code maintainability
npm • Open source ecosystem is strong, but it’s a
double edged sword • Use npm shrinkwrap
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
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
New stuff • GraphQL clients: Apollo/Relay • Yarn • Exponent
• Native Animations
Stay informed • Release Notes • Reactiflux/Exponent Slack • RN
crew on Twitter
Overall • React Native was definitely the right choice for
us, and it’s only growing in popularity
Thanks! @connormcewen
[email protected]