統合開発yeoman
TRANSCRIPT
統合開発ツール YEOMAN
佐川 夫美雄 @albatrosary 株式会社ゼノフィ
佐川 夫美雄
HTML5Expert.jpコントリビュータ HTML5 fun !html5jエンタープライズ部 副部長 html5j Web Platform部 knockoutjs Japan UG（仮） Sencha UG CO-ORGANIZER AngularJS Japan User Group
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
(Fumio SAGAWA)
開発環境のおはなし
http://yeoman.io/
多くのアーキテクチャをどうやって開発するか
Yeoman とは
Google社が作成した総合開発ツール群
yo(雛形作成ツール)
grunt(タスクランナー)
bower(フロントエンドパッケージマネージャ)
MODERN WORKFLOWS FOR MODERN WEBAPPS
開発の大まかな流れ
1. yo [generator] によるひな形
2. grunt server を使用しアプリケーション開発
3. grunt build によるリリースビルド
http://yeoman.io/
これはですね。。
Javaのmavenみたいなもんです もうちょっと高機能かも
インストールは簡単
使ってみる
$ npm install -g yo
generator はどのくらいある？ http://yeoman.io/community-generators.html
yo雛形作成ツール
カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View !
!
サーバサイドのアプリケーションと連動するための RESTful JSON など
View
ejs Collection Model
HTML
Single-page Application(SPA)
単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用
events
renderchange
AjaxStorage
get
setModel
TemplateViewDOM
$ yo backbone
yo雛形作成ツール
これだけで概ねの環境ができてしまう！
yo
$ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee
yoテンプレートを作成する
bowerTwitter社が作ったパッケージマネージャ
bower components はどのくらいあるか？ http://bower.io/search/
bower
依存関係およびライブラリの情報を管理するためのファイル
bower.jsonとは？
bowerbackbonejsを作るときに必要なコンポーネント
{ "name": "backbone-app", "version": "0.0.0", "dependencies": { "sass-bootstrap": "~3.0.0", "jquery": "~1.9.0", "underscore": "~1.4.3", "backbone": "~1.0.0", "requirejs": "~2.1.5", "requirejs-text": "~2.0.5", "modernizr": "~2.6.2", "backbone.localStorage": "~1.1.7" }, "devDependencies": {} }
bower
$ bower install !
このコマンドでbower.jsonに定義しているコンポーネントをダウンロードします
使い方
bower
$ bower install --save-dev [パッケージ名] !
新しいコンポーネントをダウンロードしbower.jsonにその情報を書き込みます
使い方
gruntタスクランナー
grunt で登録されているプラグインは? http://gruntjs.com/plugins
gruntタスクランナー
gruntにはpackage.jsonとGruntfile.jsが必要
gruntpackage.jsonとは？
必要なタスクプラグインを管理するためのファイル
gruntpackage.jsonとは？
{ "name": "backbone-app", "version": "0.0.0", "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-copy": "~0.4.0", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-coffee": "~0.7.0", "grunt-contrib-jst": "~0.5.0", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-compass": "~0.5.0", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-cssmin": "~0.6.0", "grunt-contrib-connect": "~0.3.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-imagemin": "~0.2.0", "grunt-contrib-watch": "~0.5.2", "grunt-mocha": "~0.4.1", "grunt-usemin": "~0.1.10", "grunt-bower-requirejs": "~0.7.0", "grunt-requirejs": "~0.4.0", "grunt-rev": "~0.1.0", "grunt-open": "~0.2.0", "load-grunt-tasks": "~0.1.0", "connect-livereload": "~0.2.0", "time-grunt": "~0.2.1", "jshint-stylish": "~0.1.3" }, "engines": { "node": ">=0.8.0" } }
grunt使い方は
$ npm install --save-dev [プラグイン名] !
新しいプラグインをダウンロードしpackage.jsonにその情報を書き込みます
gruntGruntfile.jsとは？
タスクを定義したファイルです
gruntGruntfile.jsとは？
コマンドがいろいろ定義していますが $ grunt serve $ grunt build $ grunt test これにモックアップ開発用に $ grunt mock
モック開発で効率よく
http://albatrosary.hateblo.jp/entry/2014/02/06/155004
grunt-connect-proxyの構築
$ npm install grunt-connect-proxy --save-dev
connect: { options: { port: SERVER_PORT, hostname: 'localhost' }, livereload: { ・・・ }, /* プロキシサーバの設定 */ proxies: [{ context: '/mockapi', host: 'localhost', port: '3000', https: false, changeOrigin: false }],
Gruntfile.js
grunt-easymockの構築
$ npm install grunt-easymock --save-dev
grunt.initConfig({ yeoman: yeomanConfig, /* easymockの設定 */ easymock: { mockapi: { options: { port: 3000, path: 'server/api-server', config: { routes: [ '/users/:id' ] }, }, }, },
Gruntfile.js
grunt-easymockの構築
ここで「easymock」の次の「mockapi」キーワードが重要 これとproxyで定義したcontextを一致させる !
期待するURLは
/mockapi/users/1
です。
grunt-easymockの構築
easymockをタスクに登録 grunt.task.run([ 'clean:server', 'coffee:dist', 'createDefaultTemplate', 'handlebars', 'compass:server', 'configureProxies', 'connect:livereload', 'open', 'easymock', 'watch' ]);
grunt-easymockの構築
モックサーバを構築するとめんどうなAPIサーバを構築しなくていい
簡単Single-page Application開発！
Thanks.