Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React + Fluxを実践投入してみて
Search
pakkun / oneut
October 23, 2017
Technology
0
850
React + Fluxを実践投入してみて
社内LT(2017/10/6)
pakkun / oneut
October 23, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
大規模データとの戦い方
knih
1
480
Building a RAG app to chat with your data (on Azure)
pamelafox
0
150
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
1
770
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
170
私のRSpecの書き方 / How I write RSpec
tmtms
4
840
現実世界の事象から学ぶSOLID原則
h0r15h0
25
11k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
560
データマネジメントを支える武器としてのメタデータ管理
10xinc
2
980
生成AIサービスPanorama AIご説明資料
sdt
0
300
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.6k
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Being A Developer After 40
akosma
56
580k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Design by the Numbers
sachag
274
18k
Product Roadmaps are Hard
iamctodd
43
9.6k
Unsuck your backbone
ammeep
661
56k
Into the Great Unknown - MozCon
thekraken
10
830
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
BBQ
matthewcrist
78
8.7k
The Mythical Team-Month
searls
214
42k
Transcript
React + Fluxを 実践投入してみて @pakkun
やっていること
オールアバウトの基幹システ ムである記事生成ツール (CMS)のリプレイス
None
アジェンダ
アジェンダ よかったこと 大変だったこと 開発を楽にするためにやったこと やっておけばよかったこと
教訓 まとめ
React + Fluxで作った機能数 ※flux-utilsを使用
19機能
よかったこと
Virtual DOMが提供する一方通行のフローによ り、サーバサイドと似た構造にできる コードをシンプルに書ける Immutable.jsを使うとさらに楽
VirtualDOMが提供する 一方通行のフロー
None
サーバサイドで考えるなら
None
コードがシンプルに書ける
None
Immutable.jsを使うとさらに楽
None
React + Fluxで 大変だったこと
Examplesが難しい jQueryとの共存がしづらい Fluxの学習コストが高い 良くも悪くもコンポーネント指向 LaravelやRailsのようなフルスタックフレー
ムワークと合わせて使うと中途半端になりや すい ライセンスに問題があった
Examplesが難しい
綺麗に構造化されているexamplesが少な い・・・ flux/examples ActionCreator、Actionが明確に分かれていないなど・・・
jQueryとの共存がしづらい
VirtualDOMに任せる必要があるので、直接 DOMを更新しづらい ※jQueryをなるべく使わない強い意志が必要
Fluxの学習コストが高い
CQRS(コマンドとクエリの責務分離)がわ かっていないとしんどい ※CQRSに関しては、CQS(コマンドとクエリの分離原則)とDDD(ドメイン駆 動設計)を知るのが早い
良くも悪くも コンポーネント指向
ライブラリを組み合わせてフレームワークを 構築できる程度の知識が必要 ※サーバサイドで置き換えると、React(View)、Flux(Controller、 Service)、Immutable.js( Repository 、Factory、Entity) 日頃からGithub Trendsを追いかけて使えそ
うなものを探しておく必要がある ※awesome-reactを見ておくと良い
LaravelやRailsのようなフルス タックフレームワークと合わせ て使うと中途半端になりやすい
Node.jsで完結できないのでつらい react-scriptsが使えない Hot Module Replacement(HMR)が難しい Webpackの知識が必要になってくる
ライセンスに問題があった
FacebookのOSSには特許に関するライセン スが付与されている問題があったが、 Apacheが本格的に使用をやめたことにより、 結果的にはMITライセンスになった。ライセ ンス周り大事。
React + Fluxでの開発を楽にす るためにやったこと
開発環境のDocker化(Node入り) Webpackでファイルの自動トランスパイル化 ESLintでの構文チェック React + Flux勉強会(6時間)
-> QiitaのAPIを使用してのハンズオン Boilerplateの作成
やっておけばよかったこと
flux-utilsのAPIコールはviewより ActionCreatorが良い
まとめ
Reactは玄人向け コストは高いけど秩序が保たれた 誰が書いても同じようなコードにしやすい 一度作れれば高速に実装できる イージーではなくシンプルに実装できる
導入してよかった!!
最後に
JavaScriptはHTML、CSSを操作する ために後から実装された機能で、リッチ なUIを提供することを目的としている
Virtual DOMによって HTML・CSS > JavaScript の構造を逆転できるようになり、 JavaScript > HTML・CSS で管理できるようなった
それは、JavaScript上でHTML、CSS を組み込んでアプリケーションが実行で きるということ
つまり、Android Java、Swiftのよう な開発ができるようになったということ と同義
Virtual DOMはフロントエンドの世界 にパラダイムシフトを起こした
ご清聴ありがとうございました。 明日から Let’s VirtualDOM+ Flux!