【RECRUIT Technologies NIGHT vol.5】リクルート流フロントエンド開発 / https://atnd.org/events/86112
ϑϩϯτΤϯυΤϯδχΞ͕ React Native Λ৮ͬͯΈͨRECRUIT Technologies NIGHT vol.5ח ਖ਼ʢϦΫϧʔτςΫϊϩδʔζɹITιϦϡʔγϣϯ౷ׅ෦ʣ
View Slide
ࣗݾհ• ໊લɿח ਖ਼• ৬ۀɿϑϩϯτΤϯυΤϯδχΞ• React/Redux ͱ͔ͬͯWebΞϓϦΛ࡞͍ͬͯΔ• React Native ͷௐࠪʢ2017/01ʙʣ
ຊͷ༰• React Native ʹ͍ͭͯ• ͳͥ React Native ͳͷ͔• React Native ΞʔΩςΫνϟ• σϞΞϓϦհ
React Native ͱ• Facebook͕த৺ͱͳͬͯ։ൃΛ͍ͯ͠ΔωΠςΟϒΞϓϦ։ൃͷͨΊͷϑϨʔϜϫʔΫ• ಛ• Webٕज़/ࣝ(HTML/CSS/JavaScript/React)ΛͬͯɺiOS/AndroidͷΞϓϦΛ։ൃͰ͖Δ• Native UI (WebViewͰͳ͍)• ϋΠύϑΥʔϚϯε• ։ൃޮ͕ྑ͍(Live Reload, Hot Reloading)
— Tom Occhino (Engineering Manager at Facebook)Learn Once, Write Anywhere”“
• Web ΞϓϦͰ React Λ࠾༻͢Δέʔε͕૿͍͑ͯΔ• React Λॻ͚Δਓࡐ͕૿͍͑ͯΔ• ਓһ֬อָ͕ʹͳΔ• React Native Λ͏͜ͱʹΑͬͯ React(Web) Λ͑ΔΤϯδχΞͷࣄ෯Λ֦େͰ͖Δ
React Native(Platforms)• iOS/Android/tvOS• built in
React Native for Windows• react-native-windows• https://github.com/ReactWindows/react-native-windows
React Native for MacOS• react-native-macos• https://github.com/ptmt/react-native-macos
React Native for MacOS• react-native-touchbar• https://github.com/ptmt/react-native-touchbar
Showcasehttps://facebook.github.io/react-native/showcase.html
Instagramhttps://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
Push Notification Settingshttps://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7• طଘΞϓϦͷ౷߹• ·ͣ؆୯ͳը໘͔ΒऔΓֻ͔ͬͨ• ݩʑWebView• UI͕γϯϓϧ• φϏήʔγϣϯগͳ͍
Edit Profile & Photos Ofhttps://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7• ωΠςΟϒͰ࡞ͬͨը໘Λ React Native Խ• ύϑΥʔϚϯεΛଌఆ• τϨʔυΦϑ͕Ͳͷ͘Β͍͔
Instagram(code sharing)https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7• iOS/Android ؒͰڞ௨ԽͰ͖ͨίʔυ
WebView → React Nativehttps://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7• WebView ͷ• ىಈ͕͍• UXʹωΠςΟϒײ͕ͳ͍• React Native Խ͢Δ͜ͱʹΑΓ• ىಈ࣌ؒͱUXΛେ෯ʹվળ
True Native → React Nativehttps://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7• ίʔυͷڞ௨Խ• Live Reload, Hot Reloadingͷ͓͔͛ͰίϯύΠϧɺΠϯετʔϧαΠΫϧ͕ૣ͘ͳΓ։ൃύϑΥʔϚϯε্• ΑΓૣ͘ػೳΛϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ
DEMO
React(Web)/React Nativeͱͷҧ͍ϙΠϯτViewComponentɺϥΠϑελΠϧͷߟ͑ํಉ༷ཁૉ React Native ͷ Component ʹॻ͖͑StyleCSSͷ͕ࣝͦͷ··͑ΔFlexbox ʹΑΔ Component ͷஔData Flow fluxΞʔΩςΫνϟͷར༻͕ՄೳNavigationʢը໘ભҠʣreact-routerϥΠΫͳϞδϡʔϧ͕͋Δ
View• JSXʹΑΔ࣮React React Native
Viewrender() {return (My Counter App!{this.state.count}title="Add +1"onPress={() => this.inc()} />);}
Styleconst 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Ͱࢦఆ͢Δ
Stylerender() {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, }, });StyleSheetrender()
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, }, });
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, }, });
Style(FAQ)• CSS Modules ͕͍͍ͨʁ• ελΠϧఆٛΛผϑΝΠϧ(.css)ʹͯ͠importͯ͠ར༻͢Δํ๏• React Native ͷελΠϧఆٛ CSS ʹࣅͯΔ͚ͲͬͺΓผ• ίϯϙʔωϯτʹ༩Ͱ͖ͳ͍ϓϩύςΟ͕͋ΔͱܯࠂΛͩͯ͘͠ΕΔ• ҰԠɺ࣮ݱͰ͖Δύοέʔδ͋Δ• https://github.com/sabeurthabti/react-native-css
Style(FAQ)
Style(FAQ)ར༻Մೳͳkey
• ٙࣅཁૉ(:after/:before)͕͍͍ͨʁ• ٙࣅཁૉఘΊͯɺී௨ʹཁૉΛॻ͔͘͠ͳ͍• webfontΛ:beforeʹೖΕΔͱ͔webͩͱΑ͘Δ͚ͲͰ͖ͳ͍Style(FAQ)
• ٙࣅΫϥε͕͍͍ͨʁ• JSଆͰఆͯ͠ελΠϧࢦఆ͢Δඞཁ͕͋Δ• React Native ൛ Radium Έ͍ͨͳͷଘࡏ͢Δ• https://github.com/vitalets/react-native-extended-stylesheetStyle(FAQ):first-child i === 0:last-child i === arr.length - 1:nth-child(even) i % 2:nth-child(odd) !(i%2)
• shorthand͕͍͍ͨʁ• ղܾ͠Α͏ͱ͍ͯ͠ΔϞδϡʔϧ͋Δ(margin, padding͔͠ରԠ͍ͯ͠ͳ͍͚Ͳɾɾɾ)• https://github.com/narendrashetty/react-native-styles-shorthand• ඪ४Ͱ͍͔ͭ͘ରԠ• marginHorizontal, marginVertical• paddingHorizontal, paddingVerticalStyle(FAQ)
• CSS ʹ׳Ε͗͢Δͱ React Native ͷελΠϧఆٛ࠷ॳށ͏͔͠Εͳ͍• ֎෦ϞδϡʔϧͰղܾ͢Δબࢶ͋Δ͕ɺReact Native ͷόʔδϣϯ্͕͕Δ͜ͱͰղܾ͞ΕΔ͜ͱ͋ΔͷͰɺ·ͣඪ४ͷΓํͰͬͨ΄͏͕ྑ͍Style
iOS/Androidͷҧ͍• Write Once, Run Anywhere? - No!• ϓϥοτϑΥʔϜ͝ͱʹUI/UXͷϕετϓϥΫςΟεҧ͏• φϏήʔγϣϯʢΔϘλϯʣ• ϋϯόʔΨʔϝχϡʔ / λϒϝχϡʔ
iOS/Android• iOS/AndroidͰҟͳΔίʔυΛॻ͘ํ๏2ͭ͋Δ• Platform.OS, Platform.select• ϑΝΠϧࣗମΛ͚Δ• example.ios.js / example.android.js
Platform.OS, Platform.selectif (Platform.OS === ‘android’) {// Android ͷΈ࣮ߦ͢Δίʔυ} else if (Platform.OS === ‘ios’) {// iOS ͷΈ࣮ߦ͢Δίʔυ}// filesComponentIOS.jsComponentAndroid.js// componentconst Component = Platform.select({ios: () => require('ComponentIOS'),android: () => require('ComponentAndroid'),})();;
ϑΝΠϧࣗମΛ͚Δ// Filesexample.ios.jsexample.android.js// Usageimport example from './example';// Ϗϧυ࣌ʹఆ͞ΕΔ$ react-native run-ios$ react-native run-android
ͳͥ React Native ͳͷ͔• Webٕज़ΛͬͯϞόΠϧΞϓϦ։ൃΛՄೳʹ͢ΔϑϨʔϜϫʔΫ͍͔ͭ͋͘Δ• React Native• NativeScript• Ionic• PhoneGap/CordovaNative UIWebView
ͳͥ React Native ͳͷ͔• Ϣʔβʔͷଟ͍ΞϓϦͰ࠾༻͞Ε͍ͯΔʢFB, Instagram,Airbnbʣ• (R-Tech)FEඪ४Ͱ͋Δ React/Redux ͷαʔϏεͰ͋ΕɺWeb൛Ͱ։ൃͨ͠ίʔυͷڞ༗Խ͕Մೳ• FEඪ४Ͱ։ൃͰ͖ΔΤϯδχΞ૿Ճத
ͳͥ React Native ͳͷ͔• Web ΞϓϦΛ࡞ͬͨޙʹεϚϗΞϓϦ൛ཉ͍͠ͱ͍͏ཁ͋Δ• WebView ϕʔεͷαʔϏε͕ଟ͍ͷͰ React Native ԽʹΑΔύϑΥʔϚϯε্͕ૂ͑Δ• ੑೳྑ͘ͳ͍ͬͯͷͰɺࢿޮՌΞϓϦಛੑʹґଘ͢Δ
React Native ΞʔΩςΫνϟAndroid/iOSNativeJavaScriptCore(JSC)BridgeApp
Android/iOSNativeJavaScriptCore(JSC)Bridge(IPC)JS Runtime (Production)App
Android/iOSNative V8(Chrome)Bridge(WebSocket)JS Runtime (Debug Mode)App
JS Runtime (Debug Mode)Tap!
Chrome Dev ToolsʢWebSocketʣ
Chrome Dev ToolsʢBreak Pointsʣ
Data Flowtouchupdate
Data FlowTouch EventMain ThreadNative ModulesMessageQueueJS ThreadUITouch
Data FlowTouch Event Handle EventMain ThreadNative ModulesMessageQueueJS ThreadUITouch[‘EventEmitter’, ‘receiveTouches’,[‘topTouchStart’, {‘target’: 12, ’x’: 42, ‘y’: 106}]]
Data FlowTouch Event Handle EventMain ThreadNative ModulesMessageQueueJS ThreadUITouch setState(),render()
Data FlowTouch Event Handle EventMain ThreadNative ModulesMessageQueueJS ThreadUITouchUIManager.update….setState(),render()[‘UIManager’, ‘update’, [viewID, attributes]]
Data FlowTouch Event Handle EventMain ThreadNative ModulesMessageQueueJS ThreadUITouchUIManager.update….setState(),render()[‘UIManager’, ‘update’, [8, {‘text’: ‘6’}]]
Data FlowTouch Event Handle EventMain ThreadNative ModulesEvent QueueJS ThreadUITouchUIManager.update….setState(),render()Update UIdispatch_async()
Data FlowTouch Event Handle EventMain ThreadNative ModulesEvent QueueJS ThreadUITouchUIManager.update….setState(),render()Update UI[UIManager updateView: @8, props:@{@“text”: @“6”}]
σϞΞϓϦ• Web(React) Ͱ࡞ͬͨαʔϏεΛ React Native Ͱ࣮தWeb React Native
• ײ• Web ͷ React Λͬͨ͜ͱ͕͋Ε͙͢ʹॻ͚Δ/Θ͔Δ• Web ʹ͍ۙײ֮Ͱͷ։ൃ• npm• Cmd-RͰϦϩʔυɺLive Reload, Hot ReloadingDEMOΞϓϦ
• ײଓ͖• ը໘100%࡞Γ͠• Web Ͱ࡞ͬͨίϯϙʔωϯτΛࢀߟʹͰ͖Δ• Web ൛Λ Flexbox Ͱ࡞͍ͬͯͳ͍ͱߟ͑Δ͜ͱ͕૿͑Δ• ڞ௨ԽͰ͖Δίʔυ͕ଟ͍• Redux(Actions, Reducers)ɺBFF ͱͷ௨৴෦• mono-repo ͰߏΛߟ͑Δͷ͋ΓDEMOΞϓϦ
• ײଓ͖• Objective-C(Swift),Java ͷ͕ࣝඞཁʹͳΔͱ͜Ζ͍·ͷͱ͜Ζͳ͍• React Native ͕ఏڙ͍ͯ͠ͳ͍APIΛ͍͍ͨͱ͔ɺCocoapods Ͱಋೖͨ͠ϥΠϒϥϦͱ Bridge ͍ͨ͠ͱ͔ͳ͚Εɾɾɾ• ࠔͬͨͱ͖ͷͨΊʹνʔϜʹ1ਓ Native ʹৄ͍͠ਓཉ͍͠DEMOΞϓϦ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
stefafafan
niftycorp
yuya4
iamshunta
mosa_siru
h1kita
hhiroshell
smt7174
yutoy
yuj1osm
takanorig
bluesmoon
kastner
marcduiker
sugarenia
yeseniaperezcruz
aleyda
sachag
morganepeng
akosma
stephaniewalter
lemiorhan
wjessup