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 theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
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
Lin Clark 氏が “A cartoon guide to Flux” というタイトルでとてもわかりやすく Flux についての記事を投稿していました。この文章のなかでも書かれていますが Flux はとてもホットな話題です。しかし、まだまだ十分に理解されていない技術なので、著者の Lin Clark 氏に許可を頂いて翻訳させていただきました。何か間違いや分かりにくいところ、より良くするための助言などありましたら気軽に@sota0805 までコメントお願いします。 (以下、2015年9月29日に Lin Clark 氏によって書かれた “A cartoon guide to Flux” の翻訳です。) 漫画で説明する FluxFlux は現在のウェブ開発で最もよく理解されていない話題の1つです。このガイドでは誰もが理解できる方法で説明しようとしています。 問題はじめに Flux が解決
この記事は仮想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 Utils is a set of basic utility classes to help get you started with Flux. These base classes are a solid foundation for a simple Flux application, but they are not a feature-complete framework that will handle all use cases. There are many other great Flux frameworks out there if these utilities do not fulfill your needs. Usage #There are four main classes exposed in Flux Utils: StoreReduceS
Edit · Jul 18, 2015 · 13 minutes read · Follow @mgechev Flux JavaScript AngularJS React MVC MVW This is the second, and probably be the last, blog post of the series “Flux in Depth”. In the first post we did a quick overview of flux, took a look at the stateless, pure components, immutable data structures and component communication. This time, we’re going to introduce the store and how we can com
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
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
Earlier this year, we published a blog post about how our team is building a new email app using React, with a primary goal of extensibility. That means allowing developers to write plugins that change the app’s behavior, just like in Chrome or emacs. Over the past few months, we’ve designed a new way to structure large React applications in order to reliably and safely support plugins. This invol
サブスタックさんがfluxについてひとこと言いたいそうです。.md つまりfluxっていうのは基本的にはEventEmitterでイベントの順序があるっていうことかな? なんか色々書いてあるけども https://facebook.github.io/flux/docs/dispatcher.html#content そして僕にはEventEmitterからみて利点がよくわかってない、単なる人目を引かせるためのマーケティングかな これがほぼ全てのコードか。 https://t.co/y2dbxOtUn9 ドキュメントとは異なっているようにみえるが、、、 @substack fluxはライブラリって言うよりコンセプトだよね。だからflux inspired libraryがたくさんあるんだと思うけど @NickDima なんか騙してるっぽく見える。。。 @NickDima さらに言えば、fl
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" },
The Evolution of Flux Frameworks — Mediumを読んだ。自分がここ3ヶ月~半年くらい考えてたことと殆ど一緒で、若干の安心感を得たり。実装論の話も概ね同意ではあるのだけれど、自分は必ずしも同意しかねる面がある。 今のメモリマネージド言語のトレンド、特にクライアントアプリケーションの存在を想定したアーキテクチャは、C#が筋道を立てた実践理論に追随してる面があるので、過程はどうあれ、彼らの先端スタイルに近づいていくことになると思うのよね。 Fluxパターンの話をすると、あれが偉かったのは「疎結合すると色々楽になるから、オブザーバーパターンにして、コマンドパターン使って、コマンドは単方向にすると破綻しにくい割に弄りやすいよ」ってのを、フレームワーク症候群に陥っていた凡百なWebクライアントサイドに、一発、投げつけた辺り(というのは半年くらい前に書いたな……)。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く