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
ReactiveCocoaのゆるい紹介とメルカリでの活用事例
Search
Shinichiro Oba
August 11, 2015
Programming
3
3.6k
ReactiveCocoaのゆるい紹介とメルカリでの活用事例
Retty Tech Cafe第3回「スタートアップ×iOS開発」で発表した資料に加筆+修正をしたものです
https://atnd.org/events/67600
Shinichiro Oba
August 11, 2015
Tweet
Share
More Decks by Shinichiro Oba
See All by Shinichiro Oba
サーバサイドエンジニアと効率よく開発するためにやっていること
bricklife
8
2.1k
アッテ開発の技術:Swift と RxSwift
bricklife
19
17k
RxSwiftのobserveOnとsubscribeOnを理解する
bricklife
20
7.2k
Swift 2.0でRxSwift、ReactKit、ReactiveCocoaを使ってみた
bricklife
10
4.8k
Apple Pay対応のやりかた
bricklife
1
25k
iOS版グローバル対応の罠と技
bricklife
8
24k
Other Decks in Programming
See All in Programming
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
140
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
Jakarta EE meets AI
ivargrimstad
0
600
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
890
ヤプリ新卒SREの オンボーディング
masaki12
0
130
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
230
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
GitHub's CSS Performance
jonrohan
1030
460k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Navigating Team Friction
lara
183
14k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
The Language of Interfaces
destraynor
154
24k
Being A Developer After 40
akosma
87
590k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Transcript
ReactiveCocoaのゆるい紹介と メルカリでの活⽤用事例例 株式会社メルカリ iOSエンジニア ⼤大庭慎⼀一郎郎
⾃自⼰己紹介 ⼤大庭 慎⼀一郎郎 (ooba / bricklife) 株式会社メルカリ 2013年年4⽉月⼊入社
「メルカリ」iOS版を開発
メルカリとは? いわゆる「フリマアプリ」 2013年年7⽉月 JP版リリース 2014年年8⽉月 US版リリース
はじめに 間違っていても怒怒らないで…! ツッコミは⼤大歓迎です! 先⼈人たちによる偉⼤大なドキュメント からの引⽤用多め
ReactiveCocoaの ゆるい紹介
ReactiveCocoaとは "ReactiveCocoa (RAC) is a Cocoa framework inspired by
Functional Reactive Programming. It provides APIs for composing and transforming streams of values over time.” https://github.com/ReactiveCocoa/ReactiveCocoa
Functional Reactive Programming (FRP) とは?
FRPとは 「⾮非同期データストリームを⽤用いた プログラミング」などと説明される ことが多い
よくわかんない\(^o^)/
よくわからないので ReactiveCocoa (RAC) が提供する ものから追っていきたいと思います
RACが提供するもの 1. ストリームを⽣生成する⽅方法 2. ストリームを加⼯工する⽅方法 3. ストリームを監視する⽅方法
+便便利利なマクロ
ようするにRACは ストリームを作ったり使ったり するライブラリ
これがストリームだ! 完了了 エラー データ 時間 どちらかの発⽣生によって ストリームが終わる 開始 or
ストリームの⽣生成 RACはCocoaフレームワーク上の様々な ものをストリームに変えられる 例例:⽂文字列列、配列列、KVO、UIイベント、 ネットワーク通信、デリゲートメソッド 呼び出し、etc.
RACが提供するカテゴリ
配列列のストリーム化 [0, 1, 2, 3]
タップのストリーム化 タップ ダブルタップ タップ
テキスト⼊入⼒力力のストリーム化 " "#$ "# "# A B C Delete
ネットワーク通信のストリーム化 ϦΫΤετ ड৴த ड৴ྃ த Ϩεϙϯε
IUUQTHJTUHJUIVCDPNTUBMU[FFCDBCDG
ストリームの加⼯工 ストリーム上のデータに対して filter した り map したり merge したり zip
したり reduce したりできる オペレータと呼ばれる ここが関数型、すなわちFunctional!
filter IUUQOFJMQBNFSBDNBSCMFTpMUFS
map IUUQOFJMQBNFSBDNBSCMFTNBQ
merge IUUQOFJMQBNFSBDNBSCMFTNFSHF
zip IUUQOFJMQBNFSBDNBSCMFT[JQ
reduce IUUQOFJMQBNFSBDNBSCMFTSFEVDF
例例:ダブルタップのストリーム IUUQTHJTUHJUIVCDPNTUBMU[FFCDBCDG
どんな加⼯工ができるか 「RAC Marbles」やその元の「RxMarbles」を⾒見見る とオペレータの種類とその効果がインタラクティブに わかるのでオススメ http://neilpa.me/rac-‐‑‒marbles/ http://rxmarbles.com/
ストリームの監視 購読 (Subscribe) という ストリームに流流れてくるデータを順次処理理 配列列に戻す、UIへの表⽰示、プロパティの更更新、 画⾯面遷移、etc.
すべてを使ったコードの例例 [[[self.textField rac_textSignal] filter:^BOOL(NSString *value) { return value.length > 0;
}] subscribeNext:^(NSString *value) { NSLog(@“%@", value); }]; -‐‑‒rac_̲textSignal ⼊入⼒力力⽂文字列列からストリームを⽣生成 -‐‑‒filter: ストリームをfilterして空⽂文字列列が 含まれないように加⼯工 -‐‑‒subscribeNext: ストリームを購読してログ出⼒力力
便便利利なマクロ たったこれだけで text プロパティの変更更を ラベルに⾃自動反映できる! RAC(self.label, text) = RACObserve(self, text);
ストリームを使ってできること リスト処理理 ⾮非同期イベント処理理 データバインディング Promise MVVM,
etc.
なにがうれしいか いろんな⾮非同期処理理を 「ストリームをどう扱うか」 という視点から「宣⾔言的」に記述できる
メルカリでの活⽤用事例例
RAC導⼊入の歴史 2014/8に pod ʻ‘ReactiveCocoaʼ’ 最初に使ったのはUIAlertViewのRACサポート 徐々に適⽤用箇所を広げる 現在iOSエンジニア4⼈人全員がRACを使うように
読み込んだ記事 The introduction to Reactive Programming you've been missing
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 【翻訳】あなたが求めていたリアクティブプログラミ ング⼊入⾨門 http://ninjinkun.hatenablog.com/entry/introrxja
読み込んだ本 「Functional Reactive Programming on iOS」 https://leanpub.com/iosfrp/ 当時の表紙
RACでやっていること リスト処理理 ⾮非同期イベント処理理 データバインディング Promise MVVM,
etc.
RACを使っている画⾯面 住所編集画⾯面 住所⼀一覧画⾯面 銀⾏行行情報編集画⾯面 検索索条件選択画⾯面 通知設定画⾯面
⽀支払い⽅方法選択画⾯面 商品⼀一覧画⾯面 購⼊入画⾯面 検索索コーチマーク画⾯面 検索索サジェスト画⾯面
実際の画⾯面は メルカリをダウンロードして ⾒見見てください!!! IUUQTJUVOFTBQQMFDPNKQBQQJE
データバインディングの例例 銀⾏行行情報編集画⾯面 プロパティの変更更をテキストフィールドに⾃自動反映 検索索サジェスト画⾯面 テキストフィールドの変更更をプロパティに⾃自動反映 RAC(self.accountNumberTextField, text)
= RACObserve(self.viewModel, accountNumber); RAC(self, inputText) = textField.rac_textSignal;
Promiseの例例 購⼊入画⾯面 タイムアウトを設けた失敗してもよい⾮非同期処理理と 購⼊入APIの完了了を両⽅方待つ RACSignal *timeoutSignal = [[RACSignal merge:@[
_btDataSignal, [RACSignal interval:kBTDataTimeout onScheduler:[RACScheduler mainThreadScheduler]], ]] take:1]; [RACSignal combineLatest:@[_buyAPISignal, timeoutSignal]] subscribeNext:^(RACTuple *tuple) { //... } error:^(NSError *error) { //... }];
MVVMを導⼊入した画⾯面 住所編集画⾯面 住所⼀一覧画⾯面 銀⾏行行情報編集画⾯面 検索索条件選択画⾯面 通知設定画⾯面
⽀支払い⽅方法選択画⾯面 商品⼀一覧画⾯面 購⼊入画⾯面 検索索コーチマーク画⾯面 検索索サジェスト画⾯面
MVVMとは Model View ViewModelというMVCの派⽣生パターン https://ja.wikipedia.org/wiki/Model_̲View_̲ViewModel ViewModelはViewを描画するための状態の保持と、 Viewから受け取った⼊入⼒力力を適切切な形に変換してModel に伝達する役⽬目
ViewModelはテストできる!
応⽤用例例:インクリメンタルサーチ 検索索サジェスト画⾯面 以下とほぼ同じ実装をしている http://qiita.com/ikesyo/items/e699eefe1d0985158420 個⼈人的にFRPが本領領発揮するケースの1つだと思う [[[[[textField.rac_textSignal filter:^BOOL(NSString *text)
{ return text.length > 0; }] throttle:0.5] map:^(NSString *text) { return [[APIClient sharedClient] fetchSearchResultWithQuery:text]; }] switchToLatest] subscribeNext:^(id JSON) { NSLog(@"Search result: %@", JSON); }];
RAC導⼊入時の注意
導⼊入コストが⾼高い 概念念の理理解に時間がかかる メルカリでは独学と知⾒見見のシェアでなんとかした まずはデータバインディングかPromiseからはじめ るといいかも ⼤大量量のオペレータを理理解する必要がある
関数型⾔言語をやっていればなんとかなるか…?
循環参照しやすい 便便利利マクロ@strongifyと@weakifyを駆使 「Implicit retain of ʻ‘selfʼ’ within blocks」をYesに
Instrumentsでメモリの利利⽤用状況をチェック AllocateのMark Generationが便便利利
最初は⼤大変だけど 慣れると楽になってきますよ!
ありがとうございました! スライド内のURL以外に参考にしたURL http://havelog.ayumusato.com/develop/javascript/e657-‐‑‒ reactive_̲programming_̲in_̲javascript.html http://qiita.com/amay077/items/5e7cedb069a5a6ae0ae7 http://yohshiy.blog.fc2.com/blog-‐‑‒entry-‐‑‒215.html
http://www.slideshare.net/taketin/mvvm-‐‑‒40956834