モダンフロントエンド + React Native所感 / techcamp03

第3回開発合宿（2017/05/22）

Transcript

1. ϞμϯϑϩϯτΤϯυ + React Nativeॴײ ୈ3ճ։ൃ߹॓੒Ռൃදɹyasaichi
2. ൃදߏ੒ 1. എܠͱ໨త 2. ٕज़֓ཁ 3. ࣮ࡍʹ΍ͬͯΈͨ 4. ॴײ
3. എܠͱ໨త
4. എܠ1: લճͷ߹॓@2016Ն • ReactͰॻ͍ͨMinesweeperΛվྑͨ͠ • CSS Modules, css next, PostCSSͷಋೖΛ
 ௨ͯ͡ϞμϯCSSٕज़ʹ৮Εͨ • ซͤͯϏϧυपΓΛGulp + Browserify͔Β npm-scripts + webpackʹҠߦͨ͠
5. ͜ΕͰϞμϯϑϩϯτΤϯυ ։ൃ͸Ұ௨Γ཈͑ͨͰʂ
6. ͦΜͳ;͏ʹߟ͍͑ͯͨ
 ࣌ظ͕Զʹ΋͋Γ·ͨ͠
7. എܠ2: ReactҠߦ@2016ळౙ • Knockout -> ReactҠߦ࣌ʹഊ๺Λ஌Δ • Reduxʢͷഎܠʹ͋ΔFluxʣ͕Θ͔Βͳ͍ • APIܦ༝Ͱऔಘͨ͠஋ΛͲ͏࣋ͭ΂͖͔ • SPAͩͬͨΒRouting΋ߟ͑ͳ͍ͱμϝ΍Μ
8. ͢Έ·ͤΜͰͨ͠
9. ࠓճͷ߹॓ͷ໨త • ϑϩϯτΤϯυਂ۷Γ + React Nativeௐࠪ • ϒϥ΢βͰಈ͘SPA͸΍Δؾ͕Ͱͳ͔ͬͨ • ߹॓લ: Reduxͷಋೖ΍RoutingपΓͷ࣮૷ • ߹॓த: OAuthΛ࢖ͬͨೝূͷ࣮૷
10. ٕज़֓ཁ
11. React Native • ReactͰωΠςΟϒΞϓϦ͕࡞ΕΔ΍ͭ • Facebook͕։ൃʢFB, InstaͰ࢖͍ͬͯΔʣ • Ϗϧυ͢ΔͱAndroid / iOSͰಈ͘ • ը໘͸JSXͱCSSʹࣅͨԿ͔Ͱهड़
12. αϯϓϧ: View component /* Logo.css */ .logo { width: 200px; height: 200px; } // index.ios.js import React from 'react'; import { AppRegistry, Text, View } from 'react-native'; import styles from './styles'; function AwesomeProject() { return ( <View style={styles.container}> <Text style={styles.hello}> Hello, World! </Text> </View> ); } AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
13. αϯϓϧ: Styling // styles.ios.js import { StyleSheet } from 'react-native'; export default StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, hello: { fontSize: 20, }, }); ComponentͷϨΠΞ΢τ ʹ͸FlexboxΛ࢖͏
14. Ϗϧυ͢Δͱ͜Μͳײ͡ ※ ॳճͷΈϏϧυ͕ඞཁͰɺҎ߱͸㵰+RͰϦϩʔυͰ͖Δ
15. React Navigation • React NativeͷφϏήʔγϣϯϥΠϒϥϦ • keyͱComponentͷϚοϓΛఆٛͯ͠࢖͏ • React NativeެࣜʢͷυΩϡϝϯτʣਪ͠ • WebͰ͍͏react-router
16. αϯϓϧ /* Logo.css */ .logo { width: 200px; height: 200px; } import React, { Component } from 'react'; import { AppRegistry, Button, Text, View } from 'react-native'; import { StackNavigator } from 'react-navigation'; import styles from './styles'; class Home extends Component { static navigationOptions = { title: 'Home' }; render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> <Button onPress={() => navigate('Chat')} title="Chat with Rina" /> </View> ); } } … const AwesomeProject = StackNavigator({ Home: { screen: Home }, Chat: { screen: Chat }}); AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject); keyͱComponentͷϚοϓ
17. ςΩετΛλοϓ͢Δͱ νϟοτը໘ʹભҠ͢Δ
18. ࣮ࡍʹ΍ͬͯΈͨ
19. ࠓճͷϥΠϒϥϦߏ੒ • ͪΌΜͱ։ൃ͢Δࡍʹඞཁͦ͏ͳ΋ͷΛબ୒ • Flux࣮૷: redux, react-redux • StoreपΓ: normalizr, reselect • Routing: react-navigation
20. σϞ
23. ॴײ
24. ϞμϯϑϩϯτΤϯυ • ͪΌΜͱਂ۷ΓͰ͖ͨײ͋ͬͯΑ͔ͬͨ • ReduxΛ࢖͏աఔͰFluxͷ֓೦͕ΫϦΞʹ • σʔλΛਖ਼نԽͯ͠StoreʹೖΕΔͱ͔ • Routingͬͯ͜Μͳײ͡Ͱ΍ΔΜͩ
25. React Native • ୊ࡐʹωΠςΟϒΞϓϦΛબΜͰྑ͔ͬͨ • ԶɺΞϓϦ࡞ΕΔʂͱ୯७ʹײಈ͢Δ • SPAͱͯ͠࡞Δ͔͠ͳ͍ͷͰਂ۷ΓͰ͖Δ • ͙͢ϦϩʔυͰ͖ΔͷͰɺखΛಈ͔͠ͳ͕Β σβΠϯ࡞Δͷʹ޲͍ͯΔ
26. ͱ͸͍͑ • ߥ໺தͷߥ໺ͩͳʔײ • ຊମͱΤίγεςϜ͕·ͩ҆ఆ͍ͯ͠ͳ͍ • Կ͔͋ͬͨΒ·ͣissueΛ୳͢ମྗ͕ඞཁ • ϓϥοτϑΥʔϜݻ༗ʢྫ: Deep Linkʣͷ
 ͱ͜ΖΛ৮Δʹ͸ωΠςΟϒଆͷ஌͕ࣝඞཁ
27. ͓ർΕ͞·Ͱͨ͠ʂ ੒Ռ෺: https://github.com/yasaichi/GHFav