Flux for components
The Flux pattern, without the globals Flux is a software pattern, not a concrete artifact like a library or framework. This has encouraged developers to create various implementations of the pattern. I’ve explained an approach to the Flux pattern often enough that I felt it was time to put it into a blog. The approach creates instances for the Flux actors instead of using singletons. Context I’ve
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)
React / Flux を実案件で使ってみた
自己紹介 Name : Takuto Wada github : twada twitter : t_wada hatena : t-wada TDD とライオンの人 power-assert の人 React / Flux を知ったきっかけ mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う 日本語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った Rendr の AirBnb が React を使い始めたことを知り、これは決定的だと思った React をどう勉強したか 公式ドキュメントとチュートリアルが充実している まず Tutorial をそのまま写経 次に browserify + reactify で Tutorial をもう一周やってみる (showdownはbrowserify 対応してい
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 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス
What the Flux? (On Flux, DDD, and CQRS)
Flux is an application architecture designed by Facebook for their JavaScript applications. It was first introduced by Facebook in May 2014, and it has since garnered much interest in the JavaScript community. There are several implementations of Flux. Frameworks like Fluxxor keep to the original Facebook Flux pattern, but reduces the amount of boilerplate code. While other frameworks like Reflux
はてなブックマーク検索を作りながらFlux Utilsについて学ぶ
facebook/flux 2.1.0からFlux UtilsというStoreなどの実装が含まれるようになりました。 今回Flux Utilsを使って、指定したアカウントのはてなブックマークを検索するウェブアプリを書いてみました。 azu/hatebu-mydata-search azu.github.io/hatebu-mydata-search/ mydataのAPIがCORS対応してないのでJSONProxyを挟んでます。(なのでブックマークデータが多いアカウント名は避けたほうが…) これを作ってみてFlux Utilsについて思ったことを書いていきます。 Flux Utilsの紹介ページに、Flux Utilsの解説が書かれています。 簡単にまとめると以下の4つのクラスがFlux Utilsとして提供されています。 Store ベースとなるクラス ReduceStore Store
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
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
Navigating the React.JS Ecosystem | Toptal®
The speed of innovation in JavaScript Land is so high, that some people even think it is counter-productive. A library can go from early-adopter toy, to state-of-art, to obsolescence in the course of a few months. Being able to identify a tool that is going to stay relevant for at least another year is becoming an art itself. When React.js was released two years ago, I was just learning Angular, a
yahoo/fluxible による SPA + Server Rendering の概観
Single Page Application + Server Rendering yahoo/fluxible を使って、Single Page Application と Server Rendering の良いとこ取りのアーキテクチャを目指す。ある程度の複雑性と引き換えに、双方の利点で双方の欠点を打ち消し合うことができるため、全体的には良好なユーザーインタラクションを期待できる構成。 なぜ Single Page Application なのか 画面遷移時するたびにJavaScript/CSS のパースと評価をしなくて良くなる 画面遷移時のトランジションを柔軟に適用できる 画面遷移をまたがった実装が可能になる（あくまで可能になるだけ） なぜ Server Rendering するのか 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰
SLOBSERVER - L'actualité de Second Life
There are several aspects to consider when releasing a product or service into the market. With so much competition in all sectors, it might be hard for your product to stand out if you don't start by marketing it properly. Marketing, as well as how a user reacts to your product, is something that you should think of from the inception of your product to its launch. The Time to Market plays a sign
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
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何かしら新
スケーラブルなプログラミングのために何が必要か - ジンジャー研究室
Fluxに関する独自解釈と妄想を、何かの翻訳っぽく書いた。 スケールするアーキテクチャ フレームワークを作る時、我々は「簡単に記述する」ことを第一に考えがちだ。 そして、簡単にするための仕組みはウケる。 逆に記述量が増えるとウケない。 しかし例外があって、多く書くことによるメリットが受け入れられたときは別だ。 例えば、Backbone.jsを使うと記述量が増える事は誰もが認めるところだが、MVCの実現というメリットのために広く受け入れられた。 要するにトレードオフなのだ。 ここのところFluxアーキテクチャが注目を浴びているが、書いてみると記述量は相当増える。 そもそも登場人物が多すぎる。 Action、Dispatcher、Store、View、それからそれらの間に挟まって仕事をする者達。 一体彼らは何をしたいのか。 最近になって分かってきた。 これはアプリケーションそのものを抽象化した
社内勉強会でReactとFluxについて喋った - pixiv inside [archive]
開発が大好きな@geta6です。 React meetupのことを完全に見逃していて悔しかったので、外部公開の社内勉強会でReactとFluxについての発表をしました。 経緯 現在ピクシブではReactでFluxな感じの構成で新サービスを開発中です。これまで社のプロダクトとしてReactを採用したことは無く、この新サービスが初の採用となる予定です。社内の空気感は「FluxもReactもよく聞くし何となくわかってるけど、詳しくは知らない」という感じでした。 そこで、自分の理解度の確認と、一緒に開発しているチームの人や社内外の開発現場の皆さんに大体の感覚を掴んでもらえるよう「ReactとFluxって一体全体なんじゃらほい」というテーマで、ざっくりと大枠を捉える発表をしました。 資料 speakerdeck.com ReactとFluxのこと // Speaker Deck スライドには入ってい
![社内勉強会でReactとFluxについて喋った - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a8d0ed6fcb034b99b3f6481c12f69296fc5deef2/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F11696248318756278971%2F8454420450092816254%2F1430122329)
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と今回は考える もっと実装的
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electron, Flux + React
404: Not found
ReactとFluxのこと // Speaker Deck
