Redux 基礎：Middleware 編 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
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の組み合わせ
さらに多くのことが変化する – Fluxは新しい”WndProc”である | POSTD
たまたま今まで知らなかったという方のために言いますと、ReactはWebプログラミングにおける最先端の新技術です。そのアイデアはシンプルです。それは、Reactの各コンポーネントは、JavaScriptにおいて、ビューを冪等（べきとう）に描画します。ビューは、コンポーネントが内部に保持している少量のステートのみに基づいてレンダリングされます。同じステートにすれば、その状態におけるコンポーネントは常に同じようにレンダリングされます。これは、データが変われば、Reactは その変更のみを ブラウザのDOMに適用できるということでもあり、ページ全体の再レンダリングを省略できます。実際、何かを変更するかどうかという決定は 全て 、コンポーネントの内部状態に完全に左右されます。それが、なぜReactが非常に早いのかという根本的な理由です。 しかし実際のところ、React自体には、変更をどのように 伝
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
人気のFluxフレームワークReduxをさわってみた - マルシテイア
fluxフレームワーク、今は Redux が一番アツい様子なので触ってみた。 github.com (追記 2015-10-03 18:15 APIや用語が大幅に変わったので更新した) Redux の経緯 2015-05-30 に公開された "The Evolution of Flux Framework" という記事がある。 medium.com Reduxはその PoC 的な実装だったんだけど、実用的ということでめっちゃ流行っているみたい。 Initial commit も 2015-05-30 だった。 Initial commit · rackt/redux@8bc1465 · GitHub 最近の flux フレームワークだと fluxible と flummox が人気だったけど、 flummoxのページには 4.0 will likely be the last major
React.js を用いた HipChat の再構築 | Atlassian Japan 公式ブログ | アトラシアン株式会社
要約 : 私たちは、React.js と Flux、それに他のいくつかのライブラリを用いて HipChat の Web クライアントを根本的に再構築し、素晴らしい結果を得ました！ 是非試してみませんか？ HipChat がアトラシアンに加わったときのクライアントは、Web、Adobe Air (Windows、OS X、Linux)、iOS、そして Android アプリの 4 つでした。HipChat チームが最初に掲げた目標のひとつが、Air クライアントを OS X、Windows、Linux のネイティブデスクトップクライアントに置き換えることでした。私たちは (その当時は) 小さいチームだったためしばらくはこの仕事で手一杯でした。このように最高のアプリケーションを提供することに集中した影響で、Web クライアントに対しては私たちが行った様々な開発の成果を反映させることができません
React.js 実戦投入への道 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近話題のReact.jsですが、実戦投入に当たっては結構重たい選択を迫られることになります。 ざっくり言えば、テンプレートエンジンを捨ててReactしますか?それともReactあきらめますか?という選択です。 本記事ではReactの基本思想とこうした選択肢が生まれてしまう背景を述べるとともに、後半では「どちらもあきらめない」という(若干シミュレーションRPGあるある感のある)第三の方策について案を提示します。 Reactの基本 最初に、Reactの基本的な仕組みについてまとめておきます。 Reactは公式ドキュメントが非常に充実してい
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 における保守信仰
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する手法 こ
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
社内勉強会で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)
Simple Data Flow in React Apps Using Flux and Backbone: A Tutorial with Examples | Toptal®
React.js is a fantastic library. Sometimes it seems like the best thing since sliced Python. React is only one part of a front-end application stack, however. It doesn’t have much to offer when it comes to managing data and state. Facebook, the makers of React, have offered some guidance there in the form of Flux. Flux is an “Application Architecture” (not a framework) built around one-way data fl
今話題の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
やってみよう Flux + React | コラム | MDMによる端末やスマートフォン管理ならMobiConnect
FluxとはFacebookが提唱しているReact向けのアーキテクチャです。(フレームワークではないとのこと) Reactとは同じくFacebookが開発しているJavaScriptクライアントアプリケーションのビューのライブラリです。 Virtual DOMという仕組みを持っていて、ビューの変更差分だけを実際のDOMに反映するため高速に動作する特徴があります。 Reactはビューの機能しかないので、Reactだけではアプリを組めません。そこをカバーするのがFluxです。 Fluxの概念図は下記のとおりです。 Fluxの三大要素はViews(React)、Dispatcher、Storeです。 これらの間をデータは一方向に流れます。(unidirectional data flow) Viewで発生したユーザー操作はActionを経由してDispatcherを呼び出します。D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReduxでlocalStorageにstateのスナップショットを保存する - Qiita
FluxでCUIアプリ
ReactとFluxのこと // Speaker Deck
フロントエンドを楽にするために
