Frontend Fantasy 〜ミスリルの戦士たち〜
-
Upload
masashi-matsui -
Category
Software
-
view
548 -
download
1
Transcript of Frontend Fantasy 〜ミスリルの戦士たち〜
NDS IN NIIGATA MEETUP #8
ミスリルの戦士たちFRONTEND FANTASY
Friday the 13th
// me.json
{
“name”: “松井 正志”,
“kana”: “まつい まさし”,
“company”: “water-cell inc.”,
“role”: [
“フロントエンドエンジニア”,
“サーバーサイドエンジニア”
],
“twitter”: [“@circled9”, “@ma_2_i”]
} 33
Agenda• Introduction
• Feature
• Architecture
• Tutorial
• Etcetera
• Conclusion4
Introduction
5
みなさんがお使いの フレームワークは何ですか?
6
Backbone.js
7
AngularJS
8
React & Flux
9
どれもすばらしい フレームワーク
10
どれを使うべき?
11
RailsとSinatra
12
djangoとTornado
13
フレームワークは 使い分けるべき
14
15
Mithril
Feature
16
かるい Light-weight
17
たった12KB (gzip)
18
小さなAPI、小さな学習曲線
• 用意されているAPIは全部で16個
• 毎日1個ずつ覚えれば2週間ちょっとでマスターできますね!(極論)
19
けんじつ Robust
20
デフォルトで安全
21
コンポーネントによる分割
• Reactみたいに部品を組み合わせてViewを作る
• 部品の再利用がしやすい
• Fluxみたいな仕組みはなので、極力子コンポーネントはステートレスにするとよい
22
割と堅実な方針
• しっかりとしたドキュメント
• 今のところ互換性無視の破壊的なアップデートもない模様
• 実装面でも、例えばRouterはIE8でも動くようなモードが用意されている
23
はやい Fast
24
Virtual DOM
• Reactなどと同じ仮想DOMによる差分更新
• 実装の仕方も仮想DOMありきの実装になる
25
頭のいい再描画
• いろいろなイベントをトリガーにして更新をする
• クリックとか通信終了とか
• データに変更がおきるタイミングは大体その辺という考え方
26
速度の比較
27
Architecture
28
Architecture
• Model
• View Model
• View
• Controller
29
Architecture
30
Component
Controller
View View Model
ModelComponent
Controller
View View Model
30
Architecture
• クラス継承などはせず、すべて普通の関数、普通のJavaScripオブジェクトとして実装する
• 割と実装は自由にできる
31
Model
• 普通のJavaScriptオブジェクト
• 責務はビジネスモデルのカプセル化
• m.prop()でgetter-setterを作る
32
Model View
• 普通のJavaScriptオブジェクト
• 責務はビューに関するロジックなどのカプセル化
• ビューのステートを保持したり、変更内容をモデルに反映したりする
33
View
• ビューは関数として実装する
• 責務は表示とモデルのバインディング
• function() { return m(“div”) } みたいな感じで定義していく。
34
Controller
• コントローラーは関数として実装する
• 責務は各レイヤーの初期化など
• 一般的なMVCのコントローラーのように、ユーザーの入力の取り扱いなどはしない
35
Architecture (再掲)
36
Component
Controller
View View Model
ModelComponent
Controller
View View Model
36
Tutorial
37
前準備 MithrilをDLする
38
(CDNでもいいです)
39
HTMLを作る
40
41
コンポーネントを作る
42
43
44
ビューのモックを作る
45
46
ビューモデルを作る
47
48
49
ビューの動作を作る
50
51
52
おまけ モデルの永続化をしてみる
53
54
55
56
Etcetera
57
Routing
• Routerも用意されている
• URL表記が違う3つのモードがある
• search / hash / pathname
58
Ajax
• m.request()で非同期でデータを取得する
• m.request()は、指定したモデルのクラスにキャストしてデータを返す
59
他のライブラリとの共存
• config属性で実際のDOMを扱うライブラリを組み込むことができる
60
MSX
• ビューを書くのがつらいときは、JSXライクなMSXがる
• 普通に変換することもできるし、実行時に変換することもできる
61
Conclusion
62
ミスリルはミニマム
63
手軽に書きたい時に すごくおすすめ
64
JSあるある
65
よーしJS書くぞー ↓
(開発環境構築で力尽きる)
66
どうしてこうなった
67
68
いっぱい めんどい むずかしい
69
まだビルドで 消耗してるの?
70
もうビルドやめよう?
71
もうES5で書こうよ
72
73
しゅみだもの
びるどしなくても
いいじゃない
(異論は認める)
74
たまにはES5で JSを書いてみよう
75
76
Mithril
ミスリルでミニマムなスタイル
77
References
78
公式サイト
79
オライリーのミスリル本
80
81
おしまい