強い言い方だけど、Flux Architecture の失敗として Store に Store という名前をつけたことがあると思っている。 あるいは、黎明期の Flux は Store という名前で良かったんだけど、 #Redux はその名前を引き継がないほうが良かったんじゃないかと思っている。
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
前説 丸山です。Re.Ra.Ku. アドベントカレンダー13日目の記事です。前日はiOSアプリのUIをコードで書いてみる話でした。明日はおそらくScalaの話になると思います。 さて、以前も話題にしましたが、builderscon2016が先日開催されました。チケットは3hでSOLD OUT。プラチナチケットと化した参加権ですが、発表する側ならば実質無料で参加し放題！これはいっそ申し訳ないレベルでは！？ というわけで、せっかく発表したのでその内容をなるべく多くの手段で共有したい。そう思い、今回も実況中継シリーズを弊社テックブログで行います。実況中継シリーズというのは、プレゼンをブログで再現するアレです。なお、実際のプレゼンは動画になってYoutubeにアップロードされております。builderscon公式サイトのセッション詳細ページからもご覧いただけますので、よろしければそちらも合わせてご
この記事は 仮想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 なお、以下ではアーキテク
この記事はVirtual DOMアドベントカレンダーの5日目の記事です。 Virtual DOMといえばReact。 ですが、ReactはMVCで言うViewの部分だけを担当するのであって、MVCフレームワーク的なものではありません。 なので、Model等、他の部分は自前でどうにかする必要があります。 そこで、facebookの中の人は、Reactを中心にしたアプリケーション構築パターンとしてFluxってのを提唱してます。 https://facebook.github.io/flux/ Fluxってどんな Flux、ざっくり言うと、 データは1方向に流れる イベントをActionとして定義 ロジック、データはStoreに全部入れる というアーキテクチャ。 図で言うと、MVCでは ↑みたいになるとM,C間の処理の流れムズかったのが、 Fluxだと という風にデータの流れが整理できて嬉しいで
想定しているシチュエーション 非SPA環境で個別にマウントされるコンポーネントがそれぞれで小さくFluxするような環境。 SPAガッツリ組むのでないなら、Fluxフレームワークは不要だと思っていて、とは言えオレオレ構成も行き過ぎると害になる。 その辺のバランスをとって、次のような構成がいいのではないか、と考えてみた。 考え方 コンテナがEventEmitterを1つ保持する コンテナはEventEmitterの各種イベントをListenする コンテナはpropsとstateを区別して扱い、stateを更新する コンテナはコンポーネントを一つだけ描画する コンポーネントはpropsとして渡されたEventEmitterを発火させる コンポーネントはEventEmitterをListenしない コンポーネントはpropsのみ扱う コード // src/components/header.js
ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。 参考にしたコードはfacebook/fluxのexamplesのコードになります。 flux/examples/flux-todomvc at master · facebook/flux · GitHub https://github.com/facebook/flux/tree/master/examples/flux-chat 作ったコードはここに置いていて、 https://github.com/sskyu/react-flux-todomvc-example/tree
READY FOR THE BATTLE? -Introduction to Live Coding-
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ページを開く
