開発スタイルのこれから for backbone
TRANSCRIPT
![Page 1: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/1.jpg)
開発スタイルのこれから for backbone (powered by Yeoman)
12 / 13 / 2013 オープンソースカンファレンス.Enterprise
![Page 2: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/2.jpg)
Name: !
佐川 夫美雄 @albatrosary
http://albatrosary.hateblo.jp/
・html5jエンタープライズ部 副部長 ・HTML5 ハンズオン主催 ・backbone ハンズオン / css ハンズオン主催
![Page 4: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/4.jpg)
本日は Web 開発ツール JavaScript フレームワーク
backbone Angular
についてお話します
http://www.html5biz.org/
![Page 5: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/5.jpg)
JavaScript 開発のウェイトが増大 アプリケーション開発環境も大きく変化
業務システムエンジニアのためのHTML5勉強会#04 http://gihyo.jp/news/report/2013/09/1901
![Page 6: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/6.jpg)
1. リクエストをサーバへ送り Controller へ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得(登録・更新) 3. ページを jsp で生成しController経由でクライアントへ返却 4. 各ページでは Ajax により部分的な情報の取得
従来型の Web アプリケーション
Controller
JSP
Browser
HTML JavaScript
アプリケーションサーバ RDBMS
Business Logic O/RPOJO
![Page 7: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/7.jpg)
1. HTML で作成された画面を表示 2. 必要な情報を REST で取得(登録・更新)し画面へ表示 3. 取得したトランザクション情報を Web Storage へ格納 4. 以後、画面と Web Storage で情報のやり取りを行う 5. 一連の業務完了後、データを REST でサーバへ送信 (Web Storage のデータとサーバ上のデータベースとの同期)
JavaScriptフレームワークを用いた Web アプリケーション
Controller
Browser
HTML JavaScript
アプリケーションサーバ RDBMS
Business Logic O/RPOJOWeb
Storage
![Page 8: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/8.jpg)
「次世代型のWebアプリケーションでは、基本的にはJavaScriptで多くの処理を行い、以下のような通信技術を利用して、データのみをサーバとやり取りします。」 !
JSON 1.0 JAX-RS 2.0 WebSocket 1.0
日本Oracleのエバンジェリスト寺田佳央氏(@yoshioterada)
![Page 9: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/9.jpg)
アーキテクチャの変化に伴い 開発ツールも見直されてます
![Page 10: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/10.jpg)
sublime text とか何でも Yeoman(yo, grunt, bower) Jasmine git & github travis
![Page 14: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/14.jpg)
yo によるひな形の作成 grunt server を使用しアプリケーションの開発 grunt build によるリリースビルド
http://yeoman.io/
![Page 15: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/15.jpg)
yo のひな形 - 393 generators
http://yeoman.io/community-generators.html
![Page 17: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/17.jpg)
bower component - 6,505 component
http://sindresorhus.com/bower-components/
![Page 18: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/18.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 19: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/19.jpg)
従来のフロントエンド・アプリケーション開発は jQuery でコーティング
![Page 20: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/20.jpg)
コーティングがカオス
![Page 21: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/21.jpg)
JavaScript フレームワークの導入 powered by Yeoman
![Page 22: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/22.jpg)
フレームワークの導入は 処理を系統立てた仕組みにのせ プログラマの作業の効率化
と アプリケーションの保守性を高めること
にあります
![Page 23: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/23.jpg)
フレームワークを使ってロジックを整理する
![Page 24: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/24.jpg)
カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View !
!
サーバサイドのアプリケーションと連動するための RESTful JSON など
Backbone( http://backbonejs.org )
View
ejs Collection Model
HTML
![Page 25: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/25.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 26: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/26.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 27: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/27.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 28: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/28.jpg)
Collection ・使用するモデルを定義 ・Ajax ? or localStorage ?
Backbone( http://backbonejs.org )
class NotesCollection extends Backbone.Collection model: NotesModel
View
ejs Collection Model
HTML
![Page 29: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/29.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 30: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/30.jpg)
Backbone( http://backbonejs.org )
Collection localStorage を使うためには
![Page 31: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/31.jpg)
Collection localStorage を使うためには
Backbone( http://backbonejs.org )
Collection
Web Storage
View
fetch
set
save
![Page 32: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/32.jpg)
Backbone.js 形を整え中身は jQuery underscore.js Requrejs
Backbone( http://backbonejs.org )
![Page 33: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/33.jpg)
Sass & Compass 導入のメリット
設定記述からプログラミングへ
![Page 34: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/34.jpg)
面倒なビルドは Yeoman がやってくれます
![Page 35: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/35.jpg)
まとめ
![Page 36: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/36.jpg)
HTML5 の到来により 今までとは異なるアーキテクチャでの実装が必要
![Page 37: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/37.jpg)
アーキテクチャが変わったことにより 実装環境も大きく変える必要が当然あります
![Page 38: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/38.jpg)
JavaScript フレームワークを使って 綺麗な(整理された)ソースを書こう
powered by Yeoman
![Page 40: 開発スタイルのこれから for backbone](https://reader030.vdocuments.mx/reader030/viewer/2022020217/555a8fd7d8b42a3e268b4588/html5/thumbnails/40.jpg)
ご清聴ありがとうございました