BT

Facebook製UIライブラリ『React』の不変性をパワーアップさせる『Om』について

| 作者: Tom Coupland フォローする 0 人のフォロワー , 翻訳者 株式会社オープンストリーム 木村 茉由 フォローする 0 人のフォロワー 投稿日 2014年2月11日. 推定読書時間: 5 分 |

原文(投稿日:2014/01/17)へのリンク

David Nolen氏が、Facebook製ReactのClojureScriptインタフェースであるOmをリリースした。この組み合わせがどのようにしてパフォーマンスの大幅改善を実現できるのかについて、David氏は自身のOm紹介記事で、現在の標準的なアプリケーションとされているTODOアプリケーションを用いて説明している。この改善は2つの主な要因によるものである。

  1. アプリケーションの状態変数に不変なデータ構造を用いるということは、土台となっているReactライブラリのshouldComponentUpdateの実装のために、参照等価性を利用できるという意味である。このことは、Reactの仮想DOMの差分チェック(ブラウザに描画させる必要がある変更を検知する処理)パフォーマンスを向上させる。David氏によると、結果的にアプリケーションのパフォーマンスは、標準的なデータ型を使用する場合に比べて2~3倍速くなるという。
  2. requestAnimationFrameはブラウザのビューを再描画するタイミングの決定を委譲するために用いる。その結果、ビューの表示効果処理を一括して実行することができるため、再描画の回数を削減することができる。パフォーマンスが30~40倍になったというDavid氏のツイート の背景には、この2つ目の要因が関係しているように思われる。この2つ目のベンチマークは終了時の状態が開始時と同じであるため、Omがあらゆる状態変化においても動作することが可能であるなら、新しいフレームをブラウザがリクエストする前に、Reactの仮想DOMはビューを実際には何も変更しなくても良いと判断するだろう。変更の必要がないという判断は、当然のことながら、状態変化のたびに再描画を要求するよりも大幅にパフォーマンスを改善する。

とはいえ、David氏はハイパフォーマンスを実現することに彼自身の努力は必要ないということを強調したがっている。彼の記事によると

これらのベンチマークは、Omが世界で一番速いUIコンポーネントシステムであると証明することを目的にしたものではありません。これらのベンチマークは、次のような実装上の決定を避けることが重要である、ということを示すために設計されています―すなわち、グローバルな最適化を阻むような実装や、ユーザ自身が同じような問題のある設計をしてしまうことを防ぐことができないような、ガイダンス(正しい誘導)が少なすぎる実装などです。

InfoQは、Omについてと、どの程度Clojurescriptの採用が進んでいるのかについてDavid氏と対談する機会を得た。

InfoQ: これから追加する主要な機能がまだあるのでしょうか、それとも、今のライブラリが成熟するのを待っているのでしょうか?

David氏: OmはシンプルかつReact上のさらに関数型的なレイヤーです。公開しているAPIはまだ開発中ですが、大きな影響を与えるような機能追加は予定していません―Omはフレームワークではなく、ユーザインタフェースプログラミングに対する、より関数型的なアプローチの土台となることを意図しています。

InfoQ: Reactには古典的な設計方針をWebプログラミングに持ち込んでいるような感覚があり、例えば、Pete Hunt氏は彼のアーキテクチャ概要の中で凝集度と結合度を引き合いに出しています。このことは、JavaScriptが十分に成熟したため、今やそれらの基本コストは仮想マシンのパフォーマンスによって埋め合わせするに足りている、もしくはそれらのアイデアを前面に持ってくるようにユーザインタフェースプログラミングを取り巻く文化が変化していることを象徴しているのでしょうか?

David氏: 私が思うに、開発者はJavaScriptのみの開発やjQuery、ましてやBackbone、Angular、Emberなどといったより構造化されたソリューションを用いた開発の限界に気付きはじめています。結果として明らかに、ReactはDOM問題に対する新鮮なアプローチに思えます。私の記事に対する反響は、私が想像していたよりもはるかに大きいものであったため、このアイデアはブラウザ上で開発を行う開発者の琴線に触れるものだったと考えます。

InfoQ: Moriを通じて最近のJSフレームワークを使うことによって、不変データ構造を採用したくなるような何らかの利点が生じるのでしょうか?もしくは、Reactの仮想DOMのような新しいアプローチが別のデータ構造の必要性―理想的な構造をもったデータ―を生み出していくのでしょうか?

David氏: Reactのアプローチは既にかなりの恩恵をもたらしていますが、不変的なデータ構造を活用した時に真の輝きを放ちます。それというのも、ReactのReconciliationプロセスは、プログラムが実行すべき処理を減らしてくれるからです。我々はOmの発表から、不変的なデータ構造に対する関心の高さを目の当たりにしました。それに加えて、Omユーザかその他開発者かに関わらず、不変的なデータ構造は強力なアンドゥ機能を簡単に実装するための入り口をも開きます。

InfoQ: ClojureScriptは確かにClojureコミュニティの注目を集めています が、JavaScriptから直接ClojureScriptに来る多くの人々のことを知っていますか?

David氏: ClojureScriptは、Clojureコミュニティの需要を満たすことにしっかりと注力しています。しかしながら、Omのようなプロジェクトが示すように、我々のアプローチにはいくつかの面白い利点があり、幅広いWeb開発コミュニティへの関心の高まりがあると考えます。

David氏が上記で述べたように、彼の発表はコミュニティからかなりの反響があった。何人かは、Omを実戦投入した感想を記事にした。

Fredrik Dyrkell氏は純粋なReactからClojureScript、そして最終的にはOmに書き換えたコードサンプルを紹介 し、最後に『まとめると、総じてReactに、とりわけClojureScriptとともに使うことにとてもワクワクします』と締めくくっている。

Adam Solove氏は、ステートフルな地図生成ライブラリと連携する必要がある伝統的なブラウザUIをOmで開発する概要を公開し、『私は次のことを学びました。Omは関数型言語でWebユーザインタフェースを構築する実用的な方法であり、そしてとても楽しいものです』と結論づけた。

Josh Lehman氏はOmによるReactチュートリアル書き、『Omは今まで出会ったリッチなインタフェースを構築するライブラリの中で、最も有望なClojureScriptライブラリです』と述べている。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT