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

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

社内LT(2017/10/6)

228825581861a4e8a4cb795a06d7a835?s=128

pakkun / oneut

October 23, 2017
Tweet

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!