開発スタイルのこれから 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
従来型の Web アプリケーション

1. リクエストをサーバへ送り Controller へ
2. Controllerは必要な情報を
POJO → Business Logic →O/Rマッパー → Database
で取得(登録・更新)
...
JavaScriptフレームワークを用いた
Web アプリケーション

1. HTML で作成された画面を表示
2.
3.
4.
5.

必要な情報を REST で取得(登録・更新)し画面へ表示
取得したトランザクション情報を Web Stor...
アーキテクチャの変化に伴い
開発ツールも見直されてます
sublime text とか何でも
Yeoman(yo, grunt, bower)
Jasmine
git & github
travis
What s Yeoman ?

http://yeoman.io/
Yeoman は
 ・Yo
 ・Grunt
 ・Bower
の3つのツールで構成される
「Web App Development Through Tooling」

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

http://yeoman.io/
!
CoffeeScript (http://coffeescript.org/):JavaScript を Ruby っぽくした言語
Sass (http://sass-lang.com/):CSS ファイルを作成するために扱うプログラム
のよう...
従来のフロントエンド・アプリケーション開発は
jQuery でコーティング
コーティングがカオス
JavaScript フレームワークの導入
powered by Yeoman
フレームワークの導入は
処理を系統立てた仕組みにのせ

プログラマの作業の効率化
と
アプリケーションの保守性を高めること
にあります
フレームワークを使ってロジックを整理する
カスタムイベントを備えた Model
HTML

Model のイテレーションである Collection
イベントをハンドリングする View

View

!
!

ejs

Collection
Model

サーバサイドのアプリケーショ...
ROUTER
・画面の遷移を定義する
HTML

/#notes

NotesView.render()

/#list

ListView.render()

メンテナンス画面

Collection
Model

処理

一覧画面

ejs...
View
・ejs を使ったレンダリング
HTML

View

ejs

Collection
Model

・使用するDOM要素の定義
・ビジネスロジック
・イベントの定義
class NotesView extends Backbone....
Model
HTML

class NotesModel extends Backbone.Model
defaults:
id: ''
title: 'title'

View

ejs

・View のデータバッファとして定義
・バリデーシ...
Collection
HTML

・使用するモデルを定義
・Ajax ? or localStorage ?

View
class NotesCollection extends Backbone.Collection
model: Note...
Collection
HTML

localStorage を使うためには
bower.json
{
"dependencies": {
"jquery": " 1.9.0",
"requirejs": " 2.1.5",
"backbone-...
Collection
localStorage を使うためには

Backbone( http://backbonejs.org )
Collection
localStorage を使うためには

fetch
View

set
save

Collection

Web
Storage

Backbone( http://backbonejs.org )
Backbone.js 形を整え中身は
jQuery
underscore.js
Requrejs
Backbone( http://backbonejs.org )
Sass & Compass 導入のメリット

設定記述からプログラミングへ
CoffeeScript の導入メリット
コーティング量が少ない
JavaScript の罠に引っかからない
書き方がある程度統一される
まとめ
HTML5 の到来により
今までとは異なるアーキテクチャでの実装が必要
アーキテクチャが変わったことにより
実装環境も大きく変える必要が当然あります
JavaScript フレームワークを使って
綺麗な(整理された)ソースを書こう
powered by Yeoman
http://html5experts.jp/albatrosary/3191/
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

1,612 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,612
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
8
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

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

×