React/Redux/Redux-Saga+サーバサイドレンダリング

1. 0
React/Redux/Redux-Saga
+サーバーサイドレンダリング
エスキュービズム・テクノロジー
Jun 17,2016
S-cubism Technology Inc.

2. 私のJavaScript遍歴(フレームワーク)
1
Prototype.js jQuery素 Backbone.js Knockout.js
１年のブランク
React Redux Redux-Saga
時代は変わっていた！

3. 私のJavaScript遍歴(文法)
CoffeeScript ES5素 ES6 ES7

4. https://facebook.github.io/react/

5. 古き良きＷＥＢシステム
ＵＲＬ
ＨＴＭＬ
サーバー ブラウザ
ＨＴＭＬから”DOMツリー”を構築
(DOM：Document Object Model)

6. ブラウザでの動的な処理
#１
#２
#３
#４
#５
jQuery(“#2”).after(jQuery(“#5”))
複数の操作が同時に発生したら？
↓
DOMの状態管理が難しかった
DOM

7. 手続き的から宣言的な処理へ
#１
#２
#３
#４
#１
#２
#５
#３
#４
state = [1, 2, 3, 4] state = [1, 2, 5, 3, 4] こうあるべきを定義
あとはよしなに
ＤＯＭを構築してくれる
DOM DOM

8. 仮想DOMによる変更検知
#１
#２
#３
#４
#１
#２
#５
#３
#４
state = [1, 2, 3, 4] state = [1, 2, 5, 3, 4]
仮想DOM 仮想DOM
仮想DOMを構築し、
変更箇所を検知
↓
変更箇所だけ
本来のDOMに反映

9. Reactの文法(ES6版)

10. コンポーネントからDOMを構築
http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660
ReactDOM.render
仮想DOMを経由

11. データフロー
http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660
props props
props props

12. コンポーネントのライフサイクル
props
state
親コンポーネントから
与えられるデータ
内部で持つ状態
Mounted
Update
Unmounted
setState()
setProp()
props, stateの変更を検知して描画
render()

13. Reactのコンパイル
http://www.pro-react.com/materials/appendixA/
汎用ビルドツール ＪＳ用コンパイラ

14. https://github.com/reactjs/redux

15. コンポーネント間で直接やり取り？
https://css-tricks.com/learning-react-redux/

16. MVC？
https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros
モデルの変更がどのビューに影響を与えるか予測が難しい

17. https://css-tricks.com/learning-react-redux/
Reduxのデータフロー

18. Reduxの全体像
http://chentsulin.github.io/redux-intro/

19. タイマーの実装例
http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/

20. アクションの定義
actions.js
http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/

21. Reducerの実装
reducers.js
stateは直接編集せず
コピーして編集する

22. 状態遷移図で表すと・・
http://jaysoo.ca/2016/01/03/managing-processes-in-redux-
using-sagas/

23. Reactコンポーネントの実装

24. Dispatch
timer.js
タイマー
スタート
描画
Subscribe

25. ミドルウェア
loggerミドルウェアを使えば、
以下のようなログを出力できる
http://chentsulin.github.io/redux-intro/

26. Redux-Saga

27. 非同期のアクション
http://andrewhfarmer.com/react-ajax-best-practices/
Ｔｉｃｋ

28. タイマーコンポーネント
状態遷移が伝わるまでに遅延がある
timer.js
ビューの中に非同期処理が入り混じる

29. Redux-thunk
ミドルウェア
一つのアクションの中で
非同期処理を記述
タイマーはアクションの
直後にスタート
actions.js
非同期処理の起点となる
アクションが肥大化する

30. Redux-Sagaミドルウェア

31. STARTアクションが
発生するまで
処理は止まる
Generator
1秒待って、状態を参照
sagas.js

32. 責務の分離
Reducerの責務 → アクションに対する状態遷移
Sagaの責務 → 複雑非同期な処理の指揮

33. もう少し複雑な例
http://yelouafi.github.io/redux-saga/docs/advanced/NonBlockingCalls.html

34. authorizeを参照
(forkはノンブロッキング)
認証リクエスト処理
の切り出し

35. 補足：async/awaitとの違い
http://wecodetheweb.com/2016/01/23/handling-async-in-redux-with-sagas/
ES7でasync/awaitが提案されているが・・
ここのfetchは実行されてしまう
redux-sagaではfetchの命令を待つことができる

36. サーバーサイドレンダリング

37. JSアプリのSEO問題
http://www.theseotailor.com.au/beginner-seo/introduction-to-seo/

38. サーバーサイドの処理フロー
リクエストを
受け取る
Reduxストア
の初期化
ユニバーサルな
ルーティング
Redux-Saga
の起動
ユニバーサルな
フェッチ
Reactコンポーネント
の文字列化
Reduxストア
の文字列化
レスポンスを
返す
(React-Router)
(Redial)

39. Redialを用いたユニバーサルなフェッチ

40. サーバサイドとクライアントサイド両方で、
以下のようにtriggerを実行する

41. サンプルプロダクトの紹介
https://github.com/scubism/todo_center

42. 以上です