Download as PDF, PPTX
![[20140625]wwdc2014 feedback](https://cdn.slidesharecdn.com/ss_thumbnails/20140625wwdc2014feedback-140625023809-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[20130624]最近の開発環境について話してみる sakata](https://cdn.slidesharecdn.com/ss_thumbnails/20130624sakata-130624201516-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Flux react現状確認会
- 1.
- 2. 前提となる適用先 • 管理画面的なWebアプリケーションのリニューアル …だったもの（仮） • RESTAPIを前提としたSingle Page Applicationもどき （※すべてが1ページではないけど） • 機能・画面が多い • 複雑化することがほぼ確実
- 3. Viewへの要求事項 • 統一されたスタイルでUIとなるHTMLを生成できる • なるべく簡単に書けること（含セキュリティリスク回避） （生DOM・jQueryはあり得ない） •業界におけるパラダイムが過渡期のため、 巨大フレームワークに乗っかりたくは無い （交換可能な部品の組み合わせでプレーンに） • 困ってもなんとか出来るための緊急ハッチも必要
- 4.
- 5.
- 6. It’s not anyframework, is just an architecture.
- 7. Flux アーキテクチャ • Facebook提唱のGUIアプリのアーキテクチャ •オブザーバパターンを用いる • データの流れる方向を単一にする • 特定のライブラリに依存する思考ではないと 解釈している
- 8.
- 9. Fluxのメリット • データの入力と出力のフローが一定になる • 「あるモジュールに入力が起きた場合、次は どこにデータが来るか？」を規約したアーキ テクチャ •なので、デバッグ的な予測がしやすい • MVC方言にありがちな概念の言語化
- 10. Fluxの辛いところ • 定着した概念ではないので、オレオレFluxが乱立 している（情報収集の難） • 冗長な箇所もある （ほぼ必ずサイクルを一周しなければいけない） •Store->Viewの通知粒度を細かくしないと、 一般的にViewの更新コストが非常に大きい
- 11.
- 12. 今回のViewへの要求事項 • 統一されたスタイルでUIとなるHTMLを生成できる • なるべく簡単に書けること（含XSS回避） •交換可能な部品の組み合わせでプレーンに. • 困ってもなんとか出来るための緊急ハッチも必要 （生のDOM APIを触る方法がある）
- 13. First, I usedVue.js
- 14.
- 15. Vue.js (vuejs.org) • ModelView ViewModel (MVVM) pattern • ES5でデータバインディングする • Angularのデータバインディングだけ 切り出したようなもの • イケイケJSライブラリの割に ドキュメントが文明的
- 16. 「良い」というよりも「楽」 • 宣言的に書ける • データバインディング •データを渡せば勝手に表示してくれる • 紐づければ勝手に更新される • 記述量も少なめ
- 17.
- 18. 個人的にイマイチ感あった • 規約らしいものはあんまりない • 「Vue.jsの考えるViewModel」が言語化されているとは 言いがたい •特に値と状態の区別が無いのは好きではない （ビュー層の宿命ではあるが） • Vueのテンプレート定義は複雑な記述が面倒くさい • 個人的にJSコードとバインド先の記述の分断を感じる • プロトタイプチェーンを書き換える（※最近、改良された）
- 19. プロトタイプチェーンを 書き換えやがって （^ω^）こういうチェーンがあるじゃろ？ ! Hoge | V Hoge.prototype | V Object.prototype
- 20. プロトタイプチェーンを 書き換えやがって （^ω^）Vue.jsにHogeを渡すじゃろ？ ! Vue({ data: { bar: Hoge, }, })
- 21. プロトタイプチェーンを 書き換えやがって （^ω^）Vue.jsはこう書き換えるじゃろ？ ! Hoge | V <Vueの変更監視用プロパティ> | V Object.prototype
- 22. プロトタイプチェーンを 書き換えやがって （^ω^）Hoge.prototypeは行方不明じゃろ？ ! Hoge | V <Vueの変更監視用プロパティ> | V Object.prototype
- 23. プロトタイプチェーンを 書き換えやがって （^ω^）toString()すらも行方不明じゃろ？ ! Hoge | V <Vueの変更監視用プロパティ> | V Object.prototype
- 25.
- 26.
- 27.
- 28. React • View特化ライブラリ（render library) •自動差分描画機能を持つ（Virtual DOM） • データと状態の概念がAPIレベルで 分かれている • ドキュメントが本当に細かい (github:facebook/react)
- 29.
- 30. Virtual DOM <div> <h1>bar</h1> <p>foo</p> </div> div h1 p bar foo テンプレートエンジンとして、 文字列ではなく木構造を作る
- 31. div h1 p bar foo div h1p bar 差分計算の概念図 生成した木構造を中間表現として扱い, データ構造としての比較を行う
- 32.
- 33.
- 34.
- 35. Reactのテンプレートの書き方 • JSで React.DOM.Div()みたいな関数を使って 頑張って組む • またはJSX (JavaScript XML)で組む • XMLリテラルぽいが、最終的にプレーン なJSの関数に落とし込まれる
- 36.
- 37.
- 38. ReactとFlux • Store->Viewへの変更通知を簡略化できる • Reactでは変更後のデータ一式全てを 受けても描画コストを抑えられる •他ライブラリでは、 丁寧に差分情報を作る必要が有る
- 39.
- 40. Reactのデメリット • React自身が未だ0.xの状態 （バージョンアップ時に破壊的変更の可能性） • 枯れてはいない •React管理下のDOMツリーに対して、 他のライブラリを当てるのは面倒くさそう
- 41.
- 42.
- 43. Reactを選んだ理由 • 参照透過性のあるビュー =状態予測可能性が高い • APIレベルでデータの値と状態を分離している • JSXテンプレートがプログラマブル （積極的に使いたくは無いけど） • ドキュメントが良い （開発元のFacebook自身が使ってる）
- 44.
- 45. 1. Store ->Viewの更新通知 • オリジナル 通知を受けたらStoreから、getterメソッドで 取得してる • 弊プロジェクト 「そんなことはしない。通知時に一緒にデー タ全部を渡す. StoreとViewを疎に.」
- 46. 2. Actionの更新通知 • オリジナル リクエスト失敗ケースを考えると、APIリクエスト もAction起因に •弊プロジェクト APIリクエストはStoreの領分なのと、 サーバーは永続ストレージという認識なので、 Storeに詰め込んだ
- 47. 3. テスト • オリジナル 「Jestでモックすれば楽！」 •弊プロジェクト 「モックは実装に立ち入り過ぎ. 静的にできる 範囲で, mochaとpower-assertで.」
- 48. 4. Viewのテスト • イベントハンドラの無いViewにユニットテス トは必要ないと判断 •イベントハンドラのテストはしたい • E2Eテストでカバーも考えたい • ほとんどが未着手・検討中
- 49. まとめ • 常に気をつけてMVCをやりたくはなかった →Fluxを採用した • Viewの更新を楽にしたいし, デバッグもなるべく楽にしたかった →Reactを採用した • ReactはView操作のパラダイムシフト
- 50.
- 51. Q. Store内部の依存関係の解決は？ • Dispatcherが処理順序解決の方法を 持っているのでそれに頼る（実装依存） •無かったらメッセージの種類を増やして 頑張るしかなさそう
- 52. Q. ユーザーの入力が複数起きたら？ • Fluxの本義に従えば、毎回データフローを回 るべきだし、それで十分に回ると思う •万が一回らなくなったら、そのとき考える
- 53.
- 54.
- 55.
- 56.
- 57. Q. Reactに書き直している暇はないんだけど、止むに止まれぬビジネス上の緊急を 要する都合により早急にこのjQueryプラグインを使わなければ死人が出る可能性も 十分にありえる状況において、どうにかしてReactによって統治されたサブツリー内 でjQueryプラグインを使う方法はありますか？ • getDOMNode()で生のDOMに触れる+ shouldComponentUpdate()を応 用して, jQuery適用対象のDOMをReactに更新させなければ、なんとかい ける、はず （やったことないので根拠はない）
- 58. Q. アニメーションとかどうする？ • ReactがReactCSSTransitionGroupというもの を持っているので、これで対応できるはず •メチャクチャ複雑なことやりたい場合について は、まだ体験した事が無いのでよくわからん • 「絶対に更新されないComponent」を作れば いいんじゃないの？
- 59. Q. JSXの名前解決とか • 普通のJSの関数呼び出しに変換されるので、 普通のJSと一緒と考えて良い •React Componentのメンバ関数のthisは, 各インスタンスにbindされる
- 60. Q. Virtual DOMの差分情報は取 れる？ •ReactにPublicなAPIとしては現在存在しない • 欲しければ, Matt-Esch/virtual-domを使おう
- 61. Q. サーバーサイドでプリレンダリン グしたものにReact当て込みたい • やったことがないのでわからない •API的には出来そうに思えるけど？？？
- 62. Q. Reactの差分描画は最速？ • DOM職人には勝てないと思う •職人エンジニアだけでチームを組まずとも、 生産性を維持しつつ「けっこう速い」ものを 開発するためのツールと割り切るべきでは