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

815 Views

August 11, 15

スライド概要

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

https://atnd.org/events/67600

profile-image

SwiftとLEGOとBluetooth LEが好きなプログラマ

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
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] 0 1 2 3

17.

タップのストリーム化 タップ ダブルタップ タップ

18.

テキスト⼊入⼒力力のストリーム化 A B C Delete A AB ABC AB

19.

ネットワーク通信のストリーム化 リクエスト 受信中 受信完了 中身は レスポンス

20.

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

21.

ストリームの加⼯工 ストリーム上のデータに対して  filter  した り  map  したり  merge  したり  zip  したり   reduce  したりできる   オペレータと呼ばれる   ここが関数型、すなわちFunctional!

22.

filter http://neilpa.me/rac-marbles/#filter

23.

map http://neilpa.me/rac-marbles/#map

24.

merge http://neilpa.me/rac-marbles/#merge

25.

zip http://neilpa.me/rac-marbles/#zip

26.

reduce http://neilpa.me/rac-marbles/#reduce

27.

例例:ダブルタップのストリーム https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

28.

どんな加⼯工ができるか 「RAC  Marbles」やその元の「RxMarbles」を⾒見見る とオペレータの種類とその効果がインタラクティブに わかるのでオススメ   http://neilpa.me/rac-‐‑‒marbles/   http://rxmarbles.com/

29.

ストリームの監視 購読  (Subscribe)  という   ストリームに流流れてくるデータを順次処理理   配列列に戻す、UIへの表⽰示、プロパティの更更新、 画⾯面遷移、etc.

30.
[beta]
すべてを使ったコードの例例
[[[self.textField rac_textSignal] filter:^BOOL(NSString *value) {
return value.length > 0;
}] subscribeNext:^(NSString *value) {
NSLog(@“%@", value);
}];

-‐‑‒rac_̲textSignal

⼊入⼒力力⽂文字列列からストリームを⽣生成

-‐‑‒filter:

ストリームをfilterして空⽂文字列列が
含まれないように加⼯工

-‐‑‒subscribeNext:

ストリームを購読してログ出⼒力力

31.

便便利利なマクロ RAC(self.label, text) = RACObserve(self, text); たったこれだけで  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.

実際の画⾯面は   メルカリをダウンロードして   ⾒見見てください!!! https://itunes.apple.com/jp/app/id667861049

41.

データバインディングの例例 銀⾏行行情報編集画⾯面   RAC(self.accountNumberTextField, text) = RACObserve(self.viewModel, accountNumber); プロパティの変更更をテキストフィールドに⾃自動反映   検索索サジェスト画⾯面   RAC(self, inputText) = textField.rac_textSignal; テキストフィールドの変更更をプロパティに⾃自動反映

42.

Promiseの例例 購⼊入画⾯面   RACSignal *timeoutSignal = [[RACSignal merge:@[ _btDataSignal, [RACSignal interval:kBTDataTimeout onScheduler:[RACScheduler mainThreadScheduler]], ]] take:1]; [RACSignal combineLatest:@[_buyAPISignal, timeoutSignal]] subscribeNext:^(RACTuple *tuple) { //... } error:^(NSError *error) { //... }]; タイムアウトを設けた失敗してもよい⾮非同期処理理と 購⼊入APIの完了了を両⽅方待つ

43.

MVVMを導⼊入した画⾯面 住所編集画⾯面   ⽀支払い⽅方法選択画⾯面   住所⼀一覧画⾯面   商品⼀一覧画⾯面   銀⾏行行情報編集画⾯面   購⼊入画⾯面   検索索条件選択画⾯面   検索索コーチマーク画⾯面   通知設定画⾯面   検索索サジェスト画⾯面

44.

MVVMとは Model  View  ViewModelというMVCの派⽣生パターン   https://ja.wikipedia.org/wiki/Model_̲View_̲ViewModel   ViewModelはViewを描画するための状態の保持と、 Viewから受け取った⼊入⼒力力を適切切な形に変換してModel に伝達する役⽬目   ViewModelはテストできる!

45.
[beta]
応⽤用例例:インクリメンタルサーチ
検索索サジェスト画⾯面  
以下とほぼ同じ実装をしている  
[[[[[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);
}];

http://qiita.com/ikesyo/items/e699eefe1d0985158420

個⼈人的にFRPが本領領発揮するケースの1つだと思う

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