osc浜松 2014

2014/3/22 オープンソースカンファレンス in 浜松


!

!

佐川　夫美雄

HTML5Expert.jpコントリビュータ html5jエンタープライズ部副部長 Angularユーザ会スタッフ Sencha UG CO-ORGANIZER

@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/

Profile:


Single-page Application(SPA)

単一ページによるWebアプリケーション

ページはDOMの操作により切り替える

サーバとのやりとりはAjaxやWebSocket等を利用

何か最近話題だよね？！でもSPAって書くとお風呂になっちゃうんだよ


こんなの簡単さ！


HTML CSS

JavaScript

image

SPAを開発するには？


HTML CSS

JavaScript

Sass Compass

image



HTML CSS

JavaScript

Sass

CoffeeScript

Compass

image



HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image



HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image

Yuidoc



HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image imagemin

htmlmincssmin

jsmin

Yuidoc



HTML CSS

JavaScript

Sass

CoffeeScript

backboneunderscore

jQueryrequire

Compass

image imagemin

htmlmincssmin

jsmin

mocha chaiテスト

Yuidoc



ちょっと大変じゃない。。。


どーやって開発するの？ ┐(‾ヘ‾）┌


そこで統合開発ツールの登場です！


開発環境のおはなし

http://yeoman.io/

面倒なことは全部このおっさんにやらせちゃえばいいんだよ


Yeoman とは

Google社が作成した総合開発ツール群

yo(雛形作成ツール)

grunt(タスクランナー)

bower(フロントエンドパッケージマネージャ)

MODERN WORKFLOWS FOR MODERN WEBAPPS

Javaのmavenみたいなもんですもうちょっと高機能かも


開発の大まかな流れ

1. yo [generator] によるひな形

2. grunt server を使用しアプリケーション開発

3. grunt build によるリリースビルド


これはですね。。

Javaのmavenみたいなもんですもうちょっと高機能かも


インストールは簡単

使ってみる

$ npm install -g yo


generator はどのくらいある？ http://yeoman.io/community-generators.html

yo雛形作成ツール


$ yo backbone

yoこれだけで使いたい環境ができてしまう！

AngularだってknockoutだってChrome Apps、Firefox OS用だってあるんだぜぃ！


$ 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とは？


bower

$ bower install --save-dev [パッケージ名] !

新しいコンポーネントをダウンロードしbower.jsonにその情報を書き込みます

使い方


gruntタスクランナー

grunt で登録されているプラグインは? http://gruntjs.com/plugins


gruntタスクランナー

gruntにはpackage.jsonとGruntfile.jsが必要


gruntpackage.jsonとは？

必要なタスクプラグインを管理するためのファイル


grunt使い方は

$ npm install --save-dev [プラグイン名] !

新しいプラグインをダウンロードしpackage.jsonにその情報を書き込みます


gruntGruntfile.jsとは？

タスクを定義したファイルです


gruntGruntfile.jsとは？

いろんなタスクがあります $ grunt serve $ grunt build $ grunt test

grunt serveってやるとnodeサーバが立ち上がるんだぜぃ


Yeomanを使って効率良くSingle-page Applicationを作ろう！

結構大変だけどね。。

イカしてるだろ


続きは展示ブースにて！


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

osc浜松 2014

Technology