jsCafe vol.8 LT

1. AngularJS
or
BackboneJS
jsCafe vol.8
@taise_515
どっちがお好み？

2. Who am I
First LT time for me

3. Yusaku Omasa
プログラマー
某金融系のシステム開発
Twitter: @taise_515
最近RubyistからJavaScripterに

4. ちかごろ
JavaScriptMV* FrameWork
っていろいろありますよね…

5. JavaScriptMV* FrameWorks
Backbone.js
Spine.js
Knockout.js
Ember.js
Angular.js
and more ...

6. いろいろでてるけど
結局どれつかったら
いいわけ？

7. それなら比較してみよう
全部は無理だから人気なもの２つを

8. according to
Backbone.js 14,350
Spine.js 2,357
Knockout.js 3,760
Ember.js 7,138
Angular.js 10,266
stars

9. according to
Backbone.js 14,350
Spine.js 2,357
Knockout.js 3,760
Ember.js 7,138
Angular.js 10,266
1
2

10. ということで
AngularJS
と
BackboneJS
比較してみた

11. AngularJS
まずは

12. AngularJS
カスタムタグ/属性によるHTMLのテンプレート化
双方向バインディングによるDOMの書き換え
一通りの機能がそろってる
(モデル、ビュー、コントローラ、ルーティング、テンプレート)
テストもサポートしてる
特徴

13. 開始処理
1. ブラウザがHTMLからDOMを作る
2. AngularJSがDOMを読み込む
3. ng-appで指定されたタグ以下を
スコープにセットする
4. コンパイル
5. 動的にDOMを生成する
6. イベント監視して即時でDOMを更新
http://docs.angularjs.org/guide/concepts
詳しくはここ(英語)
AngularJS

14. え、コンパイルして
動的にDOMを生成？
AngularJS

15. 動的にDOMを生成して、
HTMLをテンプレートとして使う
http://jsfiddle.net/taise/aaBRq/
コンパイル前
<p>名前:{{data}}</p>
コンパイル後
<p class="ng-binding">名前:</p>
〜〜〜〜〜 〜〜〜〜〜〜
バインディング
AngularJS

16. http://angularjs.org/公式サイト:
Todoアプリ
HTML
1.<div ng-controller="TodoCtrl">
2. <ul>
3. <li ng-repeat="todo in todos">
4. <input type="checkbox" ng-model="todo.done">
5. <span class="done-{{todo.done}}">{{todo.text}}</span>
6. </li>
7. </ul>
8. <form ng-submit="addTodo()">
9. <input type="text" ng-model="todoText">
10. <input class="btn-primary" type="submit" value="add">
11. </form>
12.</div>
公式のものから少し変更してます
http://jsfiddle.net/taise/Mz2QH/4/
AngularJS

17. http://angularjs.org/公式サイト:
Todoアプリ
JavaScript
1.function TodoCtrl($scope) {
2. $scope.todos = [{text:'あんぎゅらーを学ぶ',
3. done:true}];
4.
5. $scope.addTodo = function() {
6. $scope.todos.push({text:$scope.todoText,
7. done:false});
8. $scope.todoText = '';
9. };
10.} 公式のものから少し変更してます
AngularJS

18. コード量が少ない！
チュートリアルもわかりやすい！
少し難しいことをしようとしたとたん
急に難しくなる！
実は・・・でも
AngularJS

19. 最初は処理のイメージができない
=> 仕様が膨大で学習コストが高いかも
jQueryのDOM操作が推奨されない
日本語のドキュメントが少ない
(でも英語のものは多いです)
難しさ
AngularJS

20. Formが多い
=> 豊富なフィルターやバリデートが活かせる
やりたいことがコンポーネントにある
=> angular-uiがとても強力 (gridとか)
向いてるアプリ
AngularJS
向いていないアプリ
DOMをゴリゴリ操作したいもの
=> ゲーム等はjQueryの方が良いと公式ドキュメントに書いている

21. つぎは
BackboneJS

22. シンプルなMVCパターン
RESTfulなJSONインターフェースをModelが持ってる
組み方が自由なため、複雑な実装も構造化しやすい
日本語のドキュメントも多く学習がしやすい
BackboneJS
特徴

23. BackboneJS
よくある処理パターン
1. ViewがDOMとModelの
イベントを監視
2. DOMイベントで
Modelを操作
3. Modelの操作で
別のイベントが発火
4. テンプレートを使って
Model操作をDOMに反映

24. Viewで監視してる
イベントが起点になってる
BackboneJS

25. BackboneJS
自由度が高いので
逆に見通しの悪いコードになることも
ベストプラクティスの理解が超重要
そのため
p.23の図のイメージ

26. ベストプラクティスを学ぶには
BackboneJS
公式サンプルのTodoアプリの写経してみる
Backbone.jsガイドブックの解説がとても良い
=> ベストプラクティスだけでなく
仕様の意図やアンチパターンまで書かれている
出版社から直接購入すると
PDFがもらえるらしい…

27. 向いてるアプリ
BackboneJS
JavaScriptをたくさん書くものだったら
RESTful + ActiveRecordパターンと相性抜群
=> 公式でもやたらRailsと併用について補足している
向いていないアプリ
Modelの項目がたくさんあるものはViewとの
バインディングが辛いかも

28. ほかのMV*もあるけど
結局どれつかったら
いいわけ？

29. http://todomvc.com/
Todoアプリの比較ができるプロジェクト
メジャーなMV*は一通りそろってる

30. それでも
どれ使えばよいかわからない
という方もいるでしょう

31. BackboneJSまずは から
AngularJS
シンプルな MV*でうれしさを感じてみる
それから をやる
タイプが違うMV*で理解を深める

32. enjoy JavaScript & MV*