仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita
なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使ってみて、そのノウハウを公開したり、今年前半は色々とアウトプットをしていましたが、後半はSpecificなアプリケーションドメインを記述することが多くて、あまりアウトプットする内容がなくなってました。 取り敢えずは、新規のプロダクトなら採用してもよい、という雰囲
Facebook Relayについてまとめ - Qiita
Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 結局データをサーバからとってくるところってどうなってるの？ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか まず、I
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と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)
最近のReactへの言及についての違和感 - mizchi's blog
「最近のReactへの言及についての違和感」というエントリ書いたら燃えますかね— イカid:mizchi0x (@mizchi) 2015, 6月 7 僕がみた資料の中でFluxの設計について正しい理解をしていると思えるのはげたさんのこの資料だけです https://t.co/XaKHhhuP2A— イカid:mizchi0x (@mizchi) 2015, 6月 7 みんなsetStateに騙されてる— イカid:mizchi0x (@mizchi) 2015, 6月 7 一部で「React使うとコード量が増える」という意見、サーバサイドで書いたテンプレートのレタッチをするjQueryと比べたらそりゃそうなんだけど、SPAでそもそもJS側がテンプレート握るような環境では handlebars とかで書いてたところが JSXになるだけでそれ移行コスト— イカid:mizchi0x (@mi
歌舞伎座.tech#6「VirtualDOMとReact」 アウトラインメモ
歌舞伎座.tech#6「VirtualDOMとReact」 - connpass に参加して来たのでメモ。 すべてのCSSに死を！これはJSerの叫び！- @kyo_ago スライド: CSSに死を！これはJSerの叫び！ #kbkz_tech CSSが辛い CSSはカプセル化とか継承とか、プログラムからの概念がそのまま持ってこれない ReactStyle js-next/react-style JS内にStyleを埋め込むことができる そのままオブジェクト的に入れられる Template Stringsと合わせればその場でCSSを入れることができる styles=にスタイルを入れる セレクタをあまり考えなくていい style属性でスタイリングする 擬似要素、擬似クラスが全滅 :hover :active などが使えない。 CSSの継承などの概念が消える 自分で頑張る必要がある ユーザプレ
Ardaの設計指針と設計思想 - Qiita
@armorik83 さんの記事を受けて Fluxフレームワーク Arda が気になる10の理由 - Qiita 設計思想とか指針とか残しておきます。 mizchi/arda Arda - MetaFluxなフレームワークを作った - Qiita Ardaは実践的なものを目指した 他のフレームワークは思想から入って実装されたものかもしれませんが、ArdaはFluxを意識しつつも実際のアプリで使われている画面遷移の機構を抽象化する点から開発がスタートしています。 またKobitoという比較的寿命が長い(ことを予定している)アプリの基盤にすることで長くメンテされる予定です。なのでKobitoはちゃんと使ってもらえるようなものにしたい、と思って開発しています。(この記事が宣伝兼ねてないとは言いませんが。) (自分の開発したものにしては)ドキュメントが充実していることについて 開発者の今回の様子に
Arda - MetaFluxなフレームワークを作った - Qiita
僕はIncrements(このQiitaの会社)に入社して以来、KobitoのWindows版を作っていて、その中枢の画面遷移と状態管理をライブラリとして抜き出した。それがArda。 基本的には昨日発表した https://speakerdeck.com/mizchi/real-world-virtual-dom というスライドに書いたとおり。 mizchi/arda Ardaの概要 Ardaの目的はFluxの概念をベースに、画面遷移と状態とシーンをベースにしたヒストリ管理、その際のDispatcherのコンテキスト切り替えを行うことを主な目的としている。 CoffeeScriptでの最小構成だと次のようなコードになる Arda = require 'arda' # Arda.Component extends React.Component class HelloComponent ex
「React / Flux を実案件で使ってみた」その後
改めて覗いてみよう 1) CheckboxWithLabel changes the text after click: AssertionError: # /path/to/test/components/CheckboxWithLabel_test.jsx:21 assert(label.getDOMNode().textContent === 'On') | | | | | | "Off" false | HTMLLabelElement{htmlFor:"",form:null,accessKey:"",control:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:f
Fluxとはなんだったのか + misc at 2014 - saneyuki_s log
はじめに VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita を読んでいる前提で話を進めます。 結局”Flux”なんだったのよ 詳細については過去に自分が覚え書きを書いたのでそっちを読んでいただけると良いと思うけど、あれは 「MVCの変形亜種に、オブザーバーパターンを乗せ、データを単一方向に流すことを規定した」ものに、Facebookが命名したものでしかない。極端に目新しいものでもない。その最大の功績はアーキテクチャそのものではなく、「試行錯誤を踏む中で誰もが一度はやっていたであろう似たようなことを上手く実践法則としてまとめた上で、共通認識としての名前をつけた」こと。概念に名前をつけて共有することで、事前説明が簡略化され、本質的な問題に取り組む時間が増える。これをFacebookのブランド力でねじ伏せるように広めたことこそが重要かつ評価すべきポイン
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
Reactive MVC and the Virtual DOMのメモ | GH Issue Note
Reactive MVC and the Virtual DOM — Futurice のメモ。 Model-View-Intent and the Virtual DOM の記事版という感じ React/Fluxは最近話題になってる React/FluxはリアクティブプログラミングであるがAPIが少し違う Reactはリアクティブとインタラクティブなパターンを混ぜた感じ ゼルダのように昼と夜で同じマップだけど違う世界のように2重となるようなケースを考える The dual of Interactive is Reactive 普通のインラクティブの場合は、Xをに影響を与えるものを探す場合、他のモジュールでX.update()を探す必要がある しかし、リアクティブパターンの場合はXの中を探せば良くなる どうやってリアクティブパターンを実装するか? event emittersの導入 Xから
Reactive MVC and the Virtual DOM
The web frontend scene is witness to many new frameworks and ways of working. It can be quite annoying when software becomes legacy quicker than ever. But actually, it's just good old innovation happening as it should, because the opportunities for improvement are there. Frameworks come and go, but what remains are the good ideas that they brought to the world. We're going to talk about the good i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとFluxのこと // Speaker Deck
Dive into React.js
Fluxアーキテクチャの覚え書きを書いた - saneyuki_s log