React Native @ Airbnb

This presentation was originally given by Leland Richardson and myself at the Bay Area Android Developer Meetup group at August 23rd, 2016 @ the LinkedIn SF office.

Meetup original link:
http://www.meetup.com/bayareaandroid/events/233316337/

Talk video:
https://www.youtube.com/watch?v=S6GdvVQB39Y&feature=youtu.be&t=24m

Transcript

1. React Native @ Airbnb FELIPE LIMA & LELAND RICHARDSON
2. Why React Native?
3. We build Airbnb 3 times
4. We build Airbnb 3 times
5. JavaScript Core VM Native UI Platform
7. Developer Experience
8. User Experience Developer Experience
9. User Experience Developer Experience Web Native Mobile React Native Developer Experience User Experience Web Native RN
10. Live Reload
12. Code Push
13. Code Push - OTA updates - Hot Fixes - Experimentation - Continuous Deployment
15. Type Safety
16. Performance
17. Misconceptions
18. Does the JS compile to native code? No.
19. Does the JS runs in a web view? No.
20. What if I want to use the platform’s latest API’s? Use them!
21. How does it work?
22. Bridge JavaScript Core VM Native UI Platform Layout Rendering Gestures Application Logic UI Description
23. Shadow JSC Main Gesture / Interaction
24. Shadow JSC Main Gesture / Interaction React Render
25. Shadow JSC Main Gesture / Interaction React Render Diff
26. Shadow JSC Main Gesture / Interaction React Render Layout Diff
27. Shadow JSC Main Gesture / Interaction React Render Layout Render Diff
28. Shadow JSC Main Gesture / Interaction React Render Layout Render Diff 16 ms
29. React
30. UI = f(state)
31. import React from 'react'; class HelloWorld extends React.Component { render() { return ( <div> <span> Hello World </span> </div> ); } }
32. import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View> <Text> Hello World </Text> </View> ); } }
33. import { View, Text, Image, ScrollView, TextInput, ListView, MapView, ... } from 'react-native';
34. import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View> <Text> Hello World </Text> </View> ); } }
35. import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return { type: View, props: null, children: [{ type: Text, props: null, children: ['Hello World'], }], }; } }
36. import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View> <Text> Hello World </Text> </View> ); } }
37. import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.message}> Hello World </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, message: { fontSize: 28, fontColor: '#222222', }, });
38. const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, message: { fontSize: 28, fontColor: '#222222', }, }); { container: { top: 0, left: 0, width: 370, height: 600, }, message: { top: 280, left: 125, width: 120, height: 40, }, }
39. import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View> <Text> Hello World </Text> </View> ); } }
40. import React from 'react'; import { View, Text } from 'react-native'; class HelloUser extends React.Component { render() { return ( <View> <Text> Hello, {this.props.name} </Text> </View> ); } }
41. import React from 'react'; import { View } from 'react-native'; import HelloUser from './HelloUser'; class HelloApp extends React.Component { render() { const { user } = this.props; return ( <View> <HelloUser name={user.name} /> </View> ); } }
42. Native Modules
43. class AccountModule extends ReactContextBaseJavaModule {
 AccountModule(ReactApplicationContext reactContext) {
 super(reactContext);
 }
 
 @Override
 public String getName() {
 return "AccountBridge";
 }
 
 @Override
 public Map<String, Object> getConstants() {
 return Collections.emptyMap();
 } @ReactMethod
 public void setUserLocation(String location) {
 currentUser.setLocation(location);
 }
 
 @Subscribe
 public void loginStatusChanged(AuthStateEvent lse) {
 ReactApplicationContext context = getReactApplicationContext();
 context.getJSModule(RCTDeviceEventEmitter.class)
 .emit("airbnb.accountUpdated", toWritableMap(getData()));
 }
 }
44. class ReactAirImageManager extends SimpleViewManager<ReactAirImageView> {
 @Override
 public String getName() {
 return "RCTImageView";
 }
 
 @Override
 protected ReactAirImageView createViewInstance(ThemedReactContext context) {
 return new ReactAirImageView(context, null);
 }
 
 @ReactProp(name = "src")
 public void setSource(ReactAirImageView view, @Nullable ReadableArray sources) {
 view.setSource(sources);
 }
 
 @ReactProp(name = "borderColor", defaultInt = Color.TRANSPARENT, customType = "Color")
 public void setBorderColor(ReactAirImageView view, int borderColor) {
 view.setBorderColor(Color.RED);
 } }
45. I’ll believe it when I see it…
46. Thank You Leland Richardson @intelligibabble Felipe Lima @felipecsl