Meteor prototyping presentation

1. Meteorの紹介
@hashedrock

4. Webアプリ作れますか

5. Webアプリ作れますか
泥酔状態で

6. 「理想のインターフェースは、
泥酔状態でも使える」
- 増井俊之

7. • 飲みながら何か思いつく
• Mac取り出してコーディング始める
• 動かない
• お会計です
エンジニア飲み会

8. 酔っ払って
コード書くことを想像する

9. • ログイン
• ルーティング
• サーバサイド設計(REST, ORM,…)
• WebSocket
いろいろ考えることがある…

10. ちょっと難しい

11. 難しいところは
省略したい

12. Meteor

13. Vue.js
作者

14. Meteorは酔ってても
組めるくらい
コードが少ない

15. ざっくり概要

16. データモデル ビューモデル ビュー
イベント
反映 反映
登場人物少ない

17. テンプレート
{{#each items}}
<p>{{_id}} {{name}}</p>
{{/each}}
だいたいMustache(Handlebars)
#ifと#eachで大抵なんとかなる

18. 一方向バインディング
Template.main.helpers({
items: callback
})
itemsがViewに一方向バインディングされる
「ヘルパ」と呼ばれる

19. リアクティブ＆リアルタイム
Template.main.helpers({
items: function(){
return Items.find();
}
})
「カーソル」
変更があれば、再計算される

20. イベント
Template.main.events({
submit .addItem : callback
})
.addItemがSubmitされたら、
設定したCallbackが実行される

21. 酔ってても使える！
ポイント１
サーバ書かなくてもいい

22. データモデル
クライアント
ビューとか
変更通知

23. データモデル
（ソース）
データモデル
（コピー）
サーバ クライアント
同期
ビューとか
変更通知

24. MongoDB Minimongo
サーバ クライアント
同期
MongoDBとAPIを似せたブラウザ上のDB「Minimongo」
Minimongoに対してコレクション操作することで、
サーバへの通信を待たずにViewに変更を反映させることができる。
サーバ（MongoDB）への差分はあとで送ればよい

25. データモデル
（ソース）
データモデル
（コピー）
サーバ クライアント
同期
ビューとか
変更通知
忘れてよい
（意識しなくていい作り）

26. 酔ってても使える！
ポイント２
モックから作り込める

27. 酔っていると
抽象度の高い思考は無理

28. 現物をプレビュー
しながら作業するのがよい
※Meteorは標準でLiveReload機能が有効

29. 作成の４ステップ
頭を使わず、スムーズに開発できる手順

30. 1. 見た目をまず作る
2. 変数をモックする
3. モックをDBに差し替え
4. イベントの定義

31. 見た目をまず作る
<h1>TODO</h1>
<ul>
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<form>
<input name= name >
</form>

32. <h1>TODO</h1>
<ul>
{{#each items}}
<li>{{name}}</li>
{{/each}}
</ul>
<form>
<input name= name >
</form>
#ifや#eachなどを使う
(1)View

33. (2)バインディング
Template.main.helpers({
items: function(){
return [
{name: Task 1 },
{name: Task 2 },
{name: Task 3 }
]
}
})
View上の「items」に
一方向バインド

34. (3)コレクションのロード
Task = new Meteor.Collection( tasks );
Template.main.helpers({
items: function(){
return [
{name: Task 1 },
{name: Task 2 },
{name: Task 3 }
]
}
})
※Meteorでは、クライアント、サーバ双方から
参照する変数は、varを付けずに初期化する

35. DBからfetch
Task = new Meteor.Collection( tasks );
Template.main.helpers({
items: function(){
return Task.find();
}
})
findの他にも、insert, updateなどのメソッドがある

36. 補足
リアルタイム更新の仕組み
Task = new Meteor.Collection( tasks );
Template.main.helpers({
items: function(){
return Task.find();
}
})
「カーソル」
DBに変更があれば、itemsは再計算される
Viewも更新される

37. (4)イベント
Template.main.events({
submit form : function(e){
e.preventDefault();
Task.insert({
name: e.target.name.value
})
e.target.name.value = ;
}
})
特別なことは何もなし
e.targetで、form内のパラメータを取る

39. MongoDB
Collection
(もしくはSession)
Helpers
View
Template
イベント
反映 反映
Events
変更

40. まとめ

41. • 全てがリアルタイムに自動同期
• サーバを書く手間がない
• プロトタイピングに特化したワークフロー
＝いろいろ考えなくて済む

42. 意識低い状態で
物が作れる

43. ・泥酔時
・眠い時
・帰宅後
・お風呂で

44. サブウェポンとして
便利

45. FAQ

46. Q
認証どうすんの？

47. A
プロジェクト作成直後は、
セキュアではないプラグインが有効。
(autopublishとinsecure)
プロトタイピング終了後それらを削除し、
コレクションごとに許可する操作を
設定していくことになる。
参考：Meteor利用時に留意すべきセキュリティリスク

48. A
なお、Meteorには標準の
アカウント制御プラグインがある。
OAuthもしくはパスワードによる認証を
組み込むことができ、登録ユーザは「users」コレク
ション内で管理される。
詳しくはMeteor Accountsを参照

49. Fun!