$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ιϦϡʔγϣϯ౷ׅ෦ʣ

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

    React Native ͷௐࠪʢ2017/01ʙʣ
  3. ຊ೔ͷ಺༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔

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

    • React Native ΞʔΩςΫνϟ • σϞΞϓϦ঺հ
  5. React Native ͱ͸ • Facebook͕த৺ͱͳͬͯ։ൃΛ͍ͯ͠ΔωΠςΟϒΞϓϦ։ൃͷͨΊͷ ϑϨʔϜϫʔΫ • ಛ௃ • Webٕज़/஌ࣝ(HTML/CSS/JavaScript/React)Λ࢖ͬͯɺiOS/Android

    ͷΞϓϦΛ։ൃͰ͖Δ • Native UI (WebViewͰͳ͍) • ϋΠύϑΥʔϚϯε • ։ൃޮ཰͕ྑ͍(Live Reload, Hot Reloading)
  6. — Tom Occhino (Engineering Manager at Facebook) Learn Once, Write

    Anywhere ” “
  7. • Web ΞϓϦͰ React Λ࠾༻͢Δέʔε͕૿͍͑ͯΔ • React Λॻ͚Δਓࡐ͕૿͍͑ͯΔ • ਓһ֬อָ͕ʹͳΔ

    • React Native Λ࢖͏͜ͱʹΑͬͯ React(Web) Λ࢖͑ΔΤϯδχΞ ͷ࢓ࣄ෯Λ֦େͰ͖Δ
  8. React Native(Platforms) • iOS/Android/tvOS • built in

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

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

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

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

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

  14. Push Notification Settings https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • طଘΞϓϦ΁ͷ౷߹ • ·ͣ͸؆୯ͳը໘͔ΒऔΓֻ͔ͬͨ • ݩʑWebView

    • UI͕γϯϓϧ • φϏήʔγϣϯগͳ͍
  15. Edit Profile & Photos Of https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • ωΠςΟϒͰ࡞ͬͨը໘Λ React Native

    Խ • ύϑΥʔϚϯεΛଌఆ • τϨʔυΦϑ͕Ͳͷ͘Β͍͔
  16. Instagram(code sharing) https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • iOS/Android ؒͰڞ௨ԽͰ ͖ͨίʔυ

  17. WebView → React Native https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • WebView ͷ໰୊఺ • ىಈ͕஗͍

    • UXʹωΠςΟϒײ͕ͳ͍ • React Native Խ͢Δ͜ͱʹΑΓ • ىಈ࣌ؒͱUXΛେ෯ʹվળ
  18. True Native → React Native https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • ίʔυͷڞ௨Խ • Live

    Reload, Hot Reloadingͷ ͓͔͛ͰίϯύΠϧɺΠϯετʔ ϧαΠΫϧ͕ૣ͘ͳΓ։ൃύ ϑΥʔϚϯε޲্ • ΑΓૣ͘ػೳΛϦϦʔεͰ͖Δ Α͏ʹͳͬͨ
  19. DEMO

  20. React(Web)/React Nativeͱͷҧ͍ ϙΠϯτ View ComponentɺϥΠϑελΠϧ౳ͷߟ͑ํ͸ಉ༷ ཁૉ͸ React Native ͷ Component

    ʹॻ͖׵͑ Style CSSͷ஌͕ࣝͦͷ··࢖͑Δ Flexbox ʹΑΔ Component ͷ഑ஔ Data Flow fluxΞʔΩςΫνϟͷར༻͕Մೳ Navigation ʢը໘ભҠʣ react-routerϥΠΫͳϞδϡʔϧ͕͋Δ
  21. View • JSXʹΑΔ࣮૷ React React Native <div> <span> <img> <View>

    <Text> <Image>
  22. View render() { return ( <View style={styles.container}> <Text style={styles.title}> My

    Counter App! </Text> <Text style={styles.value}> {this.state.count} </Text> <Button title="Add +1" onPress={() => this.inc()} /> </View> ); }
  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 Ͱࢦఆ͢Δ
  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 Ͱࢦఆ͢Δ
  25. Style render() { return ( <View style={styles.container}> <Text style={styles.title}> My

    Counter App! </Text> <Text style={styles.value}> {this.state.count} </Text> <Button title="Add +1" onPress={() => this.inc()} /> </View> ); } 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()
  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 Ͱࢦఆ͢Δ
  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,
 },
 });
  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,
 },
 });
  29. Style(FAQ) • CSS Modules ͕࢖͍͍ͨʁ • ελΠϧఆٛΛผϑΝΠϧ(.css)ʹͯ͠importͯ͠ར༻͢Δํ๏ • React Native

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

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

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

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

    • marginHorizontal, marginVertical • paddingHorizontal, paddingVertical Style(FAQ)
  35. • CSS ʹ׳Ε͗͢Δͱ React Native ͷελΠϧఆٛ͸࠷ॳށ࿭͏͔΋ ͠Εͳ͍ • ֎෦ϞδϡʔϧͰղܾ͢Δબ୒ࢶ΋͋Δ͕ɺReact Native

    ͷόʔ δϣϯ্͕͕Δ͜ͱͰղܾ͞ΕΔ͜ͱ΋͋ΔͷͰɺ·ͣ͸ඪ४ͷ ΍ΓํͰ΍ͬͨ΄͏͕ྑ͍ Style
  36. iOS/Androidͷҧ͍ • Write Once, Run Anywhere? - No! • ϓϥοτϑΥʔϜ͝ͱʹUI/UXͷϕετϓϥΫςΟε͸ҧ͏

    • φϏήʔγϣϯʢ໭ΔϘλϯʣ • ϋϯόʔΨʔϝχϡʔ / λϒϝχϡʔ
  37. iOS/Android • iOS/AndroidͰҟͳΔίʔυΛॻ͘ํ๏͸2ͭ͋Δ • Platform.OS, Platform.select • ϑΝΠϧࣗମΛ෼͚Δ • example.ios.js

    / example.android.js
  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'), })(); <Component />;
  39. ϑΝΠϧࣗମΛ෼͚Δ // Files example.ios.js example.android.js // Usage import example from

    './example'; // Ϗϧυ࣌ʹ൑ఆ͞ΕΔ $ react-native run-ios $ react-native run-android
  40. ຊ೔ͷ಺༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔

    • React Native ΞʔΩςΫνϟ • σϞΞϓϦ঺հ
  41. ͳͥ React Native ͳͷ͔ • Webٕज़Λ࢖ͬͯϞόΠϧΞϓϦ։ൃΛՄೳʹ͢ΔϑϨʔϜϫʔΫ͸ ͍͔ͭ͋͘Δ • React Native

    • NativeScript • Ionic • PhoneGap/Cordova Native UI WebView
  42. ͳͥ React Native ͳͷ͔ • Ϣʔβʔ਺ͷଟ͍ΞϓϦͰ࠾༻͞Ε͍ͯΔʢFB, Instagram, Airbnbʣ • (R-Tech)FEඪ४Ͱ͋Δ

    React/Redux ͷαʔϏεͰ͋Ε͹ɺWeb൛Ͱ ։ൃͨ͠ίʔυͷڞ༗Խ͕Մೳ • FEඪ४Ͱ։ൃͰ͖ΔΤϯδχΞ૿Ճத
  43. ͳͥ React Native ͳͷ͔ • Web ΞϓϦΛ࡞ͬͨޙʹεϚϗΞϓϦ൛΋ཉ͍͠ͱ͍͏ཁ๬΋͋Δ • WebView ϕʔεͷαʔϏε͕ଟ͍ͷͰ

    React Native ԽʹΑΔύ ϑΥʔϚϯε޲্͕ૂ͑Δ • ୺຤ੑೳ΋ྑ͘ͳ͍ͬͯͷͰɺ౤ࢿޮՌ͸ΞϓϦಛੑʹґଘ͢Δ
  44. ຊ೔ͷ಺༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔

    • React Native ΞʔΩςΫνϟ • σϞΞϓϦ঺հ
  45. React Native ΞʔΩςΫνϟ Android/iOS Native JavaScriptCore (JSC) Bridge App

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

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

  48. JS Runtime (Debug Mode) Tap!

  49. Chrome Dev ToolsʢWebSocketʣ

  50. Chrome Dev ToolsʢBreak Pointsʣ

  51. Data Flow touch update

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

    Thread UITouch
  53. Data Flow Touch Event Handle Event Main Thread Native Modules

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

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

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

    MessageQueue JS Thread UITouch UIManager.u pdate…. setState(), render() [ ‘UIManager’, ‘update’, [viewID, attributes] ]
  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’}] ]
  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()
  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”}]
  60. ຊ೔ͷ಺༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔

    • React Native ΞʔΩςΫνϟ • σϞΞϓϦ঺հ
  61. σϞΞϓϦ • Web(React) Ͱ࡞ͬͨαʔϏεΛ React Native Ͱ࣮૷த Web React Native

  62. • ײ૝ • Web ͷ React Λ࢖ͬͨ͜ͱ͕͋Ε͹͙͢ʹॻ͚Δ/Θ͔Δ • Web ʹ͍ۙײ֮Ͱͷ։ൃ

    • npm • Cmd-RͰϦϩʔυɺLive Reload, Hot Reloading DEMOΞϓϦ
  63. • ײ૝ଓ͖ • ը໘͸100%࡞Γ௚͠ • Web Ͱ࡞ͬͨίϯϙʔωϯτΛࢀߟʹͰ͖Δ • Web ൛Λ

    Flexbox Ͱ࡞͍ͬͯͳ͍ͱߟ͑Δ͜ͱ͕૿͑Δ • ڞ௨ԽͰ͖Δίʔυ͕ଟ͍ • Redux(Actions, Reducers)ɺBFF ͱͷ௨৴෦෼ • mono-repo Ͱߏ੒Λߟ͑Δͷ΋͋Γ DEMOΞϓϦ
  64. • ײ૝ଓ͖ • Objective-C(Swift),Java ͷ஌͕ࣝඞཁʹͳΔͱ͜Ζ͸͍·ͷͱ͜ Ζͳ͍ • React Native ͕ఏڙ͍ͯ͠ͳ͍APIΛ࢖͍͍ͨͱ͔ɺ

    Cocoapods Ͱಋೖͨ͠ϥΠϒϥϦͱ Bridge ͍ͨ͠ͱ͔ͳ͚Ε ͹ɾɾɾ • ࠔͬͨͱ͖ͷͨΊʹνʔϜʹ1ਓ͸ Native ʹৄ͍͠ਓ͸ཉ͍͠ DEMOΞϓϦ
  65. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ɻ