|
MontageJS
MontageJS (あるいはMontage)は オープンソースの JavaScript フレームワークであり、スケーラブルなシングルページアプリケーションを開発するために設計されている。 その目的は実績のあるネイティブアプリケーションフレームワークの基盤の多くを採用することにより表現力豊かなHTML5のアプリケーションの開発と保守性を簡素化することである。Montageを使用すると、開発者は再利用が可能なユーザーインターフェイスコンポーネントおよびモジュールを構築したり、拡張したりが可能になり、コンポーネントとコントローラ間のプロパティをバインドし、特にリソースに制約のあるデバイス上でスムーズなユーザー体験を保証するために、DOMの更新を同期させることができる[1]。 開発の歴史Montageの開発はしばらくの間、モトローラ・モビリティで、2010年8月から2012年7月にブノワ·マーチャント氏と彼のチームの下で始まった。 プロジェクトは、2012年7月にGitHub上でBSDライセンスの形でオープンソース化された。 Montageは現在、シリコンバレーで開始されたときの従業員たち、マーチャントと元の開発チームのコアメンバーによってメンテナンスされている。 Montageの背後にあるアイデアは、マーチャントがAppleに在職していた1999-2010年にネイティブの（デスクトップライクな）ユーザーインターフェイスをJavaScriptで書いていた時期にさかのぼる。 マーチャントのその時点での目標は例えばCocoaやWebObjectsなどの実績のある技術と同等のものを作成することだったが、それよりもウェブとクライアント側のHTML、CSSおよびJavaScriptによるアプリケーションの構築を容易にすることだった。 その成果はGianduiaであり、リッチインターネットアプリケーション向けフレームワークとして2009年のWorld of WebObjects Developer Conference上でアップルにより導入された。 2010年、マーチャントがモトローラ・モビリティに加わりモバイル向けの新しいフレームワークの仕事についたとき、アップルで学んだ教訓から、MVCデザインパターンを根底から利用してMontageアプリケーションを論理的に異なる単位に分割するようにMontageを構築した。 ロードマップ上の多くのコンポーネントが未だ発展途上にあるけれども、Montageは製品レベルのアプリケーションで用いられており、例えばそれはメモをとるためのScratchpad[2] やTips & Tricks[3]などのグーグルによる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アプリケーションのリリースを可能にする。 構成
典型的なMontageアプリケーションは以下の構造を持つ。 + your-app + assets - index.html + node_modules - package.json - README.md - run-tests.html + ui + main.reel - main.css - main.html - main.js + version.reel - version.css - version.html - version.js
コンポーネントの構造例えば <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">
{
"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>
このように、Montageアプリケーションでは非常に明瞭かつ明確に区分けされた形でウェブアプリケーションを実装することが可能になっている。 互換性Montageは一般的なブラウザの機能に依拠しており、近代的なブラウザでよく動作する。Google Chrome、Firefox、Safari 5以降、Internet Explorer 10、Safari MobileおよびAndroidブラウザなどである。 参考リリース日
参照
外部リンク |
