• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
開発スタイルのこれから for backbone
 

開発スタイルのこれから for backbone

on

  • 874 views

 

Statistics

Views

Total Views
874
Views on SlideShare
866
Embed Views
8

Actions

Likes
6
Downloads
6
Comments
0

1 Embed 8

https://cybozulive.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    開発スタイルのこれから for backbone 開発スタイルのこれから for backbone Presentation Transcript

    • 開発スタイルのこれから for backbone (powered by Yeoman) 12 / 13 / 2013 オープンソースカンファレンス.Enterprise
    • Name: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ ・html5jエンタープライズ部 副部長 ・HTML5 ハンズオン主催 ・backbone ハンズオン / css ハンズオン主催
    • html5jエンタープライズ部 http://www.html5biz.org/
    • 本日は Web 開発ツール JavaScript フレームワーク backbone Angular についてお話します http://www.html5biz.org/
    • JavaScript 開発のウェイトが増大 アプリケーション開発環境も大きく変化 業務システムエンジニアのためのHTML5勉強会#04 http://gihyo.jp/news/report/2013/09/1901
    • 従来型の Web アプリケーション Controller POJO HTML JavaScript Business Logic O/R JSP Browser アプリケーションサーバ RDBMS 1. リクエストをサーバへ送り Controller へ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得(登録・更新) 3. ページを jsp で生成しController経由でクライアントへ返却 4. 各ページでは Ajax により部分的な情報の取得
    • JavaScriptフレームワークを用いた Web アプリケーション HTML JavaScript Controller Web Storage Browser Business Logic O/R POJO アプリケーションサーバ RDBMS 1. HTML で作成された画面を表示 2. 必要な情報を REST で取得(登録・更新)し画面へ表示 3. 取得したトランザクション情報を Web Storage へ格納 4. 以後、画面と Web Storage で情報のやり取りを行う 5. 一連の業務完了後、データを REST でサーバへ送信  (Web 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
    • What s Yeoman ? http://yeoman.io/
    • Yeoman は  ・Yo  ・Grunt  ・Bower の3つのツールで構成される 「総合開発ツール郡」 です http://yeoman.io/
    • MODERN WORKFLOWS FOR MODERN WEBAPPS モダンWEBアプリケーションのためのモダンワークフロー http://yeoman.io/
    • yo によるひな形の作成 grunt server を使用しアプリケーションの開発 grunt build によるリリースビルド http://yeoman.io/
    • yo のひな形 - 393 generators http://yeoman.io/community-generators.html
    • grunt のタスク - たくさん! http://yeoman.io/
    • bower component - 6,505 component http://sindresorhus.com/bower-components/
    • ! 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/
    • 従来のフロントエンド・アプリケーション開発は jQuery でコーティング
    • コーティングがカオス
    • JavaScript フレームワークの導入 powered by Yeoman
    • フレームワークの導入は 処理を系統立てた仕組みにのせ プログラマの作業の効率化 と アプリケーションの保守性を高めること にあります
    • フレームワークを使ってロジックを整理する
    • カスタムイベントを備えた Model HTML Model のイテレーションである Collection イベントをハンドリングする View View ! ! ejs Collection Model サーバサイドのアプリケーションと連動するため の RESTful JSON など Backbone( http://backbonejs.org )
    • 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 )
    • 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 )
    • 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 )
    • Collection HTML ・使用するモデルを定義 ・Ajax ? or localStorage ? View class NotesCollection extends Backbone.Collection model: NotesModel ejs Collection Model Backbone( http://backbonejs.org )
    • 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 )
    • 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 導入のメリット 設定記述からプログラミングへ
    • 面倒なビルドは Yeoman がやってくれます
    • まとめ
    • HTML5 の到来により 今までとは異なるアーキテクチャでの実装が必要
    • アーキテクチャが変わったことにより 実装環境も大きく変える必要が当然あります
    • JavaScript フレームワークを使って 綺麗な(整理された)ソースを書こう powered by Yeoman
    • http://html5experts.jp/albatrosary/3191/
    • ご清聴ありがとうございました