WebアプリケーションがJavaScriptを活用することによってどんどんリッチになっています。そうした中で、徐々にMVCを使ったフレームワークに注目が集まっています。 さらにMVCの派生パターンとしてMVVM(Model-View-ViewModel)が知られています。今回はそのフレームワークとして作られているHotDrinkを紹介します。

HotDrinkの使い方

HotDrinkはかなり独特な記述によってWebアプリケーションを開発します。例えば以下はその一例です。

var model = new hd.ModelBuilder()
    .variables( "symbol, favorite, number",
                {number: 10, favorite: "ADBE"}
              )
    .outputVariables( 'total, value, number' )
    .constraint( 'favorite, symbol' )
      .method( 'favorite -> symbol', id )
      .method( 'favorite -> favorite', id )

    .constraint( 'symbol, value' )
      .method( 'symbol -> value', fetch_stock_value )
      .method( 'symbol -> symbol', id )

    .constraint( 'value, number, total' )
      .method( 'value, number -> total',
               function( value, number ) { return value * number; }
             )
      .method( 'total, value -> number',
               function( total, value ) { return total / value; }
             )
      .method( 'total, number -> value',
               function( total, number ) { return total / number; }
             )

    .end();

methodの後に処理を書いて、その返却値を書いていくイメージです。

デモとして経費の計算を行うWebアプリケーションがあります。

外部のサービスからデータを取ってくるもの。非同期にも対応しています。

Canvasを使った描画。ドラッグにも対応しています。

HotDrinkを使うことでWebアプリケーションをMVVMに対応した形で開発しやすくなるでしょう。また、MVVMをフレームワークを通して学ぶという点においてもHotDrinkが使えるはずです。

HotDrinkはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

HotDrink Overview HotDrink/hotdrink: JavaScript MVVM library with support for multi-way dependencies and generic, rich UI behaviors.