React + Fluxを実践投入してみて

社内LT(2017/10/6)

Transcript

1. React + Fluxを 実践投入してみて @pakkun
2. やっていること
3. オールアバウトの基幹システ ムである記事生成ツール （CMS）のリプレイス
5. アジェンダ
6. アジェンダ  よかったこと  大変だったこと  開発を楽にするためにやったこと  やっておけばよかったこと  教訓  まとめ
7. React + Fluxで作った機能数 ※flux-utilsを使用
8. 19機能
9. よかったこと
10.  Virtual DOMが提供する一方通行のフローによ り、サーバサイドと似た構造にできる  コードをシンプルに書ける  Immutable.jsを使うとさらに楽
11. VirtualDOMが提供する 一方通行のフロー
13. サーバサイドで考えるなら
15. コードがシンプルに書ける
17. Immutable.jsを使うとさらに楽
19. React + Fluxで 大変だったこと
20.  Examplesが難しい  jQueryとの共存がしづらい  Fluxの学習コストが高い  良くも悪くもコンポーネント指向  LaravelやRailsのようなフルスタックフレー ムワークと合わせて使うと中途半端になりや すい  ライセンスに問題があった
21. Examplesが難しい
22.  綺麗に構造化されているexamplesが少な い・・・ flux/examples ActionCreator、Actionが明確に分かれていないなど・・・
23. jQueryとの共存がしづらい
24.  VirtualDOMに任せる必要があるので、直接 DOMを更新しづらい ※jQueryをなるべく使わない強い意志が必要
25. Fluxの学習コストが高い
26.  CQRS（コマンドとクエリの責務分離）がわ かっていないとしんどい ※CQRSに関しては、CQS（コマンドとクエリの分離原則）とDDD（ドメイン駆 動設計）を知るのが早い
27. 良くも悪くも コンポーネント指向
28.  ライブラリを組み合わせてフレームワークを 構築できる程度の知識が必要 ※サーバサイドで置き換えると、React(View)、Flux(Controller、 Service)、Immutable.js（ Repository 、Factory、Entity）  日頃からGithub Trendsを追いかけて使えそ うなものを探しておく必要がある ※awesome-reactを見ておくと良い
29. LaravelやRailsのようなフルス タックフレームワークと合わせ て使うと中途半端になりやすい
30.  Node.jsで完結できないのでつらい react-scriptsが使えない Hot Module Replacement(HMR)が難しい Webpackの知識が必要になってくる
31. ライセンスに問題があった
32.  FacebookのOSSには特許に関するライセン スが付与されている問題があったが、 Apacheが本格的に使用をやめたことにより、 結果的にはMITライセンスになった。ライセ ンス周り大事。
33. React + Fluxでの開発を楽にす るためにやったこと
34.  開発環境のDocker化(Node入り)  Webpackでファイルの自動トランスパイル化  ESLintでの構文チェック  React + Flux勉強会（6時間） -> QiitaのAPIを使用してのハンズオン  Boilerplateの作成
35. やっておけばよかったこと
36.  flux-utilsのAPIコールはviewより ActionCreatorが良い
37. まとめ
38.  Reactは玄人向け  コストは高いけど秩序が保たれた  誰が書いても同じようなコードにしやすい  一度作れれば高速に実装できる  イージーではなくシンプルに実装できる
39. 導入してよかった！！
40. 最後に
41. JavaScriptはHTML、CSSを操作する ために後から実装された機能で、リッチ なUIを提供することを目的としている
42. Virtual DOMによって HTML・CSS > JavaScript の構造を逆転できるようになり、 JavaScript > HTML・CSS で管理できるようなった
43. それは、JavaScript上でHTML、CSS を組み込んでアプリケーションが実行で きるということ
44. つまり、Android Java、Swiftのよう な開発ができるようになったということ と同義
45. Virtual DOMはフロントエンドの世界 にパラダイムシフトを起こした
46. ご清聴ありがとうございました。 明日から Let’s VirtualDOM+ Flux！