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
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A better future with KSS
kneath
238
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Scaling GitHub
holman
459
140k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Being A Developer After 40
akosma
89
590k
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]