AngularJSorBackboneJSjsCafe vol.8@taise_515どっちがお好み?
Who am IFirst LT time for me
Yusaku Omasaプログラマー某金融系のシステム開発Twitter: @taise_515最近RubyistからJavaScripterに
ちかごろJavaScriptMV* FrameWorkっていろいろありますよね…
JavaScriptMV* FrameWorksBackbone.jsSpine.jsKnockout.jsEmber.jsAngular.jsand more ...
いろいろでてるけど結局どれつかったらいいわけ?
それなら比較してみよう全部は無理だから人気なもの2つを
according toBackbone.js 14,350Spine.js 2,357Knockout.js 3,760Ember.js 7,138Angular.js 10,266stars
according toBackbone.js 14,350Spine.js 2,357Knockout.js 3,760Ember.js 7,138Angular.js 10,26612
ということでAngularJSとBackboneJS比較してみた
AngularJSまずは
AngularJSカスタムタグ/属性によるHTMLのテンプレート化双方向バインディングによるDOMの書き換え一通りの機能がそろってる(モデル、ビュー、コントローラ、ルーティング、テンプレート)テストもサポートしてる特徴
開始処理1. ブラウザがHTMLからDOMを作る2. AngularJSがDOMを読み込む3. ng-appで指定されたタグ以下をスコープにセットする4. コンパイル5. 動的にDOMを生成する6. イベント監視して即時でDOMを更新http:...
え、コンパイルして動的にDOMを生成?AngularJS
動的にDOMを生成して、HTMLをテンプレートとして使うhttp://jsfiddle.net/taise/aaBRq/コンパイル前<p>名前:{{data}}</p>コンパイル後<p class="ng-binding">名前:</p>〜〜〜〜...
http://angularjs.org/公式サイト:TodoアプリHTML1.<div ng-controller="TodoCtrl">2. <ul>3. <li ng-repeat="todo in todos">4. <input ty...
http://angularjs.org/公式サイト:TodoアプリJavaScript1.function TodoCtrl($scope) {2. $scope.todos = [{text:あんぎゅらーを学ぶ,3. done:true}]...
コード量が少ない!チュートリアルもわかりやすい!少し難しいことをしようとしたとたん急に難しくなる!実は・・・でもAngularJS
最初は処理のイメージができない=> 仕様が膨大で学習コストが高いかもjQueryのDOM操作が推奨されない日本語のドキュメントが少ない(でも英語のものは多いです)難しさAngularJS
Formが多い=> 豊富なフィルターやバリデートが活かせるやりたいことがコンポーネントにある=> angular-uiがとても強力 (gridとか)向いてるアプリAngularJS向いていないアプリDOMをゴリゴリ操作したいもの=> ゲーム等は...
つぎはBackboneJS
シンプルなMVCパターンRESTfulなJSONインターフェースをModelが持ってる組み方が自由なため、複雑な実装も構造化しやすい日本語のドキュメントも多く学習がしやすいBackboneJS特徴
BackboneJSよくある処理パターン1. ViewがDOMとModelのイベントを監視2. DOMイベントでModelを操作3. Modelの操作で別のイベントが発火4. テンプレートを使ってModel操作をDOMに反映
Viewで監視してるイベントが起点になってるBackboneJS
BackboneJS自由度が高いので逆に見通しの悪いコードになることもベストプラクティスの理解が超重要そのためp.23の図のイメージ
ベストプラクティスを学ぶにはBackboneJS公式サンプルのTodoアプリの写経してみるBackbone.jsガイドブックの解説がとても良い=> ベストプラクティスだけでなく仕様の意図やアンチパターンまで書かれている出版社から直接購入するとP...
向いてるアプリBackboneJSJavaScriptをたくさん書くものだったらRESTful + ActiveRecordパターンと相性抜群=> 公式でもやたらRailsと併用について補足している向いていないアプリModelの項目がたくさんあ...
ほかのMV*もあるけど結局どれつかったらいいわけ?
http://todomvc.com/Todoアプリの比較ができるプロジェクトメジャーなMV*は一通りそろってる
それでもどれ使えばよいかわからないという方もいるでしょう
BackboneJSまずは からAngularJSシンプルな MV*でうれしさを感じてみるそれから をやるタイプが違うMV*で理解を深める
enjoy JavaScript & MV*
Upcoming SlideShare
Loading in …5
×

Angular js or_backbonejs

10,181 views

Published on

jsCafe vol.8 LT

Published in: Technology
0 Comments
29 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,181
On SlideShare
0
From Embeds
0
Number of Embeds
4,596
Actions
Shares
0
Downloads
0
Comments
0
Likes
29
Embeds 0
No embeds

No notes for slide

Angular js or_backbonejs

  1. 1. AngularJSorBackboneJSjsCafe vol.8@taise_515どっちがお好み?
  2. 2. Who am IFirst LT time for me
  3. 3. Yusaku Omasaプログラマー某金融系のシステム開発Twitter: @taise_515最近RubyistからJavaScripterに
  4. 4. ちかごろJavaScriptMV* FrameWorkっていろいろありますよね…
  5. 5. JavaScriptMV* FrameWorksBackbone.jsSpine.jsKnockout.jsEmber.jsAngular.jsand more ...
  6. 6. いろいろでてるけど結局どれつかったらいいわけ?
  7. 7. それなら比較してみよう全部は無理だから人気なもの2つを
  8. 8. according toBackbone.js 14,350Spine.js 2,357Knockout.js 3,760Ember.js 7,138Angular.js 10,266stars
  9. 9. according toBackbone.js 14,350Spine.js 2,357Knockout.js 3,760Ember.js 7,138Angular.js 10,26612
  10. 10. ということでAngularJSとBackboneJS比較してみた
  11. 11. AngularJSまずは
  12. 12. AngularJSカスタムタグ/属性によるHTMLのテンプレート化双方向バインディングによるDOMの書き換え一通りの機能がそろってる(モデル、ビュー、コントローラ、ルーティング、テンプレート)テストもサポートしてる特徴
  13. 13. 開始処理1. ブラウザがHTMLからDOMを作る2. AngularJSがDOMを読み込む3. ng-appで指定されたタグ以下をスコープにセットする4. コンパイル5. 動的にDOMを生成する6. イベント監視して即時でDOMを更新http://docs.angularjs.org/guide/concepts詳しくはここ(英語)AngularJS
  14. 14. え、コンパイルして動的にDOMを生成?AngularJS
  15. 15. 動的にDOMを生成して、HTMLをテンプレートとして使うhttp://jsfiddle.net/taise/aaBRq/コンパイル前<p>名前:{{data}}</p>コンパイル後<p class="ng-binding">名前:</p>〜〜〜〜〜 〜〜〜〜〜〜バインディングAngularJS
  16. 16. http://angularjs.org/公式サイト:TodoアプリHTML1.<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. 17. http://angularjs.org/公式サイト:TodoアプリJavaScript1.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. 18. コード量が少ない!チュートリアルもわかりやすい!少し難しいことをしようとしたとたん急に難しくなる!実は・・・でもAngularJS
  19. 19. 最初は処理のイメージができない=> 仕様が膨大で学習コストが高いかもjQueryのDOM操作が推奨されない日本語のドキュメントが少ない(でも英語のものは多いです)難しさAngularJS
  20. 20. Formが多い=> 豊富なフィルターやバリデートが活かせるやりたいことがコンポーネントにある=> angular-uiがとても強力 (gridとか)向いてるアプリAngularJS向いていないアプリDOMをゴリゴリ操作したいもの=> ゲーム等はjQueryの方が良いと公式ドキュメントに書いている
  21. 21. つぎはBackboneJS
  22. 22. シンプルなMVCパターンRESTfulなJSONインターフェースをModelが持ってる組み方が自由なため、複雑な実装も構造化しやすい日本語のドキュメントも多く学習がしやすいBackboneJS特徴
  23. 23. BackboneJSよくある処理パターン1. ViewがDOMとModelのイベントを監視2. DOMイベントでModelを操作3. Modelの操作で別のイベントが発火4. テンプレートを使ってModel操作をDOMに反映
  24. 24. Viewで監視してるイベントが起点になってるBackboneJS
  25. 25. BackboneJS自由度が高いので逆に見通しの悪いコードになることもベストプラクティスの理解が超重要そのためp.23の図のイメージ
  26. 26. ベストプラクティスを学ぶにはBackboneJS公式サンプルのTodoアプリの写経してみるBackbone.jsガイドブックの解説がとても良い=> ベストプラクティスだけでなく仕様の意図やアンチパターンまで書かれている出版社から直接購入するとPDFがもらえるらしい…
  27. 27. 向いてるアプリBackboneJSJavaScriptをたくさん書くものだったらRESTful + ActiveRecordパターンと相性抜群=> 公式でもやたらRailsと併用について補足している向いていないアプリModelの項目がたくさんあるものはViewとのバインディングが辛いかも
  28. 28. ほかのMV*もあるけど結局どれつかったらいいわけ?
  29. 29. http://todomvc.com/Todoアプリの比較ができるプロジェクトメジャーなMV*は一通りそろってる
  30. 30. それでもどれ使えばよいかわからないという方もいるでしょう
  31. 31. BackboneJSまずは からAngularJSシンプルな MV*でうれしさを感じてみるそれから をやるタイプが違うMV*で理解を深める
  32. 32. enjoy JavaScript & MV*

×