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

Transcript

1. React + Fluxを 実践投入してみて @pakkun

2. やっていること

3. オールアバウトの基幹システ ムである記事生成ツール （CMS）のリプレイス

4. None

5. アジェンダ

6. アジェンダ  よかったこと  大変だったこと  開発を楽にするためにやったこと  やっておけばよかったこと 

   教訓  まとめ

7. React + Fluxで作った機能数 ※flux-utilsを使用

8. 19機能

9. よかったこと

10.  Virtual DOMが提供する一方通行のフローによ り、サーバサイドと似た構造にできる  コードをシンプルに書ける  Immutable.jsを使うとさらに楽

11. VirtualDOMが提供する 一方通行のフロー

12. None

13. サーバサイドで考えるなら

14. None

15. コードがシンプルに書ける

16. None

17. Immutable.jsを使うとさらに楽

18. None

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！