$30 off During Our Annual Pro Sale. View Details »

フロントエンドエンジニアが React Native を触ってみた話

フロントエンドエンジニアが React Native を触ってみた話

【RECRUIT Technologies NIGHT vol.5】リクルート流フロントエンド開発 / https://atnd.org/events/86112

Kamakura Masaya

March 09, 2017
Tweet

Other Decks in Technology

Transcript

  1. ϑϩϯτΤϯυΤϯδχΞ͕ React Native Λ৮ͬͯΈͨ࿩
    RECRUIT Technologies NIGHT vol.5
    ח૔ ਖ਼໵ʢϦΫϧʔτςΫϊϩδʔζɹITιϦϡʔγϣϯ౷ׅ෦ʣ

    View Slide

  2. ࣗݾ঺հ
    • ໊લɿח૔ ਖ਼໵
    • ৬ۀɿϑϩϯτΤϯυΤϯδχΞ
    • React/Redux ͱ͔࢖ͬͯWebΞϓϦΛ࡞͍ͬͯΔ
    • React Native ͷௐࠪʢ2017/01ʙʣ

    View Slide

  3. ຊ೔ͷ಺༰
    • React Native ʹ͍ͭͯ
    • ͳͥ React Native ͳͷ͔
    • React Native ΞʔΩςΫνϟ
    • σϞΞϓϦ঺հ

    View Slide

  4. ຊ೔ͷ಺༰
    • React Native ʹ͍ͭͯ
    • ͳͥ React Native ͳͷ͔
    • React Native ΞʔΩςΫνϟ
    • σϞΞϓϦ঺հ

    View Slide

  5. React Native ͱ͸
    • Facebook͕த৺ͱͳͬͯ։ൃΛ͍ͯ͠ΔωΠςΟϒΞϓϦ։ൃͷͨΊͷ
    ϑϨʔϜϫʔΫ
    • ಛ௃
    • Webٕज़/஌ࣝ(HTML/CSS/JavaScript/React)Λ࢖ͬͯɺiOS/Android
    ͷΞϓϦΛ։ൃͰ͖Δ
    • Native UI (WebViewͰͳ͍)
    • ϋΠύϑΥʔϚϯε
    • ։ൃޮ཰͕ྑ͍(Live Reload, Hot Reloading)

    View Slide

  6. — Tom Occhino (Engineering Manager at Facebook)
    Learn Once, Write Anywhere


    View Slide

  7. • Web ΞϓϦͰ React Λ࠾༻͢Δέʔε͕૿͍͑ͯΔ
    • React Λॻ͚Δਓࡐ͕૿͍͑ͯΔ
    • ਓһ֬อָ͕ʹͳΔ
    • React Native Λ࢖͏͜ͱʹΑͬͯ React(Web) Λ࢖͑ΔΤϯδχΞ
    ͷ࢓ࣄ෯Λ֦େͰ͖Δ

    View Slide

  8. React Native(Platforms)
    • iOS/Android/tvOS
    • built in

    View Slide

  9. React Native for Windows
    • react-native-windows
    • https://github.com/ReactWindows/react-native-windows

    View Slide

  10. React Native for MacOS
    • react-native-macos
    • https://github.com/ptmt/react-native-macos

    View Slide

  11. React Native for MacOS
    • react-native-touchbar
    • https://github.com/ptmt/react-native-touchbar

    View Slide

  12. Showcase
    https://facebook.github.io/react-native/showcase.html

    View Slide

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

    View Slide

  14. Push Notification Settings
    https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
    • طଘΞϓϦ΁ͷ౷߹
    • ·ͣ͸؆୯ͳը໘͔ΒऔΓֻ͔ͬͨ
    • ݩʑWebView
    • UI͕γϯϓϧ
    • φϏήʔγϣϯগͳ͍

    View Slide

  15. Edit Profile & Photos Of
    https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
    • ωΠςΟϒͰ࡞ͬͨը໘Λ React Native Խ
    • ύϑΥʔϚϯεΛଌఆ
    • τϨʔυΦϑ͕Ͳͷ͘Β͍͔

    View Slide

  16. Instagram(code sharing)
    https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
    • iOS/Android ؒͰڞ௨ԽͰ
    ͖ͨίʔυ

    View Slide

  17. WebView → React Native
    https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
    • WebView ͷ໰୊఺
    • ىಈ͕஗͍
    • UXʹωΠςΟϒײ͕ͳ͍
    • React Native Խ͢Δ͜ͱʹΑΓ
    • ىಈ࣌ؒͱUXΛେ෯ʹվળ

    View Slide

  18. True Native → React Native
    https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
    • ίʔυͷڞ௨Խ
    • Live Reload, Hot Reloadingͷ
    ͓͔͛ͰίϯύΠϧɺΠϯετʔ
    ϧαΠΫϧ͕ૣ͘ͳΓ։ൃύ
    ϑΥʔϚϯε޲্
    • ΑΓૣ͘ػೳΛϦϦʔεͰ͖Δ
    Α͏ʹͳͬͨ

    View Slide

  19. DEMO

    View Slide

  20. React(Web)/React Nativeͱͷҧ͍
    ϙΠϯτ
    View
    ComponentɺϥΠϑελΠϧ౳ͷߟ͑ํ͸ಉ༷
    ཁૉ͸ React Native ͷ Component ʹॻ͖׵͑
    Style
    CSSͷ஌͕ࣝͦͷ··࢖͑Δ
    Flexbox ʹΑΔ Component ͷ഑ஔ
    Data Flow fluxΞʔΩςΫνϟͷར༻͕Մೳ
    Navigation
    ʢը໘ભҠʣ
    react-routerϥΠΫͳϞδϡʔϧ͕͋Δ

    View Slide

  21. View
    • JSXʹΑΔ࣮૷
    React React Native






    View Slide

  22. View
    render() {
    return (


    My Counter App!


    {this.state.count}

    title="Add +1"
    onPress={() => this.inc()} />

    );
    }

    View Slide

  23. Style
    const styles = StyleSheet.create({

    container: {

    flex: 1,

    alignItems: 'center',

    paddingTop: 65,

    backgroundColor: '#F5FCFF',

    },

    title: {

    fontSize: 25,

    margin: 10,

    },

    value: {

    color: '#333333',

    marginBottom: 5,

    fontSize: 40,

    },

    });
    • CSS in JS
    • StyleSheet.createͰఆٛͨ͠
    ελΠϧΛͦΕͧΕͷ
    ComponentʹదԠ͢Δ
    • Componentͷ഑ஔ͸Flexbox
    Ͱࢦఆ͢Δ

    View Slide

  24. Style
    const styles = StyleSheet.create({

    container: {

    flex: 1,

    alignItems: 'center',

    paddingTop: 65,

    backgroundColor: '#F5FCFF',

    },

    title: {

    fontSize: 25,

    margin: 10,

    },

    value: {

    color: '#333333',

    marginBottom: 5,

    fontSize: 40,

    },

    });
    • CSS in JS
    • StyleSheet.createͰఆٛͨ͠
    ελΠϧΛͦΕͧΕͷ
    ComponentʹదԠ͢Δ
    • Componentͷ഑ஔ͸Flexbox
    Ͱࢦఆ͢Δ

    View Slide

  25. Style
    render() {
    return (


    My Counter App!


    {this.state.count}

    title="Add +1"
    onPress={() => this.inc()} />

    );
    }
    const styles = StyleSheet.create({

    container: {

    flex: 1,

    alignItems: 'center',

    paddingTop: 65,

    backgroundColor: '#F5FCFF',

    },

    title: {

    fontSize: 25,

    margin: 10,

    },

    value: {

    color: '#333333',

    marginBottom: 5,

    fontSize: 40,

    },

    });
    StyleSheet
    render()

    View Slide

  26. Style
    const styles = StyleSheet.create({

    container: {

    flex: 1,

    alignItems: 'center',

    paddingTop: 65,

    backgroundColor: '#F5FCFF',

    },

    title: {

    fontSize: 25,

    margin: 10,

    },

    value: {

    color: '#333333',

    marginBottom: 5,

    fontSize: 40,

    },

    });
    • CSS in JS
    • StyleSheet.createͰఆٛͨ͠
    ελΠϧΛͦΕͧΕͷ
    ComponentʹదԠ͢Δ
    • Componentͷ഑ஔ͸Flexbox
    Ͱࢦఆ͢Δ

    View Slide

  27. Style(Flexbox:flexDirection)
    const styles = StyleSheet.create({

    container: {

    flex: 1,

    flexDirection: 'row',
    alignItems: 'center',

    paddingTop: 65,

    backgroundColor: '#F5FCFF',

    },

    title: {

    fontSize: 25,

    margin: 10,

    },

    value: {

    color: '#333333',

    marginBottom: 5,

    fontSize: 40,

    },

    });

    View Slide

  28. Style(Flexbox:justifyContent)
    const styles = StyleSheet.create({

    container: {

    flex: 1,

    alignItems: ‘center',
    justifyContent: ‘space-between’,

    paddingTop: 65,

    backgroundColor: '#F5FCFF',

    },

    title: {

    fontSize: 25,

    margin: 10,

    },

    value: {

    color: '#333333',

    marginBottom: 5,

    fontSize: 40,

    },

    });

    View Slide

  29. Style(FAQ)
    • CSS Modules ͕࢖͍͍ͨʁ
    • ελΠϧఆٛΛผϑΝΠϧ(.css)ʹͯ͠importͯ͠ར༻͢Δํ๏
    • React Native ͷελΠϧఆٛ͸ CSS ʹࣅͯΔ͚Ͳ΍ͬͺΓผ෺
    • ίϯϙʔωϯτʹ෇༩Ͱ͖ͳ͍ϓϩύςΟ͕͋ΔͱܯࠂΛͩ͠
    ͯ͘ΕΔ
    • ҰԠɺ࣮ݱͰ͖Δύοέʔδ͸͋Δ
    • https://github.com/sabeurthabti/react-native-css

    View Slide

  30. Style(FAQ)

    View Slide

  31. Style(FAQ)
    ར༻Մೳͳkey

    View Slide

  32. • ٙࣅཁૉ(:after/:before)͕࢖͍͍ͨʁ
    • ٙࣅཁૉ͸ఘΊͯɺී௨ʹཁૉΛॻ͔͘͠ͳ͍
    • webfontΛ:beforeʹೖΕΔͱ͔webͩͱΑ͘΍Δ͚ͲͰ͖ͳ͍
    Style(FAQ)

    View Slide

  33. • ٙࣅΫϥε͕࢖͍͍ͨʁ
    • JSଆͰ൑ఆͯ͠ελΠϧࢦఆ͢Δඞཁ͕͋Δ
    • React Native ൛ Radium Έ͍ͨͳͷ΋ଘࡏ͢Δ
    • https://github.com/vitalets/react-native-extended-stylesheet
    Style(FAQ)
    :first-child i === 0
    :last-child i === arr.length - 1
    :nth-child(even) i % 2
    :nth-child(odd) !(i%2)

    View Slide

  34. • shorthand͕࢖͍͍ͨʁ
    • ղܾ͠Α͏ͱ͍ͯ͠ΔϞδϡʔϧ͸͋Δ(margin, padding͔͠ରԠ͠
    ͍ͯͳ͍͚Ͳɾɾɾ)
    • https://github.com/narendrashetty/react-native-styles-shorthand
    • ඪ४Ͱ΋͍͔ͭ͘ରԠ
    • marginHorizontal, marginVertical
    • paddingHorizontal, paddingVertical
    Style(FAQ)

    View Slide

  35. • CSS ʹ׳Ε͗͢Δͱ React Native ͷελΠϧఆٛ͸࠷ॳށ࿭͏͔΋
    ͠Εͳ͍
    • ֎෦ϞδϡʔϧͰղܾ͢Δબ୒ࢶ΋͋Δ͕ɺReact Native ͷόʔ
    δϣϯ্͕͕Δ͜ͱͰղܾ͞ΕΔ͜ͱ΋͋ΔͷͰɺ·ͣ͸ඪ४ͷ
    ΍ΓํͰ΍ͬͨ΄͏͕ྑ͍
    Style

    View Slide

  36. iOS/Androidͷҧ͍
    • Write Once, Run Anywhere? - No!
    • ϓϥοτϑΥʔϜ͝ͱʹUI/UXͷϕετϓϥΫςΟε͸ҧ͏
    • φϏήʔγϣϯʢ໭ΔϘλϯʣ
    • ϋϯόʔΨʔϝχϡʔ / λϒϝχϡʔ

    View Slide

  37. iOS/Android
    • iOS/AndroidͰҟͳΔίʔυΛॻ͘ํ๏͸2ͭ͋Δ
    • Platform.OS, Platform.select
    • ϑΝΠϧࣗମΛ෼͚Δ
    • example.ios.js / example.android.js

    View Slide

  38. Platform.OS, Platform.select
    if (Platform.OS === ‘android’) {
    // Android ͷΈ࣮ߦ͢Δίʔυ
    } else if (Platform.OS === ‘ios’) {
    // iOS ͷΈ࣮ߦ͢Δίʔυ
    }
    // files
    ComponentIOS.js
    ComponentAndroid.js
    // component
    const Component = Platform.select({
    ios: () => require('ComponentIOS'),
    android: () => require('ComponentAndroid'),
    })();
    ;

    View Slide

  39. ϑΝΠϧࣗମΛ෼͚Δ
    // Files
    example.ios.js
    example.android.js
    // Usage
    import example from './example';
    // Ϗϧυ࣌ʹ൑ఆ͞ΕΔ
    $ react-native run-ios
    $ react-native run-android

    View Slide

  40. ຊ೔ͷ಺༰
    • React Native ʹ͍ͭͯ
    • ͳͥ React Native ͳͷ͔
    • React Native ΞʔΩςΫνϟ
    • σϞΞϓϦ঺հ

    View Slide

  41. ͳͥ React Native ͳͷ͔
    • Webٕज़Λ࢖ͬͯϞόΠϧΞϓϦ։ൃΛՄೳʹ͢ΔϑϨʔϜϫʔΫ͸
    ͍͔ͭ͋͘Δ
    • React Native
    • NativeScript
    • Ionic
    • PhoneGap/Cordova
    Native UI
    WebView

    View Slide

  42. ͳͥ React Native ͳͷ͔
    • Ϣʔβʔ਺ͷଟ͍ΞϓϦͰ࠾༻͞Ε͍ͯΔʢFB, Instagram,
    Airbnbʣ
    • (R-Tech)FEඪ४Ͱ͋Δ React/Redux ͷαʔϏεͰ͋Ε͹ɺWeb൛Ͱ
    ։ൃͨ͠ίʔυͷڞ༗Խ͕Մೳ
    • FEඪ४Ͱ։ൃͰ͖ΔΤϯδχΞ૿Ճத

    View Slide

  43. ͳͥ React Native ͳͷ͔
    • Web ΞϓϦΛ࡞ͬͨޙʹεϚϗΞϓϦ൛΋ཉ͍͠ͱ͍͏ཁ๬΋͋Δ
    • WebView ϕʔεͷαʔϏε͕ଟ͍ͷͰ React Native ԽʹΑΔύ
    ϑΥʔϚϯε޲্͕ૂ͑Δ
    • ୺຤ੑೳ΋ྑ͘ͳ͍ͬͯͷͰɺ౤ࢿޮՌ͸ΞϓϦಛੑʹґଘ͢Δ

    View Slide

  44. ຊ೔ͷ಺༰
    • React Native ʹ͍ͭͯ
    • ͳͥ React Native ͳͷ͔
    • React Native ΞʔΩςΫνϟ
    • σϞΞϓϦ঺հ

    View Slide

  45. React Native ΞʔΩςΫνϟ
    Android/iOS
    Native
    JavaScriptCore
    (JSC)
    Bridge
    App

    View Slide

  46. Android/iOS
    Native
    JavaScriptCore
    (JSC)
    Bridge(IPC)
    JS Runtime (Production)
    App

    View Slide

  47. Android/iOS
    Native V8(Chrome)
    Bridge(WebSocket)
    JS Runtime (Debug Mode)
    App

    View Slide

  48. JS Runtime (Debug Mode)
    Tap!

    View Slide

  49. Chrome Dev ToolsʢWebSocketʣ

    View Slide

  50. Chrome Dev ToolsʢBreak Pointsʣ

    View Slide

  51. Data Flow
    touch
    update

    View Slide

  52. Data Flow
    Touch Event
    Main Thread
    Native Modules
    MessageQueue
    JS Thread
    UITouch

    View Slide

  53. Data Flow
    Touch Event Handle Event
    Main Thread
    Native Modules
    MessageQueue
    JS Thread
    UITouch
    [
    ‘EventEmitter’, ‘receiveTouches’,
    [‘topTouchStart’, {‘target’: 12, ’x’: 42, ‘y’: 106}]
    ]

    View Slide

  54. Data Flow
    Touch Event Handle Event
    Main Thread
    Native Modules
    MessageQueue
    JS Thread
    UITouch setState(),
    render()

    View Slide

  55. Data Flow
    Touch Event Handle Event
    Main Thread
    Native Modules
    MessageQueue
    JS Thread
    UITouch
    UIManager.u
    pdate….
    setState(),
    render()
    [
    ‘UIManager’, ‘update’, [viewID, attributes]
    ]

    View Slide

  56. Data Flow
    Touch Event Handle Event
    Main Thread
    Native Modules
    MessageQueue
    JS Thread
    UITouch
    UIManager.u
    pdate….
    setState(),
    render()
    [
    ‘UIManager’, ‘update’, [viewID, attributes]
    ]

    View Slide

  57. Data Flow
    Touch Event Handle Event
    Main Thread
    Native Modules
    MessageQueue
    JS Thread
    UITouch
    UIManager.u
    pdate….
    setState(),
    render()
    [
    ‘UIManager’, ‘update’, [8, {‘text’: ‘6’}]
    ]

    View Slide

  58. Data Flow
    Touch Event Handle Event
    Main Thread
    Native Modules
    Event Queue
    JS Thread
    UITouch
    UIManager.u
    pdate….
    setState(),
    render()
    Update UI
    dispatch_async()

    View Slide

  59. Data Flow
    Touch Event Handle Event
    Main Thread
    Native Modules
    Event Queue
    JS Thread
    UITouch
    UIManager.u
    pdate….
    setState(),
    render()
    Update UI
    [UIManager updateView: @8, props:@{@“text”: @“6”}]

    View Slide

  60. ຊ೔ͷ಺༰
    • React Native ʹ͍ͭͯ
    • ͳͥ React Native ͳͷ͔
    • React Native ΞʔΩςΫνϟ
    • σϞΞϓϦ঺հ

    View Slide

  61. σϞΞϓϦ
    • Web(React) Ͱ࡞ͬͨαʔϏεΛ React Native Ͱ࣮૷த
    Web React Native

    View Slide

  62. • ײ૝
    • Web ͷ React Λ࢖ͬͨ͜ͱ͕͋Ε͹͙͢ʹॻ͚Δ/Θ͔Δ
    • Web ʹ͍ۙײ֮Ͱͷ։ൃ
    • npm
    • Cmd-RͰϦϩʔυɺLive Reload, Hot Reloading
    DEMOΞϓϦ

    View Slide

  63. • ײ૝ଓ͖
    • ը໘͸100%࡞Γ௚͠
    • Web Ͱ࡞ͬͨίϯϙʔωϯτΛࢀߟʹͰ͖Δ
    • Web ൛Λ Flexbox Ͱ࡞͍ͬͯͳ͍ͱߟ͑Δ͜ͱ͕૿͑Δ
    • ڞ௨ԽͰ͖Δίʔυ͕ଟ͍
    • Redux(Actions, Reducers)ɺBFF ͱͷ௨৴෦෼
    • mono-repo Ͱߏ੒Λߟ͑Δͷ΋͋Γ
    DEMOΞϓϦ

    View Slide

  64. • ײ૝ଓ͖
    • Objective-C(Swift),Java ͷ஌͕ࣝඞཁʹͳΔͱ͜Ζ͸͍·ͷͱ͜
    Ζͳ͍
    • React Native ͕ఏڙ͍ͯ͠ͳ͍APIΛ࢖͍͍ͨͱ͔ɺ
    Cocoapods Ͱಋೖͨ͠ϥΠϒϥϦͱ Bridge ͍ͨ͠ͱ͔ͳ͚Ε
    ͹ɾɾɾ
    • ࠔͬͨͱ͖ͷͨΊʹνʔϜʹ1ਓ͸ Native ʹৄ͍͠ਓ͸ཉ͍͠
    DEMOΞϓϦ

    View Slide

  65. ͝ਗ਼ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠ɻ

    View Slide