React Native vs iOS エンジニア - iOSDC 2017

http://blog.lai.so/entry/iosdc2017-talk

Transcript

1. React Native vs iOS ΤϯδχΞ iOSDC 2017
2. ViewΛͲ͏࡞Δ͔ʁ
3. Viewͷ։ൃ͸೉͍͠ • Ϣʔβʔ͸View͔Β৘ใΛಡΈऔΔ • Ϣʔβʔ͸ViewΛ௨ͯ͡ର࿩͢Δ • ։ൃऀ͸ViewΛ࡞Γ͍ͨ
4. • ੈք࠷େͷϢʔβʔن໛Λ࣋ͭViewͷఏڙऀ
5. Who am I ? • id:laiso • iOS/Android Developer • ϑϨʔϜϫʔΫݚڀՈ
6. React Nativeͱ͸Կ͔ • "React" ͰiOS΍AndroidͷωΠςΟϒΞϓϦέʔγϣ ϯ͕։ൃͰ͖Δπʔϧ܈
7. Reactͱ͸Կ͔ • JavaScriptͷViewϥΠϒϥϦ • ϓϥοτϑΥʔϜɺύϥμΠϜ
8. class ArticleViewController extends Component { // loadView() render() { return ( <View> <Text> {this.props.model.content} </Text> <Button title="LIKE" onPress={this._handleButtonPress} /> </View> ); } }
9. React Nativeͷ࢓૊Έ • ΞϓϦόϯυϧͷJavaScriptΛಡΈࠐΈ • ViewΛ಺෦σʔλߏ଄Ͱܭࢉ͢Δ(JavaScriptCore) • ݁ՌΛUIViewʹϦΞϧλΠϜͰదԠ͢Δ
10. UIKitϓϩάϥϛϯάͷ໰୊ • ViewControllerΛத৺ͱͨ͠Viewͷߏ੒ • ViewͷංେԽ
11. Reactͷϓϩάϥϛϯά • ViewͷඳըͷৄࡉΛϑϨʔϜϫʔΫʹ೚ͤΔ • Viewͷ݁ՌΛ௚઀ίʔυͰදݱ • એݴతͳView
12. ReactͷએݴతͳViewͷར఺ • ঢ়ଶม਺͕ಉ͡ͳΒߏ੒͞ΕΔView(݁Ռ)΋ಉ͡ • ͢΂͕ͯ render() ʹू·Δ • ෳࡶͳViewΛมߋ͠΍͘͢͢Δ
13. render() { return ( <View> <ArticleView model={this.article} onPress={this._handleLikePress} /> <LikeCountView count={this.state.likeCount} /> <FooterView /> </View> ); }
14. ίϯϙʔωϯτࢦ޲ͳViewͷར఺ • ؅ཧͷ͠΍͢͞ • ςετͷ͠΍͢͞ • ڞ௨Խ
15. UIViewControllerͷ໰୊ • ίϯϙʔωϯτͷڠௐੑ • addChildViewController() • addSubview(), didMoveToParentViewController()
16. ·ͱΊɿReact͸Ͳ͏ViewΛ࡞Δͷ͔ʁ • એݴతͳViewΛίϯϙʔωϯτԽͯ͠ • ίϯϙʔωϯτΛ૊Έ߹ΘͤΔ͜ͱͰViewΛ࡞Δ
17. ·ͱΊɿUIKit͸Ͳ͏ViewΛ࡞Δͷ͔ʁ • ॳظͷը໘ఆٛΛϩʔυͯ͠ • ViewΛखಈͰॻ͖׵͑Δ • ͢΂ͯΛ1ը໘ͷViewControllerʹ೚ͤΔ
18. React Native is Dream • ຊདྷෳࡶͳView։ൃΛγϯϓϧʹͯ͠͠·͏ྗ • ύϥμΠϜɺΤίγεςϜͷڞ༗ • ݱ࣮ੈքͷ໰୊Λղܾ͢ΔͨΊʹੜ·Εٕͨज़
19. UIKitϓϩάϥϛϯάͷ՝୊ • ໋ྩతͳViewͷଟ͞ • ॊೈੑʹ͚ܽΔComponent
20. UIKitϓϩάϥϛϯάͷະདྷ
21. CocoaόΠϯσΟϯάͷiOSαϙʔτ
22. XMLϨΠΞ΢τ • Windows XAML • Android Layouts • XMLϦςϥϧ in Swift?
23. ίϯϙʔωϯτࢦ޲ͷUIViewController • Storyboard NEXT • Dataflow Architecture, State Management
24. React NativeͰʮະདྷͷiOSϓϩάϥϛϯάʯ Λ૝૾ʢ૑଄ʣ͠·ͤΜ͔ʁ $ npm i -g react-native-cli