Slide 1
Slide 1 text
ϑϩϯτΤϯυΤϯδχΞ͕ React Native Λ৮ͬͯΈͨ
RECRUIT Technologies NIGHT vol.5
ח ਖ਼ʢϦΫϧʔτςΫϊϩδʔζɹITιϦϡʔγϣϯ౷ׅ෦ʣ
Slide 2
Slide 2 text
ࣗݾհ
• ໊લɿח ਖ਼
• ৬ۀɿϑϩϯτΤϯυΤϯδχΞ
• React/Redux ͱ͔ͬͯWebΞϓϦΛ࡞͍ͬͯΔ
• React Native ͷௐࠪʢ2017/01ʙʣ
Slide 3
Slide 3 text
ຊͷ༰
• React Native ʹ͍ͭͯ
• ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ
• σϞΞϓϦհ
Slide 4
Slide 4 text
ຊͷ༰
• React Native ʹ͍ͭͯ
• ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ
• σϞΞϓϦհ
Slide 5
Slide 5 text
React Native ͱ
• Facebook͕த৺ͱͳͬͯ։ൃΛ͍ͯ͠ΔωΠςΟϒΞϓϦ։ൃͷͨΊͷ
ϑϨʔϜϫʔΫ
• ಛ
• Webٕज़/ࣝ(HTML/CSS/JavaScript/React)ΛͬͯɺiOS/Android
ͷΞϓϦΛ։ൃͰ͖Δ
• Native UI (WebViewͰͳ͍)
• ϋΠύϑΥʔϚϯε
• ։ൃޮ͕ྑ͍(Live Reload, Hot Reloading)
Slide 6
Slide 6 text
— Tom Occhino (Engineering Manager at Facebook)
Learn Once, Write Anywhere
”
“
Slide 7
Slide 7 text
• Web ΞϓϦͰ React Λ࠾༻͢Δέʔε͕૿͍͑ͯΔ
• React Λॻ͚Δਓࡐ͕૿͍͑ͯΔ
• ਓһ֬อָ͕ʹͳΔ
• React Native Λ͏͜ͱʹΑͬͯ React(Web) Λ͑ΔΤϯδχΞ
ͷࣄ෯Λ֦େͰ͖Δ
Slide 8
Slide 8 text
React Native(Platforms)
• iOS/Android/tvOS
• built in
Slide 9
Slide 9 text
React Native for Windows
• react-native-windows
• https://github.com/ReactWindows/react-native-windows
Slide 10
Slide 10 text
React Native for MacOS
• react-native-macos
• https://github.com/ptmt/react-native-macos
Slide 11
Slide 11 text
React Native for MacOS
• react-native-touchbar
• https://github.com/ptmt/react-native-touchbar
Slide 12
Slide 12 text
Showcase
https://facebook.github.io/react-native/showcase.html
Slide 13
Slide 13 text
Instagram
https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
Slide 14
Slide 14 text
Push Notification Settings
https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
• طଘΞϓϦͷ౷߹
• ·ͣ؆୯ͳը໘͔ΒऔΓֻ͔ͬͨ
• ݩʑWebView
• UI͕γϯϓϧ
• φϏήʔγϣϯগͳ͍
Slide 15
Slide 15 text
Edit Profile & Photos Of
https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
• ωΠςΟϒͰ࡞ͬͨը໘Λ React Native Խ
• ύϑΥʔϚϯεΛଌఆ
• τϨʔυΦϑ͕Ͳͷ͘Β͍͔
Slide 16
Slide 16 text
Instagram(code sharing)
https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
• iOS/Android ؒͰڞ௨ԽͰ
͖ͨίʔυ
Slide 17
Slide 17 text
WebView → React Native
https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
• WebView ͷ
• ىಈ͕͍
• UXʹωΠςΟϒײ͕ͳ͍
• React Native Խ͢Δ͜ͱʹΑΓ
• ىಈ࣌ؒͱUXΛେ෯ʹվળ
Slide 18
Slide 18 text
True Native → React Native
https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
• ίʔυͷڞ௨Խ
• Live Reload, Hot Reloadingͷ
͓͔͛ͰίϯύΠϧɺΠϯετʔ
ϧαΠΫϧ͕ૣ͘ͳΓ։ൃύ
ϑΥʔϚϯε্
• ΑΓૣ͘ػೳΛϦϦʔεͰ͖Δ
Α͏ʹͳͬͨ
Slide 19
Slide 19 text
DEMO
Slide 20
Slide 20 text
React(Web)/React Nativeͱͷҧ͍
ϙΠϯτ
View
ComponentɺϥΠϑελΠϧͷߟ͑ํಉ༷
ཁૉ React Native ͷ Component ʹॻ͖͑
Style
CSSͷ͕ࣝͦͷ··͑Δ
Flexbox ʹΑΔ Component ͷஔ
Data Flow fluxΞʔΩςΫνϟͷར༻͕Մೳ
Navigation
ʢը໘ભҠʣ
react-routerϥΠΫͳϞδϡʔϧ͕͋Δ
Slide 21
Slide 21 text
View
• JSXʹΑΔ࣮
React React Native
![]()
Slide 22
Slide 22 text
View
render() {
return (
My Counter App!
{this.state.count}
this.inc()} />
);
}
Slide 23
Slide 23 text
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
Ͱࢦఆ͢Δ
Slide 24
Slide 24 text
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
Ͱࢦఆ͢Δ
Slide 25
Slide 25 text
Style
render() {
return (
My Counter App!
{this.state.count}
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()
Slide 26
Slide 26 text
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
Ͱࢦఆ͢Δ
Slide 27
Slide 27 text
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,
},
});
Slide 28
Slide 28 text
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,
},
});
Slide 29
Slide 29 text
Style(FAQ)
• CSS Modules ͕͍͍ͨʁ
• ελΠϧఆٛΛผϑΝΠϧ(.css)ʹͯ͠importͯ͠ར༻͢Δํ๏
• React Native ͷελΠϧఆٛ CSS ʹࣅͯΔ͚ͲͬͺΓผ
• ίϯϙʔωϯτʹ༩Ͱ͖ͳ͍ϓϩύςΟ͕͋ΔͱܯࠂΛͩ͠
ͯ͘ΕΔ
• ҰԠɺ࣮ݱͰ͖Δύοέʔδ͋Δ
• https://github.com/sabeurthabti/react-native-css
Slide 30
Slide 30 text
Style(FAQ)
Slide 31
Slide 31 text
Style(FAQ)
ར༻Մೳͳkey
Slide 32
Slide 32 text
• ٙࣅཁૉ(:after/:before)͕͍͍ͨʁ
• ٙࣅཁૉఘΊͯɺී௨ʹཁૉΛॻ͔͘͠ͳ͍
• webfontΛ:beforeʹೖΕΔͱ͔webͩͱΑ͘Δ͚ͲͰ͖ͳ͍
Style(FAQ)
Slide 33
Slide 33 text
• ٙࣅΫϥε͕͍͍ͨʁ
• 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)
Slide 34
Slide 34 text
• shorthand͕͍͍ͨʁ
• ղܾ͠Α͏ͱ͍ͯ͠ΔϞδϡʔϧ͋Δ(margin, padding͔͠ରԠ͠
͍ͯͳ͍͚Ͳɾɾɾ)
• https://github.com/narendrashetty/react-native-styles-shorthand
• ඪ४Ͱ͍͔ͭ͘ରԠ
• marginHorizontal, marginVertical
• paddingHorizontal, paddingVertical
Style(FAQ)
Slide 35
Slide 35 text
• CSS ʹ׳Ε͗͢Δͱ React Native ͷελΠϧఆٛ࠷ॳށ͏͔
͠Εͳ͍
• ֎෦ϞδϡʔϧͰղܾ͢Δબࢶ͋Δ͕ɺReact Native ͷόʔ
δϣϯ্͕͕Δ͜ͱͰղܾ͞ΕΔ͜ͱ͋ΔͷͰɺ·ͣඪ४ͷ
ΓํͰͬͨ΄͏͕ྑ͍
Style
Slide 36
Slide 36 text
iOS/Androidͷҧ͍
• Write Once, Run Anywhere? - No!
• ϓϥοτϑΥʔϜ͝ͱʹUI/UXͷϕετϓϥΫςΟεҧ͏
• φϏήʔγϣϯʢΔϘλϯʣ
• ϋϯόʔΨʔϝχϡʔ / λϒϝχϡʔ
Slide 37
Slide 37 text
iOS/Android
• iOS/AndroidͰҟͳΔίʔυΛॻ͘ํ๏2ͭ͋Δ
• Platform.OS, Platform.select
• ϑΝΠϧࣗମΛ͚Δ
• example.ios.js / example.android.js
Slide 38
Slide 38 text
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'),
})();
;
Slide 39
Slide 39 text
ϑΝΠϧࣗମΛ͚Δ
// Files
example.ios.js
example.android.js
// Usage
import example from './example';
// Ϗϧυ࣌ʹఆ͞ΕΔ
$ react-native run-ios
$ react-native run-android
Slide 40
Slide 40 text
ຊͷ༰
• React Native ʹ͍ͭͯ
• ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ
• σϞΞϓϦհ
Slide 41
Slide 41 text
ͳͥ React Native ͳͷ͔
• Webٕज़ΛͬͯϞόΠϧΞϓϦ։ൃΛՄೳʹ͢ΔϑϨʔϜϫʔΫ
͍͔ͭ͋͘Δ
• React Native
• NativeScript
• Ionic
• PhoneGap/Cordova
Native UI
WebView
Slide 42
Slide 42 text
ͳͥ React Native ͳͷ͔
• Ϣʔβʔͷଟ͍ΞϓϦͰ࠾༻͞Ε͍ͯΔʢFB, Instagram,
Airbnbʣ
• (R-Tech)FEඪ४Ͱ͋Δ React/Redux ͷαʔϏεͰ͋ΕɺWeb൛Ͱ
։ൃͨ͠ίʔυͷڞ༗Խ͕Մೳ
• FEඪ४Ͱ։ൃͰ͖ΔΤϯδχΞ૿Ճத
Slide 43
Slide 43 text
ͳͥ React Native ͳͷ͔
• Web ΞϓϦΛ࡞ͬͨޙʹεϚϗΞϓϦ൛ཉ͍͠ͱ͍͏ཁ͋Δ
• WebView ϕʔεͷαʔϏε͕ଟ͍ͷͰ React Native ԽʹΑΔύ
ϑΥʔϚϯε্͕ૂ͑Δ
• ੑೳྑ͘ͳ͍ͬͯͷͰɺࢿޮՌΞϓϦಛੑʹґଘ͢Δ
Slide 44
Slide 44 text
ຊͷ༰
• React Native ʹ͍ͭͯ
• ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ
• σϞΞϓϦհ
Slide 45
Slide 45 text
React Native ΞʔΩςΫνϟ
Android/iOS
Native
JavaScriptCore
(JSC)
Bridge
App
Slide 46
Slide 46 text
Android/iOS
Native
JavaScriptCore
(JSC)
Bridge(IPC)
JS Runtime (Production)
App
Slide 47
Slide 47 text
Android/iOS
Native V8(Chrome)
Bridge(WebSocket)
JS Runtime (Debug Mode)
App
Slide 48
Slide 48 text
JS Runtime (Debug Mode)
Tap!
Slide 49
Slide 49 text
Chrome Dev ToolsʢWebSocketʣ
Slide 50
Slide 50 text
Chrome Dev ToolsʢBreak Pointsʣ
Slide 51
Slide 51 text
Data Flow
touch
update
Slide 52
Slide 52 text
Data Flow
Touch Event
Main Thread
Native Modules
MessageQueue
JS Thread
UITouch
Slide 53
Slide 53 text
Data Flow
Touch Event Handle Event
Main Thread
Native Modules
MessageQueue
JS Thread
UITouch
[
‘EventEmitter’, ‘receiveTouches’,
[‘topTouchStart’, {‘target’: 12, ’x’: 42, ‘y’: 106}]
]
Slide 54
Slide 54 text
Data Flow
Touch Event Handle Event
Main Thread
Native Modules
MessageQueue
JS Thread
UITouch setState(),
render()
Slide 55
Slide 55 text
Data Flow
Touch Event Handle Event
Main Thread
Native Modules
MessageQueue
JS Thread
UITouch
UIManager.u
pdate….
setState(),
render()
[
‘UIManager’, ‘update’, [viewID, attributes]
]
Slide 56
Slide 56 text
Data Flow
Touch Event Handle Event
Main Thread
Native Modules
MessageQueue
JS Thread
UITouch
UIManager.u
pdate….
setState(),
render()
[
‘UIManager’, ‘update’, [viewID, attributes]
]
Slide 57
Slide 57 text
Data Flow
Touch Event Handle Event
Main Thread
Native Modules
MessageQueue
JS Thread
UITouch
UIManager.u
pdate….
setState(),
render()
[
‘UIManager’, ‘update’, [8, {‘text’: ‘6’}]
]
Slide 58
Slide 58 text
Data Flow
Touch Event Handle Event
Main Thread
Native Modules
Event Queue
JS Thread
UITouch
UIManager.u
pdate….
setState(),
render()
Update UI
dispatch_async()
Slide 59
Slide 59 text
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”}]
Slide 60
Slide 60 text
ຊͷ༰
• React Native ʹ͍ͭͯ
• ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ
• σϞΞϓϦհ
Slide 61
Slide 61 text
σϞΞϓϦ
• Web(React) Ͱ࡞ͬͨαʔϏεΛ React Native Ͱ࣮த
Web React Native
Slide 62
Slide 62 text
• ײ
• Web ͷ React Λͬͨ͜ͱ͕͋Ε͙͢ʹॻ͚Δ/Θ͔Δ
• Web ʹ͍ۙײ֮Ͱͷ։ൃ
• npm
• Cmd-RͰϦϩʔυɺLive Reload, Hot Reloading
DEMOΞϓϦ
Slide 63
Slide 63 text
• ײଓ͖
• ը໘100%࡞Γ͠
• Web Ͱ࡞ͬͨίϯϙʔωϯτΛࢀߟʹͰ͖Δ
• Web ൛Λ Flexbox Ͱ࡞͍ͬͯͳ͍ͱߟ͑Δ͜ͱ͕૿͑Δ
• ڞ௨ԽͰ͖Δίʔυ͕ଟ͍
• Redux(Actions, Reducers)ɺBFF ͱͷ௨৴෦
• mono-repo ͰߏΛߟ͑Δͷ͋Γ
DEMOΞϓϦ
Slide 64
Slide 64 text
• ײଓ͖
• Objective-C(Swift),Java ͷ͕ࣝඞཁʹͳΔͱ͜Ζ͍·ͷͱ͜
Ζͳ͍
• React Native ͕ఏڙ͍ͯ͠ͳ͍APIΛ͍͍ͨͱ͔ɺ
Cocoapods Ͱಋೖͨ͠ϥΠϒϥϦͱ Bridge ͍ͨ͠ͱ͔ͳ͚Ε
ɾɾɾ
• ࠔͬͨͱ͖ͷͨΊʹνʔϜʹ1ਓ Native ʹৄ͍͠ਓཉ͍͠
DEMOΞϓϦ
Slide 65
Slide 65 text
͝ਗ਼ௌ͋Γ͕ͱ͏
͍͟͝·ͨ͠ɻ