react native in instagram - stanford university · javascriptcore (the vm used by react native both...

11

REACT NATIVE IN INSTAGRAM Yixin Wan — Feb 6, 2018

Upload: others

Post on 30-May-2020

7 views

Category:

Documents

0 download

Report

Download

Embed Size (px):

TRANSCRIPT

Page 1: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

REACT NATIVE IN INSTAGRAMYixin Wan — Feb 6, 2018

Page 2: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

WHY REACT NATIVE?Developer velocity

• Developer velocity is a defining 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.

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

Page 3: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

PAYMENTS CHECKOUT FLOW

Highlights • 2 JS engineers finished the development in 4 month on both iOS

and Android • 98% iOS and Android code sharing

Page 4: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

SHOPPING

4

thumbnail-based navigationCTA and header update collapsible description

AT&T 1:20 PM

glossierAT&T 1:20 PM

glossierAT&T 1:20 PM

glossier

Page 5: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

NOTIFICATION SETTINGS

Highlights • Metrics neutral in # of notifications sent and crash rate • Looks much better than the old WebView • 92% iOS and Android code sharing

Page 6: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

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

Page 7: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

LEAD GEN ADS

7

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

Page 8: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

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

Page 9: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

CHECKPOINTS

Highlights • 97% Code sharing

Page 10: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

CHALLENGESAnd 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.

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

Page 11: REACT NATIVE IN INSTAGRAM - Stanford University · JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. • Ended

React Native Accessibility - San Diego React and React Native Meetup

react-native - RIP TutorialProbando su instalación nativa React Use las herramientas de línea de comando React Native para generar un nuevo proyecto React Native llamado "AwesomeProject",

Workshop 26: React Native - The Native Side

React native-meetup-talk

React Native Notes for Professionals - Kicker · React Native React Native Notes for Professionals Notes for Professionals GoalKicker.com Free Programming Books Disclaimer This is

á~·D 1 a = ! REACT NATIVE jtechccu.csie.io/2015/slides/kudo.pdfOUTLINE _bV á~·D React Native UYg r ÞL, 1 React Native UYg o 1 React Native BÊ \ Y~

React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code this.sendEvent('next')} title='Verder'/> React

React-Native · •React framework + Native development •React primitives render to native platform UI •Core components mapping to native UI building blocks: ... Community Support

React Native Setup - nthu-datalab.github.io · React Native CLI vs Expo React Native CLI Expo Advantages •Add native modules written in Java/Objective-C •Having control over the

Native Apps in JavaScript with React Native: Lessons From ... · •Map Tour React Native prototype iOS ... Native Apps in JavaScript with React Native: Lessons From a Prototype,

React Native Firebase

Introduction to React Native

Nuxeo & React Native

p0 - CodeMobiles · 1. Setup and Introduction : React-Native Course Introduction NodeJS Install React-Native & Watchman Visual Studio Install and React-Native Extension Pack React-Native

REX react native

React Native: React Meetup 3

React Native copy remco - tweakers.net Suijten - React Native.pdf · React Native Integration with Existing Apps >create-react-native-app AwesomeProject

React Native - JSday

React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React native - React(ive) Way To Build Native Mobile Apps

React Native Workshop - React Alicante

React Native - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../react-10.pdf · React Navigation •React Navigation is not from facebook; it’s created by the React Native community

Railsconf 2017 - React & React Native a common codebase across native and web

React Native Internals

React Native - cursoapp.files.wordpress.com · React Native O React Native é instalado pelo comando "npm install -g react-native-cli", portanto, é necessário antes a instalação

React Native Intro

p0 - CodeMobilesWorkshop MO React Native 9MAP : MO React Native MO React Native Redux MO React Native Mg SQL Redux MySQL Redux MySQL. MO React Native MO React NativeMO React Native

React Native - Workshop

React Native Evening

React Native - laabhaa.com · React Native About the Tutorial React Native is a JavaScript framework for building native mobile apps. It uses the React framework and offers large

React native - t3chfest 2016

React Native Setup · 2020-03-02 · •Python: both 2, 3 works for react native •React Native: npminstall –g react-native-cli •Window: •Install Python2 and JDK through Chocolatey

React Native + Redux + ES6

Intro to react native

react-native - RIP Tutorial · Use react-navigation for navigation in react native apps 61 react-native Navigation with react-native-router-flux 62 Chapter 21: Navigator with buttons