開発スタイルのこれから for backbone (powerd by yeoman)
DESCRIPTION
TRANSCRIPT
![Page 1: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/1.jpg)
開発スタイルのこれから for backbone (powered by Yeoman)
11 / 16 / 2013 オープンソースカンファレンス in 福岡
![Page 2: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/2.jpg)
Name: !
佐川 夫美雄 @albatrosary
http://albatrosary.hateblo.jp/
・html5jエンタープライズ部 副部長 ・HTML5 ハンズオン主催 ・backbone ハンズオン / css ハンズオン主催
![Page 3: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/3.jpg)
JavaScript 開発のウェイトが増大 アプリケーション開発環境も大きく変化
業務システムエンジニアのためのHTML5勉強会#04 http://gihyo.jp/news/report/2013/09/1901
![Page 4: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/4.jpg)
1. リクエストをサーバへ送り Controller へ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得(登録・更新) 3. ページを jsp で生成しController経由でクライアントへ返却 4. 各ページでは Ajax により部分的な情報の取得
従来型の Web アプリケーション
![Page 5: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/5.jpg)
1. HTML で作成された画面を表示 2. 必要な情報を REST で取得(登録・更新)し画面へ表示 3. 取得したトランザクション情報を Web Storage へ格納 4. 以後、画面と Web Storage で情報のやり取りを行う 5. 一連の業務完了後、データを REST でサーバへ送信 (Web Storage のデータとサーバ上のデータベースとの同期)
JavaScriptフレームワークを用いた Web アプリケーション
![Page 6: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/6.jpg)
アーキテクチャの変化に伴い 開発ツールも見直されてます
![Page 7: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/7.jpg)
sublime text とか何でも Yeoman(yo, grunt, bower) Jasmine git & github travis
![Page 9: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/9.jpg)
Yeoman は ・Yo ・Grunt ・Bower の3つのツールで構成される 「Web App Development Through Tooling」
http://yeoman.io/
![Page 10: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/10.jpg)
yo によるひな形の作成 grunt server を使用しアプリケーションの開発 grunt build によるリリースビルド
http://yeoman.io/
![Page 11: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/11.jpg)
http://yeoman.io/
!
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の非同期ローディングとモジュール化を行うライブラリ
![Page 12: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/12.jpg)
従来のフロントエンド・アプリケーション開発は jQuery でコーティング
![Page 13: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/13.jpg)
コーティングがカオス
![Page 14: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/14.jpg)
JavaScript フレームワークの導入 powered by Yeoman
![Page 15: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/15.jpg)
フレームワークの導入は 処理を系統立てた仕組みにのせ プログラマの作業の効率化
と アプリケーションの保守性を高めること
にあります
![Page 16: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/16.jpg)
フレームワークを使ってロジックを整理する
![Page 17: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/17.jpg)
カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View !
!
サーバサイドのアプリケーションと連動するための RESTful JSON など
Backbone( http://backbonejs.org )
View
ejs Collection Model
HTML
![Page 18: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/18.jpg)
ROUTER ・画面の遷移を定義する
Backbone( http://backbonejs.org )
画面 URL 処理登録画面 /#notes NotesView.render()一覧画面 /#list ListView.render()
メンテナンス画面 /#mente MenteView.render()
class NotesRouter extends Backbone.Router # "": localhost:9000 の呼び出し # "notes": localhost:9000/#notes の呼び出し # "list": localhost:9000/#list の呼び出し routes: "": "mains" "notes": "mains" "list": "lists"
View
ejs Collection Model
HTML
![Page 19: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/19.jpg)
View ・ejs を使ったレンダリング ・使用するDOM要素の定義 ・ビジネスロジック ・イベントの定義
Backbone( http://backbonejs.org )
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
View
ejs Collection Model
HTML
![Page 20: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/20.jpg)
Model ・View のデータバッファとして定義 ・バリデーションの定義
Backbone( http://backbonejs.org )
class NotesModel extends Backbone.Model defaults: id: '' title: 'title' contents: 'contents' validate: (attrs) -> return 'title is empty.' if _.isEmpty attrs.title return 'contents is empty.' if _.isEmpty attrs.contents
View
ejs Collection Model
HTML
![Page 21: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/21.jpg)
Collection ・使用するモデルを定義 ・Ajax ? or localStorage ?
Backbone( http://backbonejs.org )
class NotesCollection extends Backbone.Collection model: NotesModel
View
ejs Collection Model
HTML
![Page 22: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/22.jpg)
Collection localStorage を使うためには
Backbone( http://backbonejs.org )
bower.json { "dependencies": { "jquery": "~1.9.0", "requirejs": "~2.1.5", "backbone-amd": "~1.0.0", "Backbone.localStorage": "1.1.7", "underscore-amd": "~1.4.4", }, "devDependencies": {} }
$ bower install
View
ejs Collection Model
HTML
![Page 23: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/23.jpg)
Backbone( http://backbonejs.org )
Collection localStorage を使うためには
![Page 24: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/24.jpg)
Collection localStorage を使うためには
Backbone( http://backbonejs.org )
Collection
Web Storage
View
fetch
set
save
![Page 25: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/25.jpg)
Backbone.js 形を整え中身は jQuery underscore.js Requrejs
Backbone( http://backbonejs.org )
![Page 26: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/26.jpg)
Sass & Compass 導入のメリット
設定記述からプログラミングへ
![Page 27: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/27.jpg)
CoffeeScript の導入メリット
コーティング量が少ない JavaScript の罠に引っかからない 書き方がある程度統一される
![Page 28: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/28.jpg)
まとめ
![Page 29: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/29.jpg)
HTML5 の到来により 今までとは異なるアーキテクチャでの実装が必要
![Page 30: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/30.jpg)
アーキテクチャが変わったことにより 実装環境も大きく変える必要が当然あります
![Page 31: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/31.jpg)
JavaScript フレームワークを使って 綺麗な(整理された)ソースを書こう
powered by Yeoman
![Page 33: 開発スタイルのこれから for Backbone (powerd by Yeoman)](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b74f8a4a79596e388b4740/html5/thumbnails/33.jpg)
ご清聴ありがとうございました