SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
Fluxフレームワーク戦争の現状確認（後編） - マルシテイア
この記事は仮想DOM/Flux Advent Calendar 2015の25日目……に入れようと思ってたけどもう埋まってた……。 オマケということで頼む！！！！！ 24日目は JavaScript - 実践：MagJS で TodoMVC - Qiita でした。 メリークリスマス！！！！！！！！！！ こんにちは id:amagitakayosi です。 みなさん今月も Flux 書いてますか？ 僕はオレオレ実装をIsomorphic対応したけど昨日Revertしたところです！！！！！ウオー！！！ 今日は↓12/2の記事↓の続きを書いていきます！ amagitakayosi.hatenablog.com もくじ 前回のあらすじ flux-utils Container vs View Cycle.js flux-challenge Rx系 thisless-react, Yolk DDO
HaxeとReact - Qiita
HaxeからJavaScriptを出力するというのは、静的型付き言語が好きだとか、JavaScriptはそれほど好きではないがWebコンテンツは作りたいという人にはとても良い選択肢だと思います。 とはいえ、HaxeはTypeScriptほどJavaScriptに近くないので、HaxeとJavaScriptライブラリの相性というのはとても悩ましい問題です。jQueryを使うとHaxeを使ううまみが減るとか、変数名に"$"が使えないのでAngularJSが使えないだとか、そういったことです。 悩んだ結果、Dynamic型やuntypedキーワードを使って動的言語的な書き方をしてライブラリを使うか、もうJS製のライブラリを使うのをあきらめてgetElementByIdべた書きで頑張るとか、そういった選択を迫られてきました。 では今、流行りのReactの場合はどうでしょう？ 実際につかってみた感想
二槽式とはなにか
この記事は仮想DOM/Flux Advent Calendar 2015 - Qiita13日目です。 二槽式とは「Viewとロジックを切り離し、それぞれが独立して成立することを目指したアーキテクチャ」をさして呼んでいます。 （これは私が勝手に名付けてるだけなので厳密な定義はないです） このView部分を「フロントエンドフロントエンド」、ロジック部分を「フロントエンドバックエンド」と呼び、合わせて「二槽式」と呼んでいます。 もう少し具体的にいうと、「Fluxのアクション部分を切り離して、View -> postMessage(JSON) -> onmessage(()=>{}) -> Dispatcherという形式にしたもの」です。 （ここではpostMessageを使っていますが、ある程度独立性が保てるのであれば普通のfunction callでも問題ないと考えています） なにを解決した
redux への 不満を解消する為に, flumptというFlux実装を作った - Qiita
名前はダークソウルのフラムト(frampt)から。FLux Minimum なんたらかんたら。 なんかTwitterで色々言ってたら naoyaさんにまとめられたので、ここに僕の考えを詳しく書いておく。 mizchi の Redux 考 - Togetterまとめ やりたかったこと 基本的なアイデアは、stateをpushする方式(setStateみたいな)だと非同期間で参照したときの値がズレて非同期の終わる順番次第では状態の遷移ステップが壊れてしまう可能性があるんだけど、前のstateをとって次のstateを返す非同期をキューに並べて順に実行することで、トランザクションみたいなものを保証することができるだろう、というもの。 軽量(pubsubインターフェースはEventEmitterそのまま) 複数の状態更新関数の待ち合わせ reduxで感じた不満の解消 TypeScriptフレンドリー
reduxをプロジェクトで使ってみた感想 - Qiita
書こうと思った気持ち reduxをとあるプロジェクトで使ってみたのだが、redux自体の存在を知った今年の夏頃はv0.4.0とかだったのに、気がついたらv3にまで上がってくるくらいの発展途上な感じのライブラリでほとんどノウハウがなく死にそうな感じだったので、使ってみた知見を公開しようと思った。 選んだ理由 reactを使ってUIを作った話をこちらに書いた。react単体はJust UIなので、アプリのフレームワークとしてfacebookが高らかに提唱しているfluxアーキテクチャを使ってみようと思った。 flux自体はデータの流れを一方向に限定しよう、というアーキテクチャであり、何をするにもまずactionがトリガーとなり、そこからアプリの状態が変更され、UIはその状態に従って描画するだけである、という思想のアーキテクチャである。 自分の過去の経験から、UI実装では状態遷移周りではまること
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 なお、以下ではアーキテク
仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita
なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使ってみて、そのノウハウを公開したり、今年前半は色々とアウトプットをしていましたが、後半はSpecificなアプリケーションドメインを記述することが多くて、あまりアウトプットする内容がなくなってました。 取り敢えずは、新規のプロダクトなら採用してもよい、という雰囲
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - zalmoxisus/remotedev: Remote debugging for any flux architecture.
GitHub - vuejs/vuex: 🗃️ Centralized State Management for Vue.js.
GitHub - paularmstrong/normalizr: Normalizes nested JSON according to a schema
GitHub - AlexGalays/fluxx: Terse application state management
GitHub - facebookarchive/flux: Application Architecture for Building User Interfaces