Relax site Flux

Transcript

1. Relax site Flux Relax site Flux Relax site Flux Relax site Flux Relax site Flux Relax site Flux taki4227 taki4227 taki4227 taki4227 taki4227 taki4227
3. Flux とは Flux とは Flux とは Flux とは Flux とは Flux とは
4. Flux とは Flux とは Flux とは Flux とは Flux とは Flux とは Facebook 社が提唱 Facebook 社が提唱 Facebook 社が提唱 Facebook 社が提唱 Facebook 社が提唱 Facebook 社が提唱 クライアントサイドのアーキテクチャ( 設計思想) クライアントサイドのアーキテクチャ( 設計思想) クライアントサイドのアーキテクチャ( 設計思想) クライアントサイドのアーキテクチャ( 設計思想) クライアントサイドのアーキテクチャ( 設計思想) クライアントサイドのアーキテクチャ( 設計思想) MVC やMVVM など同じ MVC やMVVM など同じ MVC やMVVM など同じ MVC やMVVM など同じ MVC やMVVM など同じ MVC やMVVM など同じ 複数のコンポーネントがあり、データフローが複雑化して 複数のコンポーネントがあり、データフローが複雑化して 複数のコンポーネントがあり、データフローが複雑化して 複数のコンポーネントがあり、データフローが複雑化して 複数のコンポーネントがあり、データフローが複雑化して 複数のコンポーネントがあり、データフローが複雑化して いるときに使うとよい いるときに使うとよい いるときに使うとよい いるときに使うとよい いるときに使うとよい いるときに使うとよい                        
5. 複数のコンポーネント + データフローが複雑化している例 複数のコンポーネント + データフローが複雑化している例 複数のコンポーネント + データフローが複雑化している例 複数のコンポーネント + データフローが複雑化している例 複数のコンポーネント + データフローが複雑化している例 複数のコンポーネント + データフローが複雑化している例
6. Flux とは Flux とは Flux とは Flux とは Flux とは Flux とは 代表的なライブラリ 代表的なライブラリ 代表的なライブラリ 代表的なライブラリ 代表的なライブラリ 代表的なライブラリ facebook/ ux facebook/ ux facebook/ ux facebook/ ux facebook/ ux facebook/ ux reduxjs/redux reduxjs/redux reduxjs/redux reduxjs/redux reduxjs/redux reduxjs/redux vuejs/vuex vuejs/vuex vuejs/vuex vuejs/vuex vuejs/vuex vuejs/vuex Android, iOS などのアプリ開発でも使われている Android, iOS などのアプリ開発でも使われている Android, iOS などのアプリ開発でも使われている Android, iOS などのアプリ開発でも使われている Android, iOS などのアプリ開発でも使われている Android, iOS などのアプリ開発でも使われている                              
7. Flux の特徴 Flux の特徴 Flux の特徴 Flux の特徴 Flux の特徴 Flux の特徴
8. Flux の特徴 Flux の特徴 Flux の特徴 Flux の特徴 Flux の特徴 Flux の特徴 "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" "Data in a Flux application ows in a single direction" データの流れを単一方向に扱う データの流れを単一方向に扱う データの流れを単一方向に扱う データの流れを単一方向に扱う データの流れを単一方向に扱う データの流れを単一方向に扱う http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html http://facebook.github.io/ ux/docs/in-depth-overview.html
9. Flux の構成要素 Flux の構成要素 Flux の構成要素 Flux の構成要素 Flux の構成要素 Flux の構成要素
10. Flux の構成要素 Flux の構成要素 Flux の構成要素 Flux の構成要素 Flux の構成要素 Flux の構成要素 Action Action Action Action Action Action Dispatcher
    
    
    
    
    
    
    
    
    
    
    . Dispatcher
    
    
    
    
    
    
    
    
    
    
    . Dispatcher
    
    
    
    
    
    
    
    
    
    
    . Dispatcher
    
    
    
    
    
    
    
    
    
    
    . Dispatcher
    
    
    
    
    
    
    
    
    
    
    . Dispatcher
    
    
    
    
    
    
    
    
    
    
    . Store Store Store Store Store Store View View View View View View                        
11. Action Action Action Action Action Action アプリケーションの状態を変更するためのイベント アプリケーションの状態を変更するためのイベント アプリケーションの状態を変更するためのイベント アプリケーションの状態を変更するためのイベント アプリケーションの状態を変更するためのイベント アプリケーションの状態を変更するためのイベント ユーザーのView を操作 ユーザーのView を操作 ユーザーのView を操作 ユーザーのView を操作 ユーザーのView を操作 ユーザーのView を操作 サーバーへのデータの更新 サーバーへのデータの更新 サーバーへのデータの更新 サーバーへのデータの更新 サーバーへのデータの更新 サーバーへのデータの更新 ここで作られるAction は必ず Dispatcher に送られる ここで作られるAction は必ず Dispatcher に送られる ここで作られるAction は必ず Dispatcher に送られる ここで作られるAction は必ず Dispatcher に送られる ここで作られるAction は必ず Dispatcher に送られる ここで作られるAction は必ず Dispatcher に送られる                        
12. Dispatcher Dispatcher Dispatcher Dispatcher Dispatcher Dispatcher Action と Store を結び付ける Action と Store を結び付ける Action と Store を結び付ける Action と Store を結び付ける Action と Store を結び付ける Action と Store を結び付ける 全ての Action を受け取る 全ての Action を受け取る 全ての Action を受け取る 全ての Action を受け取る 全ての Action を受け取る 全ての Action を受け取る その Action を元に Store にイベントを送る その Action を元に Store にイベントを送る その Action を元に Store にイベントを送る その Action を元に Store にイベントを送る その Action を元に Store にイベントを送る その Action を元に Store にイベントを送る                  
13. Store Store Store Store Store Store アプリケーション内のすべての状態を保持している アプリケーション内のすべての状態を保持している アプリケーション内のすべての状態を保持している アプリケーション内のすべての状態を保持している アプリケーション内のすべての状態を保持している アプリケーション内のすべての状態を保持している Dispatcher からのイベントによって、その状態を変更する Dispatcher からのイベントによって、その状態を変更する Dispatcher からのイベントによって、その状態を変更する Dispatcher からのイベントによって、その状態を変更する Dispatcher からのイベントによって、その状態を変更する Dispatcher からのイベントによって、その状態を変更する Dispatcher 経由以外で変更することはできない Dispatcher 経由以外で変更することはできない Dispatcher 経由以外で変更することはできない Dispatcher 経由以外で変更することはできない Dispatcher 経由以外で変更することはできない Dispatcher 経由以外で変更することはできない                  
14. View View View View View View ユーザに見える画面 ユーザに見える画面 ユーザに見える画面 ユーザに見える画面 ユーザに見える画面 ユーザに見える画面 画面を操作したとき、 Action を Dispatcher に送る 画面を操作したとき、 Action を Dispatcher に送る 画面を操作したとき、 Action を Dispatcher に送る 画面を操作したとき、 Action を Dispatcher に送る 画面を操作したとき、 Action を Dispatcher に送る 画面を操作したとき、 Action を Dispatcher に送る Store の状態を常に監視する Store の状態を常に監視する Store の状態を常に監視する Store の状態を常に監視する Store の状態を常に監視する Store の状態を常に監視する 変更があった場合に自身にデータを反映させる 変更があった場合に自身にデータを反映させる 変更があった場合に自身にデータを反映させる 変更があった場合に自身にデータを反映させる 変更があった場合に自身にデータを反映させる 変更があった場合に自身にデータを反映させる                        
15. Flux のデータフロー Flux のデータフロー Flux のデータフロー Flux のデータフロー Flux のデータフロー Flux のデータフロー
16. Flux のデータフロー Flux のデータフロー Flux のデータフロー Flux のデータフロー Flux のデータフロー Flux のデータフロー 1 1 1 1 1 1. . . . . . View が Dispather に Action を送る View が Dispather に Action を送る View が Dispather に Action を送る View が Dispather に Action を送る View が Dispather に Action を送る View が Dispather に Action を送る 2 2 2 2 2 2. . . . . . Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける Dispather が Action を元に Store に振り分ける 3 3 3 3 3 3. . . . . . Store が変更され、 View にデータを反映 Store が変更され、 View にデータを反映 Store が変更され、 View にデータを反映 Store が変更され、 View にデータを反映 Store が変更され、 View にデータを反映 Store が変更され、 View にデータを反映
17. 具体例： ユーザが商品追加ボタンを押したとき 具体例： ユーザが商品追加ボタンを押したとき 具体例： ユーザが商品追加ボタンを押したとき 具体例： ユーザが商品追加ボタンを押したとき 具体例： ユーザが商品追加ボタンを押したとき 具体例： ユーザが商品追加ボタンを押したとき
18. これを実装に落とし込むと... これを実装に落とし込むと... これを実装に落とし込むと... これを実装に落とし込むと... これを実装に落とし込むと... これを実装に落とし込むと... https://github.com/facebook/ ux https://github.com/facebook/ ux https://github.com/facebook/ ux https://github.com/facebook/ ux https://github.com/facebook/ ux https://github.com/facebook/ ux
19. Flux のメリット Flux のメリット Flux のメリット Flux のメリット Flux のメリット Flux のメリット
20. Flux のメリット Flux のメリット Flux のメリット Flux のメリット Flux のメリット Flux のメリット それぞれの役割が明確 それぞれの役割が明確 それぞれの役割が明確 それぞれの役割が明確 それぞれの役割が明確 それぞれの役割が明確 データの更新があるときは、Action が生成される データの更新があるときは、Action が生成される データの更新があるときは、Action が生成される データの更新があるときは、Action が生成される データの更新があるときは、Action が生成される データの更新があるときは、Action が生成される 必ずDispatcher を通っている 必ずDispatcher を通っている 必ずDispatcher を通っている 必ずDispatcher を通っている 必ずDispatcher を通っている 必ずDispatcher を通っている 動的なデータはStore にある 動的なデータはStore にある 動的なデータはStore にある 動的なデータはStore にある 動的なデータはStore にある 動的なデータはStore にある データの流れが一方通行 データの流れが一方通行 データの流れが一方通行 データの流れが一方通行 データの流れが一方通行 データの流れが一方通行 コードを行ったり来たり、読まなくてよい コードを行ったり来たり、読まなくてよい コードを行ったり来たり、読まなくてよい コードを行ったり来たり、読まなくてよい コードを行ったり来たり、読まなくてよい コードを行ったり来たり、読まなくてよい 開発者間でコードが統一されやすい 開発者間でコードが統一されやすい 開発者間でコードが統一されやすい 開発者間でコードが統一されやすい 開発者間でコードが統一されやすい 開発者間でコードが統一されやすい                                          
21. 補足(MVC) 補足(MVC) 補足(MVC) 補足(MVC) 補足(MVC) 補足(MVC)
22. 補足(MVVM) 補足(MVVM) 補足(MVVM) 補足(MVVM) 補足(MVVM) 補足(MVVM)
23. 補足(FLux) 補足(FLux) 補足(FLux) 補足(FLux) 補足(FLux) 補足(FLux)