「せーの！」「VirtualDOM、サイコー！」 主にReact, virtual-dom。Fluxアーキテクチャの話もおｋ。Omも。

FluxとMVC 以前、@mizchiさんのなぜ仮想DOMという概念が俺達の魂を震えさせるのかとか、id:saneyuki_sさんFluxアーキテクチャの覚え書きを書いたのを読んでて、いろいろ思うことがあったので纏めます。 Fluxは一方通行だから良い? まず一つあるのが、この節です。 この資料は「そもそもMVCを誤解している」という批判も多いのですが、大事なのは「常に一方向にデータが流れる」という点にあります。 MVCも、もともと一方通行ですよ? いや、まず言いたいのは、MVCも、もともと「一方通行」ですよっていうことなんですよね。 その前に、MVCについて誤解が無いように説明しますけど Smalltalkの設計指針などの、GUIを構築するためのMVC Webアプリケーションのサーバサイド処理をするためMVC の2つがあります。ここでは、GUIのMVCについてです。 また、MVCとかMV

この記事は VirtualDOM Advent Calendar 2014 - Qiita のネタが切れた時にどこからか指定されるやつです。中の人なんであんまり行儀悪いことすると怒られるんだけどな！ やりたいこと UXとSEOのためにイニシャルビューはサーバーサイドで生成し、再描画時にクライアントで同じテンプレートから生成するも、一旦画面を捨てて再構築するのを避けたい。 具体的には、サーバーサイドで何かしらの方法(nodeやreact-railsを想定)で実行して生成されたReactのId付きのDOM React.renderToString(Component({})) して生成したreactId付きHTMLに対して、再描画せずにReactを適用できるようにする(イベント注入含む) 手法 reactのid付きDOMはこんなもの。

VirtualDOM Advent Calendar 2014 9日目の記事。 segmentio/deku は最近出たばかりのVirtualDOMの実装ライブラリです。 小さくて読みやすく拡張性がある実装を目指していて、既にあるvirtual-domとは別に作り始めたのも微妙にComponent周りの考え方が違うからのようです。 読んだもの: deku 0.0.2 読んだ日付: 2014年12月9日 絶賛実装中な感じなので、これを見たからといってもどうという感じではないと思います。 基本的なVirtual DOMの構造はあるので、そういう意味では読みやすいです。 基本的な使い方 var component = require('segmentio/deku'); // Buttonのcomponentを作る // <button>とonClickした時のイベントがある var Butto

VirtualDOM Advent Calendar 2014 - Qiitaの6日目です。 前回、チラッと紹介したdeku、どんなもんかそこまで詳しく知らなかったのでコード読んでみた。 segmentio/deku Dekuの特徴 APIはほぼReactと一緒 render/renderToString/setState/shouldUpdate 小さい 手元でビルドしたのが23kb(Reactが90kb) 公式が9kb謳ってるのは、昔の名残かな…？gzipかもしれないけど diff即生DOM操作なんでヘッドレスで動くような構造ではない duo.jsに依存して書かれてる まあsegment.io製だし デクだけにシンプル。小さいのが特徴。 アルゴリズムとしての本質はここみればわかる deku/diff.js at master · segmentio/deku dekuを参考に自分で仮想

今回はReact.jsのVirtualDOMの実装での工夫について書きたいと思います。 Version control for the DOM React.jsのVirtualDOMの実態はJavaScriptのオブジェクトであり、rerenderする際に前後の状態を比較して最小限の変更だけを実際のDOMに反映させる仕組みになっています。 つまり、バージョン管理されていてdiffだけをpatchとして実際のDOMに適用する感じですね。 Level by level 単純にVirtualDOMのtreeを比較すると計算量が多くなってしまうので、React.jsでは計算量を減らすための工夫がされています。 その1つがVirtualDOM treeの同階層同士でしか比較しないということです。WebアプリケーションのDOM構造で異なる階層に要素が移動するケースは珍しいという理由でこのようになってい

React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.

(訳) 残念ながらReactではES6 class向けにmixinをサポートするつもりはありません。これはJavaScriptの文法的なコンセプトの目的を台無しにしたくないからです。 (訳注: JavaScriptでは)普遍的なmixinの実現方法がありません。実際、いくつかのmixinをサポートする方法が、今のES6の仕様からはドロップしています。いろんなライブラリが様々なセマンティクスを持っています。私達はES6のクラスにmixinを実装するためにはあなたができることは一つだけであるべきだと考えています。Reactは、(訳注: 他のライブラリと違って)なにもしないことを決めました。 React v0.13.0 Beta 1 | React http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

アメリカに37年住んでいる者です。　私なりに書かせてくださいね。 このquiteと言う単語は「次に来る形容詞的フィーリングの最大限ともいえる数値をもたらす」と言うフィーリングがあります（を出せる単語です）。 a fewとはどういうことでしょうか。　数個と言う訳が付いていますね。　数個と言う数ははっきり言っていくつかは分かりませんね。　その分からないと言う部分を最大限に持っていっているわけです。　その最大限と言うのは「相当な数」と言うフィーリングになるわけです。 ですから、a few/bitと言ういかにも少ないと感じる量が最大限の数値になるわけです。 これは、すでに多いと言うフィーリングをもつ、many/a lotにしても同じことなのです。　これもいくら多いと言ってもはっきりした数値は分かりませんね。　これを最大限にもっていく、と言うことは、very manyと言うことにもなるわけです。 で