#ゴール

Mithrilを理解できる
SPAやMVCフレームワークを理解できる
mithrilの特徴を理解できる
mithrilのM,V,Cの使い方を理解できる

#目次

mithrilとは
シングルページアプリケーション
MVCフレームワーク
mithrilの特徴
mithrilのインストール方法
シンプルなアプリケーション

#mithrilとは

ミスリル
シングルページアプリケーションを作るためのクライアントサイドMVCフレームワークである。軽量、信頼性、高速の特徴がある

##シングルページアプリケーション

###シングルページアプリケーションとは

略称：SPA
ページ全体をレンダリングする代わりに、変更部分だけ書き換えて、nativeアプリと似ていてdataのみをサーバーから取得する

###ページ全体をレンダリングする

###変更部分だけ書き換える

###dataのみをサーバーから取得する

初めての検索

###dataのみをサーバーから取得する

jqueryキーワードを追加する

###dataのみをサーバーから取得する

画面構成
HTML + CSS + JS + data
新規
HTML + CSS + JS ロード
data取得
更新
data取得のみ

##クライアントサイドMVCフレームワーク

###クライアントサイドMVCフレームワークとは

Ruby on Rails
Model（モデル）: データベースへのアクセス、SQLコマンドの送信、レコードの取得と管理
Controller（コントローラ）: プログラムの制御
View（ビュー）: 画面の生成。テンプレート
JS MVCフレームワーク
Model: データモデルの部分
View: ユーザーインターフェイスの部分
Controller: そしてビューとモデルのあいだで制御する部分

###主要なクライアントサイドMVCフレームワークの比較

Mithril, Backbone, Angular, React - 調べる - Google トレンド

##特徴

###最速

##インストール

<!doctype html>
<title>ToDoアプリケーション</title>
<script src="mithril.min.js"></script>
<script>
//アプリケーションコードはここ
</script>

##シンプルなアプリケーション

###構成

コンポーネント
モデル
ビュー・モデル
コントローラ
ビュー
マウント

###ポイント

データバインディング
m.prop
自動再描画システム
補足
http://mithril-ja.js.org/getting-started.htmlに参照

###コンポーネント

var todo = {};

###モデル

複雑なアプリにコンポーネントとモデルの実体が分けられるが、初めてシンプルなアプリを説明するので、モデルの実体をコンポーネントの中に入れましょう。

//Todoクラスはプロパティを2つ持つ
todo.Todo = function(data) {
    this.description = m.prop(data.description);
    this.done = m.prop(false);
};

//TodoListクラスはTodoのリスト
todo.TodoList = Array;

###ビュー・モデル

todo.vm = {
    init: function() {
        //アクティブなToDoのリスト
        todo.vm.list = new todo.TodoList();

        //新しいToDoを作成する前の、入力中のToDoの名前を保持するスロット
        todo.vm.description = m.prop('');

        //ToDoをリストに登録し、ユーザが使いやすいようにdescriptionフィールドをクリアする
        todo.vm.add = function(description) {
            if (description()) {
                todo.vm.list.push(new todo.Todo({description: description()}));
                todo.vm.description("");
            }
        };
    }
};

###ビュー・モデル

モデルレベルのエンティティ
UIの状態を保持する
特定のUI状態に関するロジックのカプセル化を行う

###コントローラ

ビューモデルの初期化

todo.controller = function() {
    todo.vm.init()
}

###ビュー

todo.view = function() {
    return m("html", [
        m("body", [
            m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}),
            m("button", {onclick: todo.vm.add}, "Add"),
            m("table", [
                todo.vm.list.map(function(task, index) {
                    return m("tr", [
                        m("td", [
                            m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()})
                        ]),
                        m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()),
                    ])
                })
            ])
        ])
    ]);
};

###ビュー

m("button", {onclick: todo.vm.add}, "Add"),

todo内容を追加する機能
buttonタグ
value: "Add"
onclick属性： todo.vm.add
以下と同じ

<button onclick="todo.vm.add()">Add</button>

###ビュー

m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()})

onchange: function(e) {
    todo.vm.description(e.target["value"]);
}

<input value="description" />

###マウント

m.mount(document, {controller: todo.controller, view: todo.view});

todoコンポーネントの初期化
自動再描画システムが有効になる

###まとめ

###m.prop

getter-setter関数を作るための単純なファクトリ
Ruby on Rails

Class Test
  attr_accessor :name
  
  def initialize(name)
    @name = name
  end
end

test = Test.new("alin")
puts test.name # alin

java

class GetterAndSetter
{
    private int data;

    public int getData()
    {
        return data;
    }

    public void setData( int param )
    {
        data = param;
    }
}

###m.prop

初期化

this.done = m.prop(false);

使用

 m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()})

画面に初めて描画される時
checked = false
onclickの時
htmlのchecked属性値をtask.doneに渡す

###データバインディング

m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()})

#ご静聴ありがとうございます