MontageJS

開発の歴史

Montageの開発はしばらくの間、モトローラ・モビリティで、2010年8月から2012年7月にブノワ·マーチャント氏と彼のチームの下で始まった。
プロジェクトは、2012年7月にGitHub上でBSDライセンスの形でオープンソース化された。
Montageは現在、シリコンバレーで開始されたときの従業員たち、マーチャントと元の開発チームのコアメンバーによってメンテナンスされている。
Montageの背後にあるアイデアは、マーチャントがアップルに在職していた1999-2010年にネイティブの（デスクトップライクな）ユーザーインターフェイスをJavaScriptで書いていた時期にさかのぼる。
マーチャントのその時点での目標は例えばCocoaやWebObjectsなどの実績のある技術と同等のものを作成することだったが、それよりもウェブとクライアント側のHTML、CSSおよびJavaScriptによるアプリケーションの構築を容易にすることだった。
その成果はGianduiaであり、リッチインターネットアプリケーション向けフレームワークとして2009年のWorld of WebObjects Developer Conference上でアップルにより導入された。
2010年、マーチャントがモトローラ・モビリティに加わりモバイル向けの新しいフレームワークの仕事についたとき、アップルで学んだ教訓から、MVCデザインパターンを根底から利用してMontageアプリケーションを論理的に異なる単位に分割するようにMontageを構築した。
ロードマップ上の多くのコンポーネントが未だ発展途上にあるけれども、Montageは製品レベルのアプリケーションで用いられており、例えばそれはメモをとるためのScratchpad やTips & TricksなどのグーグルによるChromeアプリケーションである。
Webベースのアプリケーション開発の分野へのネイティブアプリケーションフレームワークのデザインやパターンを置き換えることは何も新しいものではない。Montageは、従来のフレームワーク（例えばCappuccinoなど）と異なっている場所は、Webのための新しい構文を導入しようとしないということである。
その代わりにモジュラー、自己完結型のコンポーネント、実際のオブジェクトやコレクションなどを使ったウェブスタックのトップに抽象化のクリーンなレイヤーを作成するためのCocoaライクのAPIを整備し、それによってあなたがそれらのオブジェクト、プロパティ、コレクションの変更を観察することを可能にする。

機能

MontageはECMAScript5、HTML5、およびNode.jsで普及したCommonJSモジュールシステムで構築されている。
グラフィカルユーザーインターフェイスの機能を構築し、独立性の高いUIコンポーネントのセットおよびDOMインターフェイスコンポーネントの両方へのアクセスを提供する。
しかしながら、Mustacheライクなテンプレートシステムを使う代わりに、例えばMontageは開発者にスタンドアロンなウェブページの形でユーザーインターフェイスコンポーネントを作らせる。
アプリケーションは単なるコンポーネント化されたテンプレートであり、ウェブブラウザ上で直接オープンされることになる。
テンプレートはDOMスケルトンおよびいくらかのCSSを必要とするかもしれないが、識別されたDOMに接続されたコンポーネントのオブジェクトモデルと一緒に読み込まれる。
Montageは、文字列と値操作、シリアル化、および直接のグラフィカル·ユーザー·インターフェースに結び付けられていない他の機能を提供する。
これは、プロパティをバインドするためにgetterおよびsetterを使用するので、バインディングの数が大きくなっても性能を維持される。
管理された描画サイクルが実装されており、これはMontageアーキテクチャーのキーとなる部分であり、読み込みおよび書き込みの処理はスケジュール化された間隔で行われ、パフォーマンスの妥協がない。
そして、アプリケーションのパフォーマンスを改善するためにイベントハンドリングおよびディスパッチを管理するイベントの移譲を行っている。
MontageJSエコシステムの一部は、より良い開発者に最適化されたエクスペリエンスを提供するツール群である。
それらは初期化ツールMinitであり、初期のひな形となるアプリケーション、コンポーネントを生成するだけでなく、ウェブアプリケーションのフロントエンド開発を目的としたモジュールを生成し、これはMR(Montage Requireの短縮形)と呼ばれるnpmスタイルのパッケージを用いる。自動生成されたアプリケーションのひな形はそれ自体がnpmの規格に準拠したnodejsモジュールであり、アプリケーションとそれを構成するコンポーネント群は階層構造を持つ。
Montageには開発者に最適化されたエクスペリエンスをユーザーに最適化されたエクスペリエンスに変換するMop(Montage optimizerの短縮形)と呼ばれるコマンドラインツールも付属している。
Mopは製品レベルのMontageアプリケーションを出力する。アプリケーションの全体的なファイルサイズを削減し、たくさんのダウンロードをプリロードすることを可能にし、リクエスト数を減らすことで開発者にContent Security Policiesの制限のあるMontageアプリケーションのリリースを可能にする。

コンポーネントの構造

例えば ui/main.reel/main.html を開くと以下のように記述されている。
<script type="text/montage-serialization">
    {
        "owner": {
            "properties": {
                "element": {"#": "main"}
            }
        },
        "montageVersion": {
            "prototype": "ui/version.reel",
            "properties": {
                "element": {"#": "montageVersion"}
            }
        }
    }
</script>
<body>
    <div data-montage-id="main" data-montage-skin="light" class="Main">
      <footer data-montage-id="montageVersion"></footer>
    </div>
</body>
<script type="text/montage-serialization"> はMontageで特徴的な宣言であり、JSON形式でコンポーネントの役割を意味づけることができる。
"owner" では<div data-montage-id="main"> がコンポーネントの本体であることを示している。
<div data-montage-id="main">には<footer data-montage-id="montageVersion">が含まれており、JSONの"montageVersion"上で"ui/version.reel"をコンポーネントのプロトタイプとして用いることが分かる。
同様に ui/version.reel/version.html を開くと以下のように記述されている。
<script type="text/montage-serialization">
{
    "owner": {
        "properties": {
            "element": {"#": "version"}
        }
    },
    "montageVersion": {
        "prototype": "montage/ui/text.reel",
        "properties": {
            "element": {"#": "montageVersion"}
        },
        "bindings": {
            "value": {"<-": "@owner.montageDescription.version"}
        }
    }
}
</script>
<body>
   <footer data-montage-id="version" class="Version">
       Montage version: <span data-montage-id="montageVersion"></span>
   </footer>
</body>
ui/version.reelコンポーネントにおいてその本体は"version"であり、Montageのバージョンを表示しようとしている。
<span data-montage-id="montageVersion">はJSON上で"montage/ui/text.reel"コンポーネントを参照することになっており、これはMontageフレームワーク上で変更可能なtext-elementである。
"bindings"で"value": {"<-": "@owner.montageDescription.version"}という関連付け設定が行われており、この場合アプリケーション本体のMontageフレームワークからversionを取得し、それをtext-elementの値として入力することを意味する。
このように、Montageアプリケーションでは非常に明瞭かつ明確に区分けされた形でウェブアプリケーションを実装することが可能になっている。

互換性

Montageは一般的なブラウザの機能に依拠しており、近代的なブラウザでよく動作する。Google Chrome、Firefox、Safari 5以降、Internet Explorer 10、Safari MobileおよびAndroidブラウザなどである。