Your SlideShare is downloading. ×
0
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Angular js or_backbonejs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Angular js or_backbonejs

8,736

Published on

jsCafe vol.8 LT

jsCafe vol.8 LT

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

No Downloads
Views
Total Views
8,736
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
28
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AngularJSorBackboneJSjsCafe vol.8@taise_515どっちがお好み?
  • 2. Who am IFirst LT time for me
  • 3. Yusaku Omasaプログラマー某金融系のシステム開発Twitter: @taise_515最近RubyistからJavaScripterに
  • 4. ちかごろJavaScriptMV* FrameWorkっていろいろありますよね…
  • 5. JavaScriptMV* FrameWorksBackbone.jsSpine.jsKnockout.jsEmber.jsAngular.jsand more ...
  • 6. いろいろでてるけど結局どれつかったらいいわけ?
  • 7. それなら比較してみよう全部は無理だから人気なもの2つを
  • 8. according toBackbone.js 14,350Spine.js 2,357Knockout.js 3,760Ember.js 7,138Angular.js 10,266stars
  • 9. according toBackbone.js 14,350Spine.js 2,357Knockout.js 3,760Ember.js 7,138Angular.js 10,26612
  • 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アプリ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. 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. コード量が少ない!チュートリアルもわかりやすい!少し難しいことをしようとしたとたん急に難しくなる!実は・・・でも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. 向いてるアプリBackboneJSJavaScriptをたくさん書くものだったらRESTful + ActiveRecordパターンと相性抜群=> 公式でもやたらRailsと併用について補足している向いていないアプリModelの項目がたくさんあるものはViewとのバインディングが辛いかも
  • 28. ほかのMV*もあるけど結局どれつかったらいいわけ?
  • 29. http://todomvc.com/Todoアプリの比較ができるプロジェクトメジャーなMV*は一通りそろってる
  • 30. それでもどれ使えばよいかわからないという方もいるでしょう
  • 31. BackboneJSまずは からAngularJSシンプルな MV*でうれしさを感じてみるそれから をやるタイプが違うMV*で理解を深める
  • 32. enjoy JavaScript & MV*

×