Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 開発スタイルのこれから for Backbone (powerd by Yeoman)
Ähnlich wie 開発スタイルのこれから for Backbone (powerd by Yeoman) (20)
Mehr von Fumio SAGAWA
Kürzlich hochgeladen
Kürzlich hochgeladen (7)
開発スタイルのこれから for Backbone (powerd by Yeoman)
- 1. 開発スタイルのこれから for backbone (powered by Yeoman) 11 / 16 / 2013 オープンソースカンファレンス in 福岡
- 2. Name: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ ・html5jエンタープライズ部 副部長 ・HTML5 ハンズオン主催 ・backbone ハンズオン / css ハンズオン主催
- 4. 従来型の Web アプリケーション 1. リクエストをサーバへ送り Controller へ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得（登録・更新） 3. ページを jsp で生成しController経由でクライアントへ返却 4. 各ページでは Ajax により部分的な情報の取得
- 5. JavaScriptフレームワークを用いた Web アプリケーション 1. HTML で作成された画面を表示 2. 3. 4. 5. 必要な情報を REST で取得（登録・更新）し画面へ表示 取得したトランザクション情報を Web Storage へ格納 以後、画面と Web Storage で情報のやり取りを行う 一連の業務完了後、データを REST でサーバへ送信 （Web Storage のデータとサーバ上のデータベースとの同期）
- 7. sublime text とか何でも Yeoman(yo, grunt, bower) Jasmine git & github travis
- 8. What s Yeoman ? http://yeoman.io/
- 9. Yeoman は ・Yo ・Grunt ・Bower の３つのツールで構成される 「Web App Development Through Tooling」 http://yeoman.io/
- 10. yo によるひな形の作成 grunt server を使用しアプリケーションの開発 grunt build によるリリースビルド http://yeoman.io/
- 11. ! CoffeeScript (http://coffeescript.org/):JavaScript を Ruby っぽくした言語 Sass (http://sass-lang.com/):CSS ファイルを作成するために扱うプログラム のようなもの（Ruby が必要） Compass (http://compass-style.org/):CSS オーサリングフレームワーク。 Sass ベースの Sass をより便利に使えるようになったものが compass です （Rubyが必要） Angular (http://angularjs.org/):JavaScript の MVCフレームワーク PhantomJS (https://code.google.com/p/phantomjs/):WebKitをヘッドレス 化してJavaScript API を利用できるようにしたツール Mocha (http://visionmedia.github.io/mocha/):Node.js 上もしくはブラウザ 上で動く JavaScript テストフレームワーク Twitter BootStrap (http://twitter.github.io/bootstrap/):Twitter社が提供す るCSSフレームワーク RequireJS (http://requirejs.org/):JSの非同期ローディングとモジュール化を 行うライブラリ http://yeoman.io/
- 13. コーティングがカオス
- 14. JavaScript フレームワークの導入 powered by Yeoman
- 17. カスタムイベントを備えた Model HTML Model のイテレーションである Collection イベントをハンドリングする View View ! ! ejs Collection Model サーバサイドのアプリケーションと連動するため の RESTful JSON など Backbone( http://backbonejs.org )
- 18. ROUTER ・画面の遷移を定義する HTML /#notes NotesView.render() /#list ListView.render() メンテナンス画面 Collection Model 処理 一覧画面 ejs URL 登録画面 View 画面 /#mente MenteView.render() class NotesRouter extends Backbone.Router # "": localhost:9000 の呼び出し # "notes": localhost:9000/#notes の呼び出し # "list": localhost:9000/#list の呼び出し routes: "": "mains" "notes": "mains" "list": "lists" Backbone( http://backbonejs.org )
- 19. View ・ejs を使ったレンダリング HTML View ejs Collection Model ・使用するDOM要素の定義 ・ビジネスロジック ・イベントの定義 class NotesView extends Backbone.View el: $ "#main" template: JST["app/scripts/templates/notes.ejs"] events: 'click #update': '_onClickUpdate' 'click #added': '_onClickAdded' 'click #deleteAll': '_onClickDeleteAll' render: -> $("#notes").html @template this Backbone( http://backbonejs.org )
- 20. Model HTML class NotesModel extends Backbone.Model defaults: id: '' title: 'title' View ejs ・View のデータバッファとして定義 ・バリデーションの定義 Collection Model contents: 'contents' validate: (attrs) -> return 'title is empty.' if _.isEmpty attrs.title return 'contents is empty.' if _.isEmpty attrs.contents Backbone( http://backbonejs.org )
- 21. Collection HTML ・使用するモデルを定義 ・Ajax ? or localStorage ? View class NotesCollection extends Backbone.Collection model: NotesModel ejs Collection Model Backbone( http://backbonejs.org )
- 22. Collection HTML localStorage を使うためには bower.json { "dependencies": { "jquery": " 1.9.0", "requirejs": " 2.1.5", "backbone-amd": " 1.0.0", View ejs "Backbone.localStorage": "1.1.7", Collection Model "underscore-amd": " 1.4.4", }, "devDependencies": {} } $ bower install Backbone( http://backbonejs.org )
- 26. Sass & Compass 導入のメリット 設定記述からプログラミングへ
- 28. まとめ
- 33. ご清聴ありがとうございました