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
760
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.9k
iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス / PWA Essentials for iOS Developer - iOSDC 2018
laiso
6
4.2k
Service Workersを使ったウェブアプリのアーキテクチャ / Web App Architecture on Service Workers
laiso
3
2.1k
Objective-C Toolchain in 2017
laiso
0
1.5k
Quickで体験するテストの構造化
laiso
2
2.8k
Apple Pay in 5 minutes
laiso
0
160
Apple Pay In The Real World
laiso
0
140
スタートアップの人材獲得戦略
laiso
2
11k
MVVM for iOS
laiso
4
2.2k
Other Decks in Technology
See All in Technology
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
170
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.8k
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
170
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
180
MCPと認可まわりの話 / mcp_and_authorization
convto
1
150
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
550
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.6k
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
120
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.2k
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
660
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Designing for Performance
lara
610
69k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
How to Think Like a Performance Engineer
csswizardry
25
1.8k
It's Worth the Effort
3n
185
28k
Scaling GitHub
holman
461
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
A better future with KSS
kneath
238
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
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