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

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

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. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ɻ