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

もうES５で書こうよ

72

73

しゅみだもの

びるどしなくても

いいじゃない

（異論は認める）

74

たまにはES5で JSを書いてみよう

75

76

Mithril

ミスリルでミニマムなスタイル

77

References

78

公式サイト

79

オライリーのミスリル本

80

81

おしまい