FluxとDDDの統合方法 - かとじゅんの技術日誌
おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i
React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜
React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか
複雑なJavaScriptアプリケーションを考えながら作る話
autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
Using React (-Native) with Redux and Redux-Saga. A new proposal?
Data Flow with Redux and Redux-Saga (proposal)I really love the principles I learned after switching from AngularJs to React and its Flux architecture. At the moment I’m working on a real world application for another company. After my first React-Native App with Redux, I decided to add Redux-Saga to the mix. Complex transactions and side effects should be readable and easy to maintain too. This b
『実践 Redux Saga』 – React, FLUX, Redux, Redux Saga – // 第21回社内勉強会 #sa_study
こんにちは。エンジニアの吉田です。 2017年1月27日（金）に開催された社内勉強会#21で、『実践 Redux Saga』というお話をしたのでブログにもまとめたいと思います。 スライドはこちら。（Slideshareにアップするとフォントが欠落してイマイチな見た目になってまう…） 要約 プロダクションの案件でRedux Sagaを導入したのでそのお話 Redux Sagaの話の前に、jQuery、React、FLUX、Redux をおさらい Redux Sagaを使うと非同期処理を取り扱えるが、その反面、データフローが複雑になる System&User Action と Reducer Action を分けることで複雑性を軽減した Action の命名規則、React, Redux, Redux Saga の責務を明確にするガイドラインをつくった みなさまがより快適なフロントエンドライフ
Reduxの正しい解釈の話
2016年の課題は状態遷移の管理だったと思う。 そのアンサーとして、 Fluxのような実装におけるStore相当にアプリケーションの状態をほぼすべて管理させるReactのようなVirtual DOMを搭載したビューの実装を透過的なユーザーインターフェースとして扱うこの2つの組み合わせにより、アプリケーションの状態と描画される画面が (ほぼ) 参照透過的になる。というのがFluxとReact以降のパラダイムだと思う (理論として) 。 このパラダイムなら、エラーの発生時にアプリケーションの状態を表現するJSONをエラー収集サービスに送るようにして、簡単にバグを再現したりできるし、状態の遷移をテストしていくことで、クラッシュするようなバグのうち大半を検出できる。 Fluxの問題そこで問題が出るのが、Action(Creator) とReducer (Store#reduce())の2要素間のル
arco Index
arco 0.1.3 A React+Redux framework with standards, conventions, and far less boilerplate Documentation Installation $ npm i arco --save Summary arco is a framework designed to streamline a lot of the architectural configuration of a React application by providing several web-standard packages built-in, as well as an API that is built to keep boilerplate minimal. The following packages are all incl
小さいReactアプリケーションのためのライブラリ書いた - Qiita
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita これ見て最近は大体自分も同じような感じのことをしているので共通化できる最小限のコードをライブラリにしてみた。 元記事でも言ってるようにやることはとても少ないのでライブラリ使わないでもいいんだけどそのへんは好み。 Usage まず普通のステートレスなReactコンポーネントを作る。dispatchというpropsを受け取ってそれを通してイベントを発火するというのが唯一の規約。 import React from 'react'; // Stateless component export default class Counter extends React.Component { render() { return ( <div> <div>{this.props.count}</div>
Redux の Reducer で非同期の状態変更を扱えるように拡張した「Rxdux」について - Qiita
Redux の不満 Fluxの実装であるReduxの不満点のうちの１つとして、Reducerの扱いがある。もちろんReducerの考え方とそれによるStoreの状態管理、およびcombineReducersによる状態の分割統治についてはまあよいのだけれども、Reducerには同期的な状態変化しか扱えない（扱わない）という制約がある。得てして実際のアプリではモックで同期処理で行っていたことでがいつの間にか非同期の処理となったりすることもあり、その場合Reducerで上手くやってたことでもAction Creatorの方に移動しなきゃいけなくなったりする。 Action Creatorsでは現在のState情報を見るのにはgetState()といきなりStateツリー全体にアクセスすることになる。Reducerではうまくできていた分割統治がここでは厳しくなる。なんとかMiddlewareで工夫
漫画で説明する Flux
Lin Clark 氏が “A cartoon guide to Flux” というタイトルでとてもわかりやすく Flux についての記事を投稿していました。この文章のなかでも書かれていますが Flux はとてもホットな話題です。しかし、まだまだ十分に理解されていない技術なので、著者の Lin Clark 氏に許可を頂いて翻訳させていただきました。何か間違いや分かりにくいところ、より良くするための助言などありましたら気軽に@sota0805 までコメントお願いします。 （以下、2015年9月29日に Lin Clark 氏によって書かれた “A cartoon guide to Flux” の翻訳です。） 漫画で説明する FluxFlux は現在のウェブ開発で最もよく理解されていない話題の１つです。このガイドでは誰もが理解できる方法で説明しようとしています。 問題はじめに Flux が解決
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
Cycle.js / RxJS 入門してサンプラー作ってみた - マルシテイア
youtu.be http://gmork.in/cyro/ サンプラー。 キーボードを押したら音が増える。 [A-Z] : 音を入力 Shift + [A-Z] : そのキーの音をすべて削除 / : 設定パネルの表示 / 非表示 一応ソース fand/cyro · GitHub Cycle.js / RxJS の感想 Cycle.jsとは cycle.js.org Cycle.js は Unidirectional dataflow / Model-View-Intent を実現するWebフレームワーク。 RxJS 及び virtual-dom を使って書かれており、開発者もこれらを利用することになる。 作者の André Staltz 氏は Rx オジサンで、Rx に関するサイトを幾つか作ってる。 Flux や Elm, Famous のアーキテクチャを解説した記事は少しバズったので、
DDD + Flux?
READY FOR THE BATTLE? -Introduction to Live Coding-
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と今回は考える もっと実装的
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introducing Microcosm: Our Data Layer For React | Viget
React + FLUX + Redux + Redux Saga のお話
GitHub - xgrommx/awesome-redux: Awesome list of Redux examples and middlewares
Introduction to Redux