ReactJS + facebook/flux でカウンターのサンプル - Qiita
{ "devDependencies": { "babelify": "^6.1.2", "browserify": "^10.2.4", "watchify": "^3.2.3" }, "scripts": { "watch": "watchify -t babelify src/app.jsx -o dest/app.js -v" }, "dependencies": { "flux": "^2.0.3", "keymirror": "^0.1.1", "object-assign": "^3.0.0", "react": "^0.13.3" } } var EventEmitter = require('events').EventEmitter; var React = require('react'); var assign = require('object-assign');
React/dekuコンポーネントとthisのパターン
componentWillMount() { store.on("change", this.onChange.bind(this)); } componentWillUnmount() { store.off("change", this.onChange.bind(this)); } だとイベントが解除できないという問題が起こります。 そのため、事前にbind済みのハンドラを持っておく必要が出てきたりします。 サンプル この記事では上記のような、ボタンでカウントアップするだけのものを React - thisを普通にbindする手法 React - azu/idempotent-bindを使ってbindする手法 deku を使って書く の3つ書いてみます。 ソースコードはこちら azu/component-event-binding React - thisを普通にbindする手法 こ
Fluxアーキテクチャのメモ
最近は Flux + React を使っています。Secure Code Tipsでも部分的に採用しました。今回は Fluxアーキテクチャについて、現時点で自分の理解している内容をメモしておきます。 Fluxの概念図Flux: Actions and the Dispatcher | React というページでは以下の図が使用されています。よく見る図です。 現在の自分の認識を基にしてこの図をもう少し詳しくすると、以下になります（だいたいこんな感じという程度の図です）。 * Web API と Web API Utils は省略しています。 Web API と Web API UtilsAction Creators が保持しているメソッド内からAjaxリクエスト処理等を行う場合、その部分をこちらに切り出して使用します。Action Creators と ActionsAction何かしら新
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。Read less
スケーラブルなプログラミングのために何が必要か - ジンジャー研究室
Fluxに関する独自解釈と妄想を、何かの翻訳っぽく書いた。 スケールするアーキテクチャ フレームワークを作る時、我々は「簡単に記述する」ことを第一に考えがちだ。 そして、簡単にするための仕組みはウケる。 逆に記述量が増えるとウケない。 しかし例外があって、多く書くことによるメリットが受け入れられたときは別だ。 例えば、Backbone.jsを使うと記述量が増える事は誰もが認めるところだが、MVCの実現というメリットのために広く受け入れられた。 要するにトレードオフなのだ。 ここのところFluxアーキテクチャが注目を浴びているが、書いてみると記述量は相当増える。 そもそも登場人物が多すぎる。 Action、Dispatcher、Store、View、それからそれらの間に挟まって仕事をする者達。 一体彼らは何をしたいのか。 最近になって分かってきた。 これはアプリケーションそのものを抽象化した
React と Flux で Tumblr を再構築する話。 - Qiita
React と Flux を用いてアプリケーションを構築します。 これを採用した点は、 はじめに書いた通り、 React を選択しながら アプリケーションを書くには Flux のフローを導入するのが今のところよいとされると思ったからです。 React は View を提供してくれますが、それだけだと データのやりとり等を含めた、アプリケーションは構築しにくいです。 といっても、今回私の作成した例では、React 単体でも構築可能です。 Flux における アプリケーションフロー Flux では有名な図。一方通行なデータフローが素敵ってよく言われる。 React が提供してくれるのは 図の React Views Flux が提供してくれるのは 図の Dispacher そして、他の部分は自分で作成していくことになります。 フォルダ構成 先に述べた通り、Flux はデータのやりとりを示してく
React.js + Fluxの参考リンクまとめ - Qiita
React.js + fluxの勉強するのに参考になったリンクのまとめ。 公式 React Flux 解説 日本語で大変わかりやすい良記事。ひと通り目を通せば概要をつかめます。 一人React.js Advent Calendar 2014 ライブラリ 画面遷移 画面遷移はreact-routerがデファクトらしいので。 React初心者のためのreact-routerの使い方 isomorphic yahooのライブラリfluxibleを使ったisomorphicのサンプル yahoo/flux-examples 通信 JQueryは使いたくなかったので通信はこちらを。 JavaScript - jQuery.ajaxの代わりにSuperAgentを使う ツールやサンプル facebookがまとめてるツールとかサンプルコードまとめ Complementary Tools · facebo
Good bye Flux, welcome Bacon/Rx?の翻訳 - Qiita
Good bye Flux, welcome Bacon/Rx?の翻訳です。FRPを使う場合の一つの実装の仕方としてアリではないかと思います。 こういうのを見るとFRPのバズワードが一段落すると、やがて、この記事に出てくるビジネスコンポーネントのディスパッチャーの部分がプログラミング言語に隠蔽されるのでは、そんな予感すらします。オブジェクト指向とFRPの合流点が見えかけているというか、そんなイメージでしょうか。 さようなら、Flux。ようこそ、Bacon/Rx FacebookはクライアントサイドのWebアプリケーション開発のためにFluxを約1年前に発表しました。以来、Webの開発シーンの中でもっともホットな技術のひとつになっています。 Fluxのタスクはビジネスロジックをユーザーインターフェースのロジックからディスパッチャーとストア、アクションを使うことで分離することです。中核となるア
Flux inspired reactive data flow using React and Bacon.js - Reaktor
A few years ago I got introduced to reactive programming and Bacon.js, a FRP (functional reactive programming) library for Javascript. I got fond of it very fast, as it allowed you to create highly reactive UI’s with ease. While it works great in propagating changes to your views, it was still rather cumbersome to attach all the data flows to individual DOM nodes and properties. React solved that
Good bye Flux, welcome Bacon/Rx?
Facebook introduced Flux about a year ago for client-side web application building and since then it has become one of the hottest tech in the web development scene. The task of Flux is to isolate business logic from the user interface logic by using dispatcher, stores and actions. The core idea is the unidirectional data flow which means that actions are propagated through the entire system in re
React + Ratchet のサンプルアプリケーションを Flux + ES6(Babel) で作り直す - Qiita
Reactを学ぶ上で、Sample Mobile Application with React and Cordova の内容が非常に勉強になった。このサンプルアプリケーションを、FluxとES6(Babel)で書きなおしてみた。 構築環境 OS：Windows8.1 node：v0.12.2（nvmw利用） react：0.13.2 flux：2.0.3 各種リンク GitHub上のソースコード：https://github.com/azk0305/mobile_employee_directory デモサイト：http://react.mnj-tokorozawa.jp/mb_emp_dir/ 補足 Monacaでも動作できたことを確認。 Register as a new user and use Qiita more conveniently You get articles th
Electron, React, Fluxを使ってアプリケーションを作った - Qiita
Electron勉強会 #1で発表した、Electron, React, Fluxを使ってアプリケーションを作る話について解説する。 位置づけとしてはElectronのremoteでプロセス間通信を高レベルに扱うの続きにあたる。 概要 ElectronアプリケーションにFluxアーキテクチャを利用することは、レンダラプロセスの内部で処理が解決する場合において有効である。レンダラプロセス間で状態を共有したい場合、メインプロセスとレンダラプロセスでFluxアーキテクチャを二重化することでこの課題を解決できる。 しかしユーザ操作によってレンダラプロセスが終了された場合、Fluxアーキテクチャそのままでは正しくActionを通知することができない。複数のレンダラプロセスを立ち上げることに適応できるよう、Fluxアーキテクチャに変更を加えなければならなかった。 成果物 MisumiRize/GHCa
JSX と TypeScript の混合 Flux または悪魔合体
JSX + TypeScript の悪魔合体 ギョーム的に気持ちになったので JSX + TypeScript をはじめました。 導入にあたってチーム内への説明を兼ねたブログ。AltJSに対して ES でいいじゃん派ですが、自分の型需要に対して 現状の Flowtype が辛みしかないのでやむをえず。 動機 紆余曲折あって結局 React を使うことにした React Component には JSX with Babel を使いたい（手書きは無理だ） UI 以外のロジックを持ったモジュールは型の恩恵に預かりたい Flowtype つらい TypeScript かー UI 周りは JSX で、その他の堅いロジックは TypeScript で書けばいいのでは？ 共存だ！！ メリットがあるのかも不明瞭ですが、分からないからこそ試してみようという感じです。JSX と TypeScript の境界
フレームワーク対決！Angular VS React仮想パネルディスカッション
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
FacebookのFluxアーキテクチャの始め方 Part 2 | POSTD
前編はこちら： 【翻訳】FacebookのFluxアーキテクチャの始め方(前編) 血液（イベント）を流す 次は、イベントがアプリの周りに流れるようにします。そうすれば、UserList上の様々なユーザをクリックしてチャットを切り替えることができます。 最初のアクション アクションはどこからでも生じる可能性があります。私たちは、アクションは何かに影響を与えるということと、自分たちがディスパッチャを通してアクションをストアに流し込む必要があるということさえ分かっていればいいのです。ユーザがあるユーザをクリックしたらアクションを作成し、イベントを送り出します。 public/src/js内にactionsと呼ばれるフォルダがあります。messages.jsというファイルを作成しましょう。 var Dispatcher = require('../dispatchers/app'); var me
橋本商会 » React+Fluxxor+socket.ioでfluxなチャットを作った
fluxxorとsocket.ioを使ってチャットを作った。大変ミニマムな感じの実装を心がけてて、今後何かWebアプリを作る時はこれを少し組み替えて作るぞというのを意識してる。ようするに低機能最低限でしょぼい。サーバー側はexpressとmongodb。 https://github.com/shokai/node-flux-boilerplate herokuでも動く https://node-flux-boilerplate.herokuapp.com/ クライアントはこんな実装 Fluxアーキテクチャ Reactはなんとなくわかってfluxをやるか、と思ったらflux npmの中がdispatcherしかなかった。 flux.DispatcherのwaitForの実装 まずこのへんを読んでフムフムなるほど（わかったようなわからないような）となる。 Flux | Application
React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ
ちょっと前に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
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と今回は考える もっと実装的
Using RxJS for data flow instead of Flux with React - Qiita
Update: I posted this as a Gist if the Qiita stylesheet bothers you: https://gist.github.com/justinwoo/08f9f8fcdcf865025f18 For almost a year now, I've been using this "flux" architecture to organize my React applications and to work on other people's projects, and its popularity has grown quite a lot, to the point where it shows up on job listings for React and a lot of people get confused about
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React.js meetup #1 - 資料一覧 - connpass
