React Native @ Airbnb

7fd4ba468da56bb5330a6352c1b54f52?s=47 felipecsl
September 12, 2016

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

7fd4ba468da56bb5330a6352c1b54f52?s=128

felipecsl

September 12, 2016
Tweet

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

  6. None
  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

  11. None
  12. Code Push

  13. Code Push - OTA updates - Hot Fixes - Experimentation

    - Continuous Deployment
  14. None
  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

  47. None