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

by pakkun / oneut

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

やっていること

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

アジェンダ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

19機能

Slide 9

Slide 9 text

よかったこと

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Immutable.jsを使うとさらに楽

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

React + Fluxで大変だったこと

Slide 20

Slide 20 text

 Examplesが難しい  jQueryとの共存がしづらい  Fluxの学習コストが高い  良くも悪くもコンポーネント指向  LaravelやRailsのようなフルスタックフレームワークと合わせて使うと中途半端になりやすい  ライセンスに問題があった

Slide 21

Slide 21 text

Examplesが難しい

Slide 22

Slide 22 text

 綺麗に構造化されているexamplesが少ない・・・ flux/examples ActionCreator、Actionが明確に分かれていないなど・・・

Slide 23

Slide 23 text

jQueryとの共存がしづらい

Slide 24

Slide 24 text

 VirtualDOMに任せる必要があるので、直接 DOMを更新しづらい ※jQueryをなるべく使わない強い意志が必要

Slide 25

Slide 25 text

Fluxの学習コストが高い

Slide 26

Slide 26 text

 CQRS（コマンドとクエリの責務分離）がわかっていないとしんどい ※CQRSに関しては、CQS（コマンドとクエリの分離原則）とDDD（ドメイン駆動設計）を知るのが早い

Slide 27

Slide 27 text

良くも悪くもコンポーネント指向

Slide 28

Slide 28 text

 ライブラリを組み合わせてフレームワークを構築できる程度の知識が必要 ※サーバサイドで置き換えると、React(View)、Flux(Controller、 Service)、Immutable.js（ Repository 、Factory、Entity）  日頃からGithub Trendsを追いかけて使えそうなものを探しておく必要がある ※awesome-reactを見ておくと良い

Slide 29

Slide 29 text

LaravelやRailsのようなフルスタックフレームワークと合わせて使うと中途半端になりやすい

Slide 30

Slide 30 text

 Node.jsで完結できないのでつらい react-scriptsが使えない Hot Module Replacement(HMR)が難しい Webpackの知識が必要になってくる

Slide 31

Slide 31 text

ライセンスに問題があった

Slide 32

Slide 32 text

 FacebookのOSSには特許に関するライセンスが付与されている問題があったが、 Apacheが本格的に使用をやめたことにより、結果的にはMITライセンスになった。ライセンス周り大事。

Slide 33

Slide 33 text

React + Fluxでの開発を楽にするためにやったこと

Slide 34

Slide 34 text

 開発環境のDocker化(Node入り)  Webpackでファイルの自動トランスパイル化  ESLintでの構文チェック  React + Flux勉強会（6時間） -> QiitaのAPIを使用してのハンズオン  Boilerplateの作成

Slide 35

Slide 35 text

やっておけばよかったこと

Slide 36

Slide 36 text

 flux-utilsのAPIコールはviewより ActionCreatorが良い

Slide 37

Slide 37 text

まとめ

Slide 38

Slide 38 text

 Reactは玄人向け  コストは高いけど秩序が保たれた  誰が書いても同じようなコードにしやすい  一度作れれば高速に実装できる  イージーではなくシンプルに実装できる

Slide 39

Slide 39 text

導入してよかった！！

Slide 40

Slide 40 text

最後に

Slide 41

Slide 41 text

JavaScriptはHTML、CSSを操作するために後から実装された機能で、リッチなUIを提供することを目的としている

Slide 42

Slide 42 text

Virtual DOMによって HTML・CSS > JavaScript の構造を逆転できるようになり、 JavaScript > HTML・CSS で管理できるようなった

Slide 43

Slide 43 text

それは、JavaScript上でHTML、CSS を組み込んでアプリケーションが実行できるということ

Slide 44

Slide 44 text

つまり、Android Java、Swiftのような開発ができるようになったということと同義

Slide 45

Slide 45 text

Virtual DOMはフロントエンドの世界にパラダイムシフトを起こした

Slide 46

Slide 46 text

ご清聴ありがとうございました。明日から Let’s VirtualDOM+ Flux！