FRONTEND CONFERENCE 2017 にて、 - リモートチームで社内ハッカソンをやったエピソード - その時に使ったフロント技術の紹介 を発表した時の資料です。
FRONTEND CONFERENCE 2017 にて、 - リモートチームで社内ハッカソンをやったエピソード - その時に使ったフロント技術の紹介 を発表した時の資料です。
注意 これは 8 no-Flux strategies for React component communication を意訳し、自分の解釈や補足を追加した記事になります。 実際に自分が React でコードを書いていて、疑問に思い調べた際に参考にしました(結局は Flux/Redux と 方法1. Props を使ったのですが)。 はじめに React で、最初の大きな問題の1つは「コンポーネントはどうやって他のコンポーネントとコミュニケーションするべきか」という事です。 コンポーネント2がクリックされた事をコンポーネント1に伝える最も良い方法は何でしょうか? これには、とてもたくさんの答えがあります。早かれ遅かれ、Flux が言及されるでしょう。 Flux アーキテクチャでコミュニケーション問題を解決できるでしょうか?Flux は必要でしょうか? この問題は Flux を使用するこ
autoscale: true How to work as a Team 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info 目的 新規でそこそこ複雑なウェブページを作る(アプリに近い) ある程度柔軟に拡張でき、メンテできるような設計にしたい 無難にReact + 何かでちゃんと設計して作っていきたい この設計部分をどう決めていくのかという話 現状 チームにReact/Flux/Reduxを触ったことがない人が多い どれが(主にView以外の設計)ベストかは分からない Flux的な部分の話 ものごとは変わる。 混乱は変わらない 混乱の原因 情報過多 情報不足 適切でない情報 上記の組み合わせ! via P21 今日からはじめる情報設計 情報の共有 情報不足 そもそもReactなどを知らない人には知ってもらう必
When you start asking about AJAX and React, the first thing the experts will tell you is that React is a view library and React has no networking/AJAX features. It's good to know, but not very helpful when you just want to get data from the server into your React components. The truth is, there are a ton of ways to do it. You probably have thought of a couple ways yourself, but if you choose the w
この記事は仮想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
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フレームワーク、今は 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
Provides components & composition Standardized event handling (implements delegation) Component lifecycle events for escape hatches A functional UI model (rerender everything, but only apply changes) It's all JS, you can do anything! const dom = React.DOM; const App = React.createClass({ getInitialState: function() { return { name: "James" }; }, render: function() { return dom.div( { id: "app" },
Good bye Flux, welcome Bacon/Rx?の翻訳です。FRPを使う場合の一つの実装の仕方としてアリではないかと思います。 こういうのを見るとFRPのバズワードが一段落すると、やがて、この記事に出てくるビジネスコンポーネントのディスパッチャーの部分がプログラミング言語に隠蔽されるのでは、そんな予感すらします。オブジェクト指向とFRPの合流点が見えかけているというか、そんなイメージでしょうか。 さようなら、Flux。ようこそ、Bacon/Rx FacebookはクライアントサイドのWebアプリケーション開発のためにFluxを約1年前に発表しました。以来、Webの開発シーンの中でもっともホットな技術のひとつになっています。 Fluxのタスクはビジネスロジックをユーザーインターフェースのロジックからディスパッチャーとストア、アクションを使うことで分離することです。中核となるア
ちょっと前に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
開発が大好きな@geta6です。 React meetupのことを完全に見逃していて悔しかったので、外部公開の社内勉強会でReactとFluxについての発表をしました。 経緯 現在ピクシブではReactでFluxな感じの構成で新サービスを開発中です。これまで社のプロダクトとしてReactを採用したことは無く、この新サービスが初の採用となる予定です。社内の空気感は「FluxもReactもよく聞くし何となくわかってるけど、詳しくは知らない」という感じでした。 そこで、自分の理解度の確認と、一緒に開発しているチームの人や社内外の開発現場の皆さんに大体の感覚を掴んでもらえるよう「ReactとFluxって一体全体なんじゃらほい」というテーマで、ざっくりと大枠を捉える発表をしました。 資料 speakerdeck.com ReactとFluxのこと // Speaker Deck スライドには入ってい
React.js meetup #1 - connpassに参加して、Fluxアーキテクチャについて話してきました。 10分で実装するFlux - @azu 10分で実装するFlux というタイトルで発表してきました。 以前実装したmaterial-fluxをより小さくただのEventEmitterだけで実装したような内容になっています。 Fluxは図が複雑だったり、複雑そうな文章が出てきたりしますが、ミニマムな実装をするとやってることはよく見るようなものをある程度形式化しただけのように見えてきます。(Dispatcherが色々複雑な制御していますが) そういうのを理解するために実際に作って見るとわかりやすいかもなーと思って10分で実装するFluxというスライドを書きました。 発表では触れなかったおまけでFluxライブラリの比較やよくある疑問とかもちょっと書いてました。 material-
Immutable collections for JavaScript Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data. Immutable.js provides many Persiste
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Google グループでは、オンライン フォーラムやメール ベースのグループを作成したり、こうしたフォーラムやグループに参加したりすることで、大勢のユーザーと情報の共有やディスカッションを行うことができます。
要約 : 私たちは、React.js と Flux、それに他のいくつかのライブラリを用いて HipChat の Web クライアントを根本的に再構築し、素晴らしい結果を得ました! 是非試してみませんか? HipChat がアトラシアンに加わったときのクライアントは、Web、Adobe Air (Windows、OS X、Linux)、iOS、そして Android アプリの 4 つでした。HipChat チームが最初に掲げた目標のひとつが、Air クライアントを OS X、Windows、Linux のネイティブデスクトップクライアントに置き換えることでした。私たちは (その当時は) 小さいチームだったためしばらくはこの仕事で手一杯でした。このように最高のアプリケーションを提供することに集中した影響で、Web クライアントに対しては私たちが行った様々な開発の成果を反映させることができません
material-fluxというFluxアーキテクチャの実装ライブラリを書きました。 Fluxって何?と思う人は以下などを見ると良さそうな気がします。 React: Flux Architecture - Video Tutorial Series @eggheadio Fluxとはなんだったのか + misc at 2014 - snyk_s log Fluxアーキテクチャの覚え書きを書いた - snyk_s log The Flux Quick Start Guide Getting To Know Flux, the React.js Architecture ♥ Scotch What the Flux? (On Flux, DDD, and CQRS) — Jack Hsu なぜ作ったか IDE readable(machine readable)なライブラリが欲しかったのがひと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く