REACT NATIVE in INSTAGRAM Yixin Wan — Feb 6, 2018 WHY REACT NATIVE? Developer Velocity

REACT NATIVE IN INSTAGRAM Yixin Wan — Feb 6, 2018 WHY REACT NATIVE? Developer velocity

• Developer velocity is a deﬁning value of Instagram’s mobile engineering. • React Native allowed product teams to ship features faster to both iOS and Android apps through code sharing and higher iteration speeds.

https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 2 PAYMENTS CHECKOUT FLOW

Highlights

• 2 JS engineers ﬁnished the development in 4 month on both iOS and Android • 98% iOS and Android code sharing SHOPPING

AT&T 1:20 PM AT&T 1:20 PM AT&T 1:20 PM

glossier glossier glossier

CTA and header update thumbnail-based navigation collapsible description 4 NOTIFICATION SETTINGS

Highlights

• Metrics neutral in # of notiﬁcations sent and crash rate • Looks much better than the old WebView • 92% iOS and Android code sharing COMMENT MODERATION

Highlights

• 85% iOS and Android Code sharing • Developed by a non-mobile developer with JS experience • Implemented in the span of one release cycle LEAD GEN ADS

Highlights • 87% iOS and Android Code sharing • Same React Native code is used for both Facebook and Instagram

7 POST PROMOTE

Highlights

• 99% Code sharing • Improved Time to Interact from ~7 seconds in original web view to ~3 seconds for React Native version

• Positive +3.9% increase in ads creation CHECKPOINTS

Highlights

• 97% Code sharing CHALLENGES And how to address them

• App Size and Android Methods Count • Ended up selectively pulling in the parts needed and re-write other implementations, adding ~3500 methods and 1~2 MB size increase • Start up overhead mostly caused by having to inject the JavaScript bundle into JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended up leveraging ideas and infra already built by the React Native team, namely Random Access Module Bundling, Inline Requires, Native Parallel Fetching, and plenty more already integrated into the framework.

https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 10