コード設計編: context による縦軸分類とレイヤードアーキテクチャ（新規開発のメモ書きシリーズ3）
流行りの monorepo 風味と DDD 風味？ 今回はコードの設計について書き残します。主に JavaScript 界の話です。Web アプリケーション全体の設計は次回で、今回はコード面の設計に限定して書き留めています。プロダクト全体のアーキテクチャは次の記事で述べる予定ですが大雑把には、メディアっぽいサービスでありつつも SPA + SSR が許容される程度には要件定義の時点でコードの行数がかさむことが約束されたプロダクトです。 今回は大きく分けて下記について述べています ディレクトリ構造 オブジェクトの種類と責務 Flux 的なデータフロー あくまで風味なので今回、専門用語の意味ズレなどは優しくお願いします... このシリーズの他の記事はこちら。 技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選 ビルド設定編: UA に応じた最適な JS バンドルの配信と web
FluxとDDD(レイヤードアーキテクチャ)について考えてみた - embryo
トレタ Advent Calendar 2016 - Qiita 16日目の記事になります。 フロントエンドエンジニアのすえだです。 はじめに Flux実装する上で曖昧性をできるだけ無くすために頑張る話です。 ***アーキテクチャはこうあるべきみたいな原理主義的な話はありません。あくまで参考です。 この記事で書いていること Fluxについて DDD(レイヤードアーキテクチャ)について FluxとDDDの関係性 Fluxのレイヤー化 Fluxについて 単方向に伝搬されるデータでアプリケーションの状態を表現するアーキテクチャパターンです。 CQRSとEvent Sourcingを組み合わせたような形になります。 恩恵 単方向のデータフローにより、行ったり来たりのような処理が少なく振る舞いを理解しやすい DispatcherやActionがシングルトンで表現されるので参照に悩まされづらい DDD
FluxとDDDの統合方法 - かとじゅんの技術日誌
おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i
What the Flux? (On Flux, DDD, and CQRS)
Flux is an application architecture designed by Facebook for their JavaScript applications. It was first introduced by Facebook in May 2014, and it has since garnered much interest in the JavaScript community. There are several implementations of Flux. Frameworks like Fluxxor keep to the original Facebook Flux pattern, but reduces the amount of boilerplate code. While other frameworks like Reflux
Flux UtilsでのFlux実装方法を超シンプルなサンプルを使って解説
先日『Flux Utilsのドキュメント日本語訳』というFlux Utilsのドキュメント英語版を翻訳した記事を投稿しました。Flux Utilsは、Facebook製のFluxフレームワークとでもいうでしょうか。ただ残念なことに、このドキュメントを読むだけでは、Flux Utilsの使い方のイメージを完全に掴むことは難しいと思います（自分がそうでした…）。ということで、Flux Utilsを使って、簡単なサンプルを作ってみました。この簡単なサンプルを通して、Dispatcher.jsだけを使ったFluxの実装方法と比較しながら、Flux Utilsの使い方を説明していきます。 はじめに（Flux Utilsとは） Flux Utilsは、Facebook製のFluxフレームワークとなります。ただ、すべての用途に対応するような完成されたフレームワークではないとFlux Utilsのドキュメ
waitFor leads to wrong design · Issue #209 · facebookarchive/flux
I don't really think it has any benefit to keep waitFor method in dispatcher as it's leading to wrong design. A great example of that is implementation in flux-chat. I was actually thinking about sending a PR where waitFor method is not used, then I realised that the only correct way would be to get rid of ThreadStore and UnreadThreadStore. I believe the right approach would be to to keep entire s
Flux - ActionsとDispacher（日本語訳） - Qiita
Fluxのドキュメントページにある、Actions and Dispacherというページを日本語訳してみた。 ※ わーと、っと訳してしまったので、随時なおしていく。誤訳等あればご指摘下さい。 Dispatcherとは？ DispatcherはFluxアプリケーションのデータフローの中央ハブとなるSingletonである。それは、本質的にコールバックのレジストリであり、登録されたコールバックを呼び起こすことができる。各StoreはDispacherにコールバックを登録することができる。新しいデータがDispatcherに入ると、Disptacherは登録済みのコールバックを用いてStoreにデータを伝搬する。dispatch()メソッドを通じてコールバックを呼び出す。dispatchメソッドはデータペイロードオブジェクト引数にとる。このペイロードオブジェクトは一般的にアクションと同義である
Flux – Dispatcherのドキュメント【日本語訳】と実装のポイント
FluxはFacebookの提唱するクライアントサイドのWebアプリケーション（ユーザーインターフェース）を開発するためのアプリケーションアーキテクチャです。FluxはView、Store、Dispacther、Actionの4つの役割に分けられます。今回その中でもFluxの中心となる「Dispatcher」の部分について理解を深めるために、Fluxのドキュメント内のDispatcherの部分を翻訳してみました。Dispatcherがわかれば、Fluxでの実装についてもそれなりにわかるようになると思うので、拙い訳ですが、ぜひ参考にしてみてください。 はじめに – FluxとDispatcher Fluxは「クライアントサイドのWebアプリケーション（ユーザーインターフェース）を開発するためのアプリケーションアーキテクチャ」です。MVCやMVVMなどと同類です。Fluxは役割によってView
Reactの単純なサンプルでFluxの実装を解説
先日『Flux – Dispatcher【日本語訳】と実装のポイント』という記事を投稿しました。Fluxの理解を深めるために、その実装の核となるDispatcherを理解することが大事だと思ったからです。おかげで、ある程度Fluxの理解進みました。今回さらにFluxを実装することで、理解を深めたいと思い、簡単なサンプルを作ってみることにしました。このサンプルを通して、Fluxの実装方法について説明していきたいと思います。だいぶ長くなりましたが、ぜひ参考にしていただければと思います。 Fluxの実装サンプルまずはサンプルを見てください。フォームに入力したテキストを表示させるだけのものとなっています。とても単純ですが、Fluxを使って実装しています。 Flux実装サンプルコード – GitHubFlux実装の説明の前にFluxとは FluxFluxは「クライアントサイドのWebアプリケーション
10分で実装するFlux
10分で実装するFlux 自己紹介 azu @azu_re Web scratch, JSer.info Flux /flˈʌks/ Fluxとは Facebookが提唱したSmalltalk MVCの焼き直し CQRS(Command Query Responsibility Segregation)と類似 データが一方通行へ流れるようにするアーキテクチャ ウェブUIについてそれを適応する 今日の目的 小さなFluxの実装を作りながらFluxついて学ぶ Fluxの特徴: Unidirectional data flow 本当にデータが一方通行に流れるのかを確認する Fluxでよく見る図 登場人物 何か色々いる Action Creators, Dispatcher, Store, React Views... Dispatcher = EventEmitterと今回は考える もっと実装的
React/Fluxにおける問題とReducerが切り開く道 | FAworksブログ
私がReact/Fluxアプリケーションを書いてきて、もう1年になる。Flux開発の1年を振り返ってみると、このFluxというものが便利だと、はっきり言うことができる。過去は「こんなイベントチェーンなんて触ってないよ」という日々だった。取り組んできた全てのFluxコードベースは綺麗だったし、デバッグ可能で、メンテナンスも容易にできた。 Fluxに関しては、インタラクティブな金融チャート、リアルタイムのテーブル絞込み、いつものCRUD系のものから複雑な非同期要求チェーンにいたるまで、遭遇してきたあらゆる問題を解決することができた。Flux最大の長所の一つは、その普遍性だ。絶対的に簡潔で美しくなることは決してないが、決してハッキングすることもない。大規模コードベースにおいては良いことだ。複雑なUIに取り組む際にも、同じ考え方を当てはめると非常に効果的となる。 良いことづくめ？ もちろん、そんな
Flux | Application Architecture for Building User Interfaces
Flux Utils is a set of basic utility classes to help get you started with Flux. These base classes are a solid foundation for a simple Flux application, but they are not a feature-complete framework that will handle all use cases. There are many other great Flux frameworks out there if these utilities do not fulfill your needs. Usage #There are four main classes exposed in Flux Utils: StoreReduceS
Fluxフレームワーク戦争の現状確認（前編） - マルシテイア
この記事は 仮想DOM/Flux Advent Calendar 2015 2日目の記事です。 みなさんFlux書いてますか？ 僕はオレオレ実装を書き続けて消耗してます。 Fluxフレームワーク使いたいけど使いたくない……！！ いったい今Fluxフレームワークって幾つ生き残ってるの……戦争は終わったの？ っていうか最近新フレームワークの噂聞かないけど、まだFluxって流行ってるの？ 今日はその辺をまとめてみたいと思います。 もくじ 前提知識 Flux以前 2014年5月 Flux登場 〜2015年前半 戦国時代 Fluxxor Fluxible Alt NuclearJS 振り返り 2015/5月 Reduxの登場 前半まとめ 前提知識 Fluxってなに？という方はこちらの資料をみると良いでしょう。 非常に丁寧にまとめられています。 speakerdeck.com なお、以下ではアーキテク
Reactを用いたアプリケーションアーキテクチャ：Fluxを再考する | POSTD
他のフレームワークやライブラリから React に乗り換える人たちは、「ReactはUIのレンダリングに関する問題しか解決しておらず、状態管理とアプリケーションアーキテクチャの選択は開発者に委ねられているのだから、どうやってアプリケーションの状態を管理したらいいのか？」 と疑問に思う傾向があります。FacebookはReactのレンダリングモデルに適している、 Flux と呼ばれるアーキテクチャを勧めています。 この記事では、UIレイヤとしてReactを用いてJavaScriptのアプリケーションの状態を管理する方法を探り、 Om のような ClojureScript ライブラリのアイデアを用いてFacebookのFluxの抽象的なフレームワークを作り変えてみたいと思います。 Fluxの核となる考えは、 データは一方通行で流れるべき というものです。これによってアプリケーションの論証が簡単
さらに多くのことが変化する – Fluxは新しい”WndProc”である | POSTD
たまたま今まで知らなかったという方のために言いますと、ReactはWebプログラミングにおける最先端の新技術です。そのアイデアはシンプルです。それは、Reactの各コンポーネントは、JavaScriptにおいて、ビューを冪等（べきとう）に描画します。ビューは、コンポーネントが内部に保持している少量のステートのみに基づいてレンダリングされます。同じステートにすれば、その状態におけるコンポーネントは常に同じようにレンダリングされます。これは、データが変われば、Reactは その変更のみを ブラウザのDOMに適用できるということでもあり、ページ全体の再レンダリングを省略できます。実際、何かを変更するかどうかという決定は 全て 、コンポーネントの内部状態に完全に左右されます。それが、なぜReactが非常に早いのかという根本的な理由です。 しかし実際のところ、React自体には、変更をどのように 伝
Angular — building Apps using Flux
Kris TemmermanFlux is an architecture made famous by Facebook and React. It is based on known design patterns like the Observer and the Command Query Responsibility Segregation (CQRS), so it provides a solid base to create complex applications. In this article we are going to use a basic shopping cart application to showcase Flux. Use the links below to hack the final solution: Demo | Source Follo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SEDA - Homepage
Fluxアーキテクチャの覚え書きを書いた - saneyuki_s log
GitHub - redux-utilities/flux-standard-action: A human-friendly standard for Flux action objects.
Facebook の決断：MVCはスケールしない。ならば Flux だ。
