Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと
まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
FluxとDDDの統合方法 - かとじゅんの技術日誌
おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i
WebエンジニアがReact Nativeでアプリをリリースしてみた
Coiney窓口をリリースしました。Coiney（スマートフォンやタブレットを使ったクレジットカード決済サービス）のサポートに特化したアプリです。 盛り過ぎ注意数年前のアプリケーション開発は、アプリのインストールというハードルによって、ブラウザで完結するWebアプリケーションが主流でした。しかし、最近はユーザーの学習によってアプリのインストールのハードルが下がりました。そこで出てきた考え方がアンバンドリングです。 １アプリに対して１機能。盛り込まないことによって、ユーザーに対して迷いのないUI、開発者に対して開発／運用のシンプルさを提供することができます。Facebookがメッセンジャーアプリを本体から切り離したのもその一例だと考えられます。 私たちはアンバンドリングの考え方に則り、既存のアプリを決済部分にフォーカスしました。申し込み／ユーザーサポートにフォーカスしたアプリがCoiney窓
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
Electron, React, Fluxを使ってアプリケーションを作った - Qiita
Electron勉強会 #1で発表した、Electron, React, Fluxを使ってアプリケーションを作る話について解説する。 位置づけとしてはElectronのremoteでプロセス間通信を高レベルに扱うの続きにあたる。 概要 ElectronアプリケーションにFluxアーキテクチャを利用することは、レンダラプロセスの内部で処理が解決する場合において有効である。レンダラプロセス間で状態を共有したい場合、メインプロセスとレンダラプロセスでFluxアーキテクチャを二重化することでこの課題を解決できる。 しかしユーザ操作によってレンダラプロセスが終了された場合、Fluxアーキテクチャそのままでは正しくActionを通知することができない。複数のレンダラプロセスを立ち上げることに適応できるよう、Fluxアーキテクチャに変更を加えなければならなかった。 成果物 MisumiRize/GHCa
FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]
ピクシブ株式会社 Advent Calendar 2015、19日目の記事です。 qiita.com こんにちは、愛らしくも憎らしいJavaScriptを書いてご飯を食べている @geta6 です。業務では pixiv Sketch というサービスの開発や運営に携わっています。 pixiv Sketchでは、node.jsとReact/Fluxibleを使用してサーバーとクライアントを同じコードベースで動作させるIsomorphicな構成を採用しています。 このプロジェクトでコードレビューをしていて、チームメンバーがつまずきやすいと感じたのが『FluxにおけるActionとStoreのどちらに何を実装するべきか』という点でした。 そこで、本日は『ActionとStoreとの適切な責務の持たせ方』について話をしたいと思います。 ReactとFluxについておさらい 今年の4月にこんなスライド
![FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0da913cbf8a21a9b94e0b3b6024eb39bf6869768/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fg%2Fgeta6%2F20151218%2F20151218175826.png)
さらに多くのことが変化する – Fluxは新しい”WndProc”である | POSTD
たまたま今まで知らなかったという方のために言いますと、ReactはWebプログラミングにおける最先端の新技術です。そのアイデアはシンプルです。それは、Reactの各コンポーネントは、JavaScriptにおいて、ビューを冪等（べきとう）に描画します。ビューは、コンポーネントが内部に保持している少量のステートのみに基づいてレンダリングされます。同じステートにすれば、その状態におけるコンポーネントは常に同じようにレンダリングされます。これは、データが変われば、Reactは その変更のみを ブラウザのDOMに適用できるということでもあり、ページ全体の再レンダリングを省略できます。実際、何かを変更するかどうかという決定は 全て 、コンポーネントの内部状態に完全に左右されます。それが、なぜReactが非常に早いのかという根本的な理由です。 しかし実際のところ、React自体には、変更をどのように 伝
ReduxでlocalStorageにstateのスナップショットを保存する - Qiita
localStorageにstateのスナップショットを保存するRedux middlewareを作りました。 インストール import {createStore, applyMiddleware} from "redux"; import saveState from "redux-save-state/localStorage"; // combineReducersされたreducer達 import reducers from "./reducers"; // 保存先キー名 const key = "app-state-snapshot"; const store = applyMiddleware(saveState(key))(createStore)(reducers); // React Componentでdispatchが呼ばれるたびに保存 store.dispatc
cybozu.com 稼働状況 を React/Redux で作り直した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Sales Systemチームの金子です。Sales Systemチームでは、cybozu.com Store や、販売管理システム等の開発をしています。 このエントリでは、cybozu.com 稼働状況のフロントエンドをReact/Reduxで作り直した話を書いていきます。「React/ReduxでWebアプリケーションを作ってみようと考えている人」を対象としています。 TOC 「cybozu.com 稼働状況」とは? 作り直した背景 技術概要 React/Fluxについて React/Redux Routing Resources Async Multilingualization/Localization ES6 Utility Lint Testing 取り組んでみた感想 まとめ 「cybozu.com 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス
React+Flux can do in just 137 lines what jQuery can do in 10 | Swizec Teller
Senior Mindset BookGet promoted, earn a bigger salary, work for top companies Start with a free chapterGet a free chapter from the Senior Engineer Mindset book and a sample audiobook chapter, followed by a Senior Mindset 101 email course. React+Flux can do in just 137 lines what jQuery can do in 10 XKCD Automation I waste almost 15 minutes a week on an annoying little task. Every email I send to a
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と今回は考える もっと実装的
Swiftで型安全なFluxアーキテクチャを実現する - Qiita
iOSアプリ開発でもFluxしたい WebアプリケーションのフロントエンドをReact + Fluxな構成で開発すると、若干コードが増えて面倒にはなりつつも、 ビューの状態やデータの流れが明示的になってとてもわかりやすいなと改めて感じてます。 iOSアプリでもこういうことがやりたいのですが、基本的にFluxは考え方に過ぎないので必要な実装は自分でやらないといけません。 なので作ってみました。 https://github.com/yonekawa/SwiftFlux 使い方 基本的には必要なAction protocolとStore protocolを実装したクラスを作り、DispatcherとEventEmitterを使ってView - Action - Store - View の単方向データフローを作るだけです。詳しくはREADMEをご覧ください。 //: Step 1: Actio
Flux inside Web Workers
Before we can learn Flux inside Web Workers, we need to understand DOM-Less JavaScript. Lets start with some Problems. Problem 1 : Unable to Scale JavaScript Codebase If you have written approx 50-100K lines of code at frontend then you can easily understand that “Ease of Adding a new Module/Modify Existing Module” decreases as our codebase size increases. Sometimes, We apply lots of hack or quick
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redux 基礎：Middleware 編 - Qiita
Fluxで複雑な状態の変化を予測可能にするiOSアプリ開発
Flux: Getting Past the Learning Curve
Asynchronous Flux — Getting Data from an API
GitHub - staltz/flux-challenge: A frontend challenge to test UI architectures and solutions
FluxでCUIアプリ
