開発スタイルのこれから for backbone (powered by Yeoman)

11 / 16 / 2013 オープンソースカンファレンス in 福岡

Name: !

佐川　夫美雄 @albatrosary

http://albatrosary.hateblo.jp/

・html5jエンタープライズ部　副部長 ・HTML5 ハンズオン主催 ・backbone ハンズオン / css ハンズオン主催

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 アプリケーション

1. HTML で作成された画面を表示 2. 必要な情報を REST で取得（登録・更新）し画面へ表示 3. 取得したトランザクション情報を Web Storage へ格納 4. 以後、画面と Web Storage で情報のやり取りを行う 5. 一連の業務完了後、データを REST でサーバへ送信 　（Web Storage のデータとサーバ上のデータベースとの同期）

JavaScriptフレームワークを用いた Web アプリケーション

アーキテクチャの変化に伴い 開発ツールも見直されてます

sublime text とか何でも Yeoman(yo, grunt, bower) Jasmine git & github travis

What’s Yeoman ?

http://yeoman.io/

Yeoman は 　・Yo 　・Grunt 　・Bower の３つのツールで構成される 「Web App Development Through Tooling」

http://yeoman.io/

yo によるひな形の作成 grunt server を使用しアプリケーションの開発 grunt build によるリリースビルド

http://yeoman.io/

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 導入のメリット

設定記述からプログラミングへ

CoffeeScript の導入メリット

コーティング量が少ない JavaScript の罠に引っかからない 書き方がある程度統一される

まとめ

HTML5 の到来により 今までとは異なるアーキテクチャでの実装が必要

アーキテクチャが変わったことにより 実装環境も大きく変える必要が当然あります

JavaScript フレームワークを使って 綺麗な（整理された）ソースを書こう

powered by Yeoman

http://html5experts.jp/albatrosary/3191/

ご清聴ありがとうございました