Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native vs iOS エンジニア - iOSDC 2017
Search
laiso
September 16, 2017
Technology
2
680
React Native vs iOS エンジニア - iOSDC 2017
http://blog.lai.so/entry/iosdc2017-talk
laiso
September 16, 2017
Tweet
Share
More Decks by laiso
See All by laiso
Firebaseを使った成長するモバイルアプリのための高速なプロダクト開発 / Rapid Mobile Application Development using #Firebase
laiso
4
4.7k
iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス / PWA Essentials for iOS Developer - iOSDC 2018
laiso
6
4k
Service Workersを使ったウェブアプリのアーキテクチャ / Web App Architecture on Service Workers
laiso
3
1.9k
Objective-C Toolchain in 2017
laiso
0
1.2k
Quickで体験するテストの構造化
laiso
2
2.6k
Apple Pay in 5 minutes
laiso
0
150
Apple Pay In The Real World
laiso
0
120
スタートアップの人材獲得戦略
laiso
2
11k
MVVM for iOS
laiso
4
2k
Other Decks in Technology
See All in Technology
JSON攻略法.pdf
miyakemito
8
4.9k
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
530
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
270
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
200
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
870
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
760
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
160
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
140
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.8k
Side Projects
sachag
451
41k
Statistics for Hackers
jakevdp
789
220k
Adopting Sorbet at Scale
ufuk
68
8.6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
The Invisible Customer
myddelton
114
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
The Language of Interfaces
destraynor
151
23k
KATA
mclloyd
15
12k
Transcript
React Native vs iOS ΤϯδχΞ iOSDC 2017
ViewΛͲ͏࡞Δ͔ʁ
Viewͷ։ൃ͍͠ • ϢʔβʔView͔ΒใΛಡΈऔΔ • ϢʔβʔViewΛ௨ͯ͡ର͢Δ • ։ൃऀViewΛ࡞Γ͍ͨ
• ੈք࠷େͷϢʔβʔنΛ࣋ͭViewͷఏڙऀ
Who am I ? • id:laiso • iOS/Android Developer •
ϑϨʔϜϫʔΫݚڀՈ
React NativeͱԿ͔ • "React" ͰiOSAndroidͷωΠςΟϒΞϓϦέʔγϣ ϯ͕։ൃͰ͖Δπʔϧ܈
ReactͱԿ͔ • JavaScriptͷViewϥΠϒϥϦ • ϓϥοτϑΥʔϜɺύϥμΠϜ
class ArticleViewController extends Component { // loadView() render() { return
( <View> <Text> {this.props.model.content} </Text> <Button title="LIKE" onPress={this._handleButtonPress} /> </View> ); } }
React NativeͷΈ • ΞϓϦόϯυϧͷJavaScriptΛಡΈࠐΈ • ViewΛ෦σʔλߏͰܭࢉ͢Δ(JavaScriptCore) • ݁ՌΛUIViewʹϦΞϧλΠϜͰదԠ͢Δ
UIKitϓϩάϥϛϯάͷ • ViewControllerΛத৺ͱͨ͠Viewͷߏ • ViewͷංେԽ
Reactͷϓϩάϥϛϯά • ViewͷඳըͷৄࡉΛϑϨʔϜϫʔΫʹͤΔ • Viewͷ݁ՌΛίʔυͰදݱ • એݴతͳView
ReactͷએݴతͳViewͷར • ঢ়ଶม͕ಉ͡ͳΒߏ͞ΕΔView(݁Ռ)ಉ͡ • ͕ͯ͢ render() ʹू·Δ • ෳࡶͳViewΛมߋ͘͢͢͠Δ
render() { return ( <View> <ArticleView model={this.article} onPress={this._handleLikePress} /> <LikeCountView
count={this.state.likeCount} /> <FooterView /> </View> ); }
ίϯϙʔωϯτࢦͳViewͷར • ཧͷ͢͠͞ • ςετͷ͢͠͞ • ڞ௨Խ
UIViewControllerͷ • ίϯϙʔωϯτͷڠௐੑ • addChildViewController() • addSubview(), didMoveToParentViewController()
·ͱΊɿReactͲ͏ViewΛ࡞Δͷ͔ʁ • એݴతͳViewΛίϯϙʔωϯτԽͯ͠ • ίϯϙʔωϯτΛΈ߹ΘͤΔ͜ͱͰViewΛ࡞Δ
·ͱΊɿUIKitͲ͏ViewΛ࡞Δͷ͔ʁ • ॳظͷը໘ఆٛΛϩʔυͯ͠ • ViewΛखಈͰॻ͖͑Δ • ͯ͢Λ1ը໘ͷViewControllerʹͤΔ
React Native is Dream • ຊདྷෳࡶͳView։ൃΛγϯϓϧʹͯ͠͠·͏ྗ • ύϥμΠϜɺΤίγεςϜͷڞ༗ • ݱ࣮ੈքͷΛղܾ͢ΔͨΊʹੜ·Εٕͨज़
UIKitϓϩάϥϛϯάͷ՝ • ໋ྩతͳViewͷଟ͞ • ॊೈੑʹ͚ܽΔComponent
UIKitϓϩάϥϛϯάͷະདྷ
CocoaόΠϯσΟϯάͷiOSαϙʔτ
XMLϨΠΞτ • Windows XAML • Android Layouts • XMLϦςϥϧ in
Swift?
ίϯϙʔωϯτࢦͷUIViewController • Storyboard NEXT • Dataflow Architecture, State Management
React NativeͰʮະདྷͷiOSϓϩάϥϛϯάʯ Λ૾ʢʣ͠·ͤΜ͔ʁ $ npm i -g react-native-cli