ReactiveCocoaのゆるい紹介とメルカリでの活用事例

Retty Tech Cafe第3回「スタートアップ×iOS開発」で発表した資料に加筆＋修正をしたものです

https://atnd.org/events/67600

Transcript

1. ReactiveCocoaのゆるい紹介と   メルカリでの活⽤用事例例 株式会社メルカリ   iOSエンジニア   ⼤大庭慎⼀一郎郎
2. ⾃自⼰己紹介 ⼤大庭  慎⼀一郎郎  (ooba  /  bricklife)   株式会社メルカリ   2013年年4⽉月⼊入社   「メルカリ」iOS版を開発
3. メルカリとは？ いわゆる「フリマアプリ」   2013年年7⽉月  JP版リリース   2014年年8⽉月  US版リリース
4. はじめに 間違っていても怒怒らないで…！   ツッコミは⼤大歓迎です！   先⼈人たちによる偉⼤大なドキュメント からの引⽤用多め
5. ReactiveCocoaの   ゆるい紹介
6. 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
7. Functional  Reactive   Programming  (FRP)  とは?
8. FRPとは 「⾮非同期データストリームを⽤用いた プログラミング」などと説明される ことが多い
9. よくわかんない＼(^o^)／  
10. よくわからないので ReactiveCocoa  (RAC)  が提供する ものから追っていきたいと思います
11. RACが提供するもの 1. ストリームを⽣生成する⽅方法   2. ストリームを加⼯工する⽅方法   3. ストリームを監視する⽅方法   ＋便便利利なマクロ
12. ようするにRACは   ストリームを作ったり使ったり するライブラリ
13. これがストリームだ！ 完了了 エラー データ 時間 どちらかの発⽣生によって   ストリームが終わる 開始 or
14. ストリームの⽣生成 RACはCocoaフレームワーク上の様々な ものをストリームに変えられる   例例：⽂文字列列、配列列、KVO、UIイベント、 ネットワーク通信、デリゲートメソッド 呼び出し、etc.
15. RACが提供するカテゴリ
16. 配列列のストリーム化     [0,  1,  2,  3]
17. タップのストリーム化 タップ ダブルタップ タップ
18. テキスト⼊入⼒力力のストリーム化 " "#$ "# "# A B C Delete
19. ネットワーク通信のストリーム化 ϦΫΤετ ड৴த ड৴׬ྃ த਎͸
    Ϩεϙϯε
20. IUUQTHJTUHJUIVCDPNTUBMU[FFCDBCDG
21. ストリームの加⼯工 ストリーム上のデータに対して  filter  した り  map  したり  merge  したり  zip  したり   reduce  したりできる   オペレータと呼ばれる   ここが関数型、すなわちFunctional！
22. filter IUUQOFJMQBNFSBDNBSCMFTpMUFS
23. map IUUQOFJMQBNFSBDNBSCMFTNBQ
24. merge IUUQOFJMQBNFSBDNBSCMFTNFSHF
25. zip IUUQOFJMQBNFSBDNBSCMFT[JQ
26. reduce IUUQOFJMQBNFSBDNBSCMFTSFEVDF
27. 例例：ダブルタップのストリーム IUUQTHJTUHJUIVCDPNTUBMU[FFCDBCDG
28. どんな加⼯工ができるか 「RAC  Marbles」やその元の「RxMarbles」を⾒見見る とオペレータの種類とその効果がインタラクティブに わかるのでオススメ   http://neilpa.me/rac-‐‑‒marbles/   http://rxmarbles.com/
29. ストリームの監視 購読  (Subscribe)  という   ストリームに流流れてくるデータを順次処理理   配列列に戻す、UIへの表⽰示、プロパティの更更新、 画⾯面遷移、etc.
30. すべてを使ったコードの例例 [[[self.textField rac_textSignal] filter:^BOOL(NSString *value) { return value.length > 0; }] subscribeNext:^(NSString *value) { NSLog(@“%@", value); }]; -‐‑‒rac_̲textSignal ⼊入⼒力力⽂文字列列からストリームを⽣生成 -‐‑‒filter: ストリームをfilterして空⽂文字列列が 含まれないように加⼯工 -‐‑‒subscribeNext: ストリームを購読してログ出⼒力力
31. 便便利利なマクロ たったこれだけで  text  プロパティの変更更を ラベルに⾃自動反映できる！ RAC(self.label, text) = RACObserve(self, text);
32. ストリームを使ってできること リスト処理理   ⾮非同期イベント処理理   データバインディング   Promise   MVVM,  etc.
33. なにがうれしいか いろんな⾮非同期処理理を   「ストリームをどう扱うか」   という視点から「宣⾔言的」に記述できる
34. メルカリでの活⽤用事例例
35. RAC導⼊入の歴史 2014/8に  pod  ʻ‘ReactiveCocoaʼ’   最初に使ったのはUIAlertViewのRACサポート   徐々に適⽤用箇所を広げる   現在iOSエンジニア4⼈人全員がRACを使うように
36. 読み込んだ記事 The  introduction  to  Reactive  Programming   you've  been  missing   https://gist.github.com/staltz/868e7e9bc2a7b8c1f754   【翻訳】あなたが求めていたリアクティブプログラミ ング⼊入⾨門   http://ninjinkun.hatenablog.com/entry/introrxja
37. 読み込んだ本 「Functional  Reactive  Programming  on  iOS」   https://leanpub.com/iosfrp/ 当時の表紙
38. RACでやっていること リスト処理理   ⾮非同期イベント処理理   データバインディング   Promise   MVVM,  etc.
39. RACを使っている画⾯面 住所編集画⾯面   住所⼀一覧画⾯面   銀⾏行行情報編集画⾯面   検索索条件選択画⾯面   通知設定画⾯面   ⽀支払い⽅方法選択画⾯面   商品⼀一覧画⾯面   購⼊入画⾯面   検索索コーチマーク画⾯面   検索索サジェスト画⾯面
40. 実際の画⾯面は   メルカリをダウンロードして   ⾒見見てください！！！ IUUQTJUVOFTBQQMFDPNKQBQQJE
41. データバインディングの例例 銀⾏行行情報編集画⾯面   プロパティの変更更をテキストフィールドに⾃自動反映   検索索サジェスト画⾯面   テキストフィールドの変更更をプロパティに⾃自動反映 RAC(self.accountNumberTextField, text) = RACObserve(self.viewModel, accountNumber); RAC(self, inputText) = textField.rac_textSignal;
42. 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) { //... }];
43. MVVMを導⼊入した画⾯面 住所編集画⾯面   住所⼀一覧画⾯面   銀⾏行行情報編集画⾯面   検索索条件選択画⾯面   通知設定画⾯面   ⽀支払い⽅方法選択画⾯面   商品⼀一覧画⾯面   購⼊入画⾯面   検索索コーチマーク画⾯面   検索索サジェスト画⾯面
44. MVVMとは Model  View  ViewModelというMVCの派⽣生パターン   https://ja.wikipedia.org/wiki/Model_̲View_̲ViewModel   ViewModelはViewを描画するための状態の保持と、 Viewから受け取った⼊入⼒力力を適切切な形に変換してModel に伝達する役⽬目   ViewModelはテストできる！
45. 応⽤用例例：インクリメンタルサーチ 検索索サジェスト画⾯面   以下とほぼ同じ実装をしている   http://qiita.com/ikesyo/items/e699eefe1d0985158420 個⼈人的にFRPが本領領発揮するケースの１つだと思う [[[[[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); }];
46. RAC導⼊入時の注意
47. 導⼊入コストが⾼高い 概念念の理理解に時間がかかる   メルカリでは独学と知⾒見見のシェアでなんとかした   まずはデータバインディングかPromiseからはじめ るといいかも   ⼤大量量のオペレータを理理解する必要がある   関数型⾔言語をやっていればなんとかなるか…？
48. 循環参照しやすい 便便利利マクロ@strongifyと@weakifyを駆使   「Implicit  retain  of  ʻ‘selfʼ’  within  blocks」をYesに   Instrumentsでメモリの利利⽤用状況をチェック   AllocateのMark  Generationが便便利利
49. 最初は⼤大変だけど   慣れると楽になってきますよ！
50. ありがとうございました！ スライド内の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