*/, JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました, JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました, javascript - Why is React's concept of Virtual DOM said to be more performant than dirty model checking?
It comes with many built-in modules such as … Code is Open Source under AGPLv3 license →サービスページはこちら There are two things you need to know to build your own Virtual DOM. A fast, lightweight, HTML-based templating engine for Node.js and the browser with async, streaming, custom tags and CommonJS modules as compiled output. Bootstrapとは？意味や特徴、種類を徹底解説 It allows us to express our application's viewas a function of its state. (mercuryではこれをもう少し簡単にするRaynos/virtual-hyperscriptというのを持っています), これによって組み立ててたVirtual DOMは前回のstateとの差分をみてから本物のDOMを組み立てるので、実際のDOMの変更が最小になるためレンダリングのコストがかなり削減出来ます。, ReactではこのようなDSLの代わりにJSXというXMLシンタックスでHTMLを直接書いて、それをコードに変換するコンパイラを持つことで面倒なDSLでの組み立てをなくしています。, Matt-Esch/virtual-dom はmercuryが使っているだけであるので、単独で使うことも出来ます。これをベースにしたテンプレートエンジンとかあると結構面白いのかもしれません。, mercuryでのモデルのレイヤーは先程もちょろと出てきましたが、State modulesと言われるもので表現されています。, Stateはいわゆる監視できる値と考えればいいので、文字列や数値、オブジェクトを包んだラッパーオブジェクトみたいなものになっています。, このStateを作る or 更新は、Knockout等知られるようなラッパーオブジェクト経由で更新メソッドを叩くタイプの手法ですね。, プリミティブな値はRaynos/observ、オブジェクトはRaynos/observ-struct、配列はRaynos/observ-arrayとよくある感じのStateが用意されています。, observ等のサンプルをみてもらうとわかりますが、observは関数を返す関数となっていることがわかると思います。, モジュールを組み合わせたり、immutableなデータを扱ったり、関数型的なスタイルが色々な場面でみられるのもこのmercuryの特徴だと思います。, JavaScriptで関数型プログラミングはO&Reilly Japan - JavaScriptで学ぶ関数型プログラミングが面白いのでオススメです。, mercuryでは簡易EventEmitter的なイベントのデータ構造を提供するRaynos/geval、clickやkeydown等のDOMイベントを管理するRaynos/dom-delegatorやRaynos/value-event等が用意されています。, Raynos/gevalはEventEmitterと違って1つのイベントを表すものですが、
It comes with many built-in It solves the problem of keeping the user interface in sync with underlying data. HTML は DOM ツリーという JavaScript API から生成されます。そして仮想 DOM はこの DOM ツリーを表現するためのデータ構造です。DOM ツリーを直接操作して View ( HTML ) の構造を更新するよりもずっと低コストで高速であることから、ここ数年は普及の一途を辿っています。, Cycle.js は Drivers による DOM 操作を除き、原則として View を仮想 DOM で管理します。様々な仮想 DOM ライブラリがありますが、Cycle.js は軽量かつ高速であることに定評のある1)オレ調べ jQuery("#footnote_plugin_tooltip_1").tooltip({ tip: "#footnote_plugin_tooltip_text_1", tipClass: "footnote_tooltip", effect: "fade", fadeOutSpeed: 100, predelay: 400, position: "top right", relative: true, offset: [10, 10] }); Snabbdom を採用 ( 依存 ) しています。今回はこの Snabbdom を Cycle.js 上で扱う方法をご紹介します。, シンプル・モジュール性・軽量・ハイパフォーマンスを売りとした仮想 DOM ライブラリです。Cycle.js の DOM 操作モジュールである @cycle/dom はこの Snabbdom を内包したものであり、xstream ( or RxJS ) と共に Cycle.js を支える非常に重要な柱と言えます。, ちなみに [ Snabb ] とはスウェーデン語で『速い』という意味だそうです。ですので Snabbdom を日本語に訳すと『爆速 DOM』といったところでしょうか。, Snabbdom は HyperScript とほぼ同じ書き方で仮想DOMツリーを記述します。, 注 ) 記述形式といいますか設計思想を踏襲しているのであって、ライブラリ依存しているわけではありません。, HyperScript は h() という関数です。h() は第一引数にタグ名を含むセレクタを指定し、第二引数に属性、第三引数に子要素を指定します。但し、第二・第三は共にオプショナルとなっており、属性の指定が不要の場合はそれを省略して子要素を第二引数として記述することも出来ます。Snabbdom もこの形式をそのまま採用しています。文章で説明すると何のことやらですが、Snabbdom の TypeScript 型定義ファイルを見てみるとその仕組みがよくわかります。, 第二引数に VNodeData 型の引数を渡すと属性として展開されます。代わりに文字列型を渡すと textNode 要素として、VNodeの配列を渡すと子要素として展開されます。属性と子要素 ( or textNode要素 )の両方を指定したい場合は、第二引数に属性、第三引数に子要素を渡します。, ピュアな Snabbdom はh()関数のみを使い、タグ名までを第一引数に含めますが、Cycle.js は h() とは別に現行の HTML5 要素全てをメソッド名として独自に用意しています ( シンタックスシュガー ) 。, animate()やrect()といった SVG 関連の要素はもちろん、meta()、link()、script()といったメタ要素のものも用意されています。, 例えばよく使うであろう props、 attrs、 style、 class、 dataset は以下の形式で値を指定します。, props は DOM 要素のプロパティを指定するためのブロックです。type、 href、 src、 width、 height といった項目ですね。 attrs も props とほぼ同じですが、こちらは内部で setAttribute / removeAttribute を使っています。厳密に書くのであれば使い分けるのもありですが、僕は attrs だけを使うようにしています。data 属性も 'data-action': 'reset' のようにして attrs ブロック内に含められますが、こちらに関しては別途用意されているdatasetを使用するのがよろしいでしょう。, classブロックは動的に管理したいクラスを記述します。管理するクラス名をキーとし、値が true となるとそれが適用されます。, style には従来の HTML / CSS インラインスタイルには無い独自の機能が実装されています。, delayed は 仮想DOM要素のプロパティを遅延指定ることが出来ます。上記の例では、 span 要素はまず opacity: 0 の状態でレンダリングされてから opacity: 1 になります。CSS アニメーション ( transition: 'opacity 1s' ) が指定されているので、フェードインしながら表示されるように見えます。, remove は delayed の逆です。対象の仮想DOMが削除される直前に remove ブロック内に指定されたスタイルが適用されます。上記の例ではフェードアウトした後で削除されます。, 以上、 Snabbdom の簡単な概要と Cycle.js における使い方をご紹介しました。これだけですと『単なる軽量・シンプルな仮想DOMライブラリ』で終わってしまいますが、Snabbdom には容易にその機能を拡張することが出来る Module / Hookというものが備わっています。これを使いこなすことによって、Snabbdom ないし Cycle.js を更なる高機能なものにチューンナップすることが出来ます。次回はその Module と Hook について詳しくご紹介します。, リクルートマーケティングパートナーズではたらく Web フロントエンド・エンジニア。サプリシリーズをはじめとした内製サービスの開発メンバーとして、仕様策定や技術選定にも携わる。ブログなどで積極的にWeb技術の情報発信に取り組んでいるが、実はプログラミングよりも洋服を自作する方が得意だったりする。. 本物のDOMを操作しながら高速な差分更新を実現するのは、現在のレンダリングの仕組み上かなり難しいです。, Virtual DOMを持つライブラリといえば、FacebookのReactが有名ですね。