Embed Size (px)
Citation preview
開発スタイルのこれから for backbone (powered by Yeoman)
12 / 13 / 2013 オープンソースカンファレンス.Enterprise
Name: !
佐川 夫美雄 @albatrosary
http://albatrosary.hateblo.jp/
・html5jエンタープライズ部 副部長 ・HTML5 ハンズオン主催 ・backbone ハンズオン / css ハンズオン主催
本日は Web 開発ツール JavaScript フレームワーク
backbone Angular
についてお話します
http://www.html5biz.org/
JavaScript 開発のウェイトが増大 アプリケーション開発環境も大きく変化
業務システムエンジニアのためのHTML5勉強会#04 http://gihyo.jp/news/report/2013/09/1901
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
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
「次世代型のWebアプリケーションでは、基本的にはJavaScriptで多くの処理を行い、以下のような通信技術を利用して、データのみをサーバとやり取りします。」 !
JSON 1.0 JAX-RS 2.0 WebSocket 1.0
日本Oracleのエバンジェリスト寺田佳央氏（@yoshioterada）
アーキテクチャの変化に伴い 開発ツールも見直されてます
sublime text とか何でも Yeoman(yo, grunt, bower) Jasmine git & github travis
yo によるひな形の作成 grunt server を使用しアプリケーションの開発 grunt build によるリリースビルド
http://yeoman.io/
yo のひな形 - 393 generators
http://yeoman.io/community-generators.html
bower component - 6,505 component
http://sindresorhus.com/bower-components/
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の非同期ローディングとモジュール化を行うライブラリ
従来のフロントエンド・アプリケーション開発は jQuery でコーティング
コーティングがカオス
JavaScript フレームワークの導入 powered by Yeoman
フレームワークの導入は 処理を系統立てた仕組みにのせ プログラマの作業の効率化
と アプリケーションの保守性を高めること
にあります
フレームワークを使ってロジックを整理する
カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View !
!
サーバサイドのアプリケーションと連動するための RESTful JSON など
Backbone( http://backbonejs.org )
View
ejs Collection Model
HTML
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
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
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
Collection ・使用するモデルを定義 ・Ajax ? or localStorage ?
Backbone( http://backbonejs.org )
class NotesCollection extends Backbone.Collection model: NotesModel
View
ejs Collection Model
HTML
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
Backbone( http://backbonejs.org )
Collection localStorage を使うためには
Collection localStorage を使うためには
Backbone( http://backbonejs.org )
Collection
Web Storage
View
fetch
set
save
Backbone.js 形を整え中身は jQuery underscore.js Requrejs
Backbone( http://backbonejs.org )
Sass & Compass 導入のメリット
設定記述からプログラミングへ
面倒なビルドは Yeoman がやってくれます
まとめ
HTML5 の到来により 今までとは異なるアーキテクチャでの実装が必要
アーキテクチャが変わったことにより 実装環境も大きく変える必要が当然あります
JavaScript フレームワークを使って 綺麗な（整理された）ソースを書こう
powered by Yeoman
ご清聴ありがとうございました
