Your SlideShare is downloading. ×
0
フロントエンドと
バックエンドの
ビルド構成について
原 一浩 @kara_d
Play Framework 2 Meetup
自己紹介
2
原 一浩
ハラ カズヒロ
グレーティブ合同会社代表
Playはじめて&もくもく会主宰
Play JavaのCRUDプラグインを開発
Play Javaでアプリケーションを
開発運用中
http://greative.jp/
( @...
Playはじめて&もくもく会
3
playframeworkja.doorkeeper.jp
現在第21回まで開催
Scala版 8割、Java版 2割
Play Framework 2徹底入門
- JavaではじめるアジャイルWeb開発
4
実践編(4章∼7章)を担当
✦ サンプルアプリの企画から設計、構築、テ
スト、管理画面作成までを一通り
マニュアルにはない詰まりポイントとかもち
りばめら...
アジェンダ
➡ フロントエンド実装とバックエンド実装を分ける構成に
ついて
•ケース1) Play内で完結
•ケース2) 別々のリポジトリで作成 -> jsやimgをコピー
•ケース3) appとuiを分けて2つのビルドシステムを使う
•ケース...
ケース1
Play内で完結
Play内でビルド
ケース1
Play内で完結
➡ Play内でビルド
•フロントエンド世界のビルドシステムを使わない
7
project
assets/
public/
...etc
CoffeeScript
LESS
Plugin
etc...
ビルドが、ちょい...
ケース2
別々のリポジトリで作成
jsやimgをコピー
ケース2)
別々のリポジトリで作成
➡ jsやimgをコピー
9
project
public/
Frontend
JavaScript
Images
CSS
別リポジトリ
こちら内でGruntを
使うなど
ケース3
リポジトリ内でapp用とui用を分ける
2つのビルドシステムを使う
ケース3)
Playリポジトリ内でapp用とui用を分ける
➡ 2つのビルドシステムを使う
11
project
ui/
public/
Frontend
JavaScript
Images
CSS
CoffeeScript
LESS etc.....
ケース3)
Playリポジトリ内でapp用とui用を分ける
➡ ディレクトリ構成
•app/
•conf/
•public/
•ui/ -> ここ以下Grunt
app/ -> Angularとか
components/
node_module...
ケース4
sbt-web ?
sbt-web
➡ 興味深い技術群で成り立っている
•WebJars
•js-engine <- Trireme (tráiriːm) トゥラァィリィーム -> 三段櫂船
github.com/apigee/trireme
Embed Node...
現場のニーズ
➡ 動作をすぐに確認したい
➡ コピーなどを行うのはうざいので、ビルドがやって
ほしい
➡ フロントエンド側ライブラリの管理は面倒
•WebJarで、バックエンド側で解決するか?
•bower等で、フロントエンド側で解決するか?
...
ありがとうございました!
次のPlayはじめて&もくもく会は
6月半ば∼後半を考えてます
Play 2.1 はじめて&もくもく会
日本Playframeworkユーザー会
http://playframeworkja.doorkeeper.jp/
Upcoming SlideShare
Loading in...5
×

Play meet up 発表資料「フロントエンドとバックエンドのビルド構成について」

4,190

Published on

2014/05/24 Play meet up にて発表した資料です。

Published in: Internet

Transcript of "Play meet up 発表資料「フロントエンドとバックエンドのビルド構成について」"

  1. 1. フロントエンドと バックエンドの ビルド構成について 原 一浩 @kara_d Play Framework 2 Meetup
  2. 2. 自己紹介 2 原 一浩 ハラ カズヒロ グレーティブ合同会社代表 Playはじめて&もくもく会主宰 Play JavaのCRUDプラグインを開発 Play Javaでアプリケーションを 開発運用中 http://greative.jp/ ( @kara_d )
  3. 3. Playはじめて&もくもく会 3 playframeworkja.doorkeeper.jp 現在第21回まで開催 Scala版 8割、Java版 2割
  4. 4. Play Framework 2徹底入門 - JavaではじめるアジャイルWeb開発 4 実践編(4章∼7章)を担当 ✦ サンプルアプリの企画から設計、構築、テ スト、管理画面作成までを一通り マニュアルにはない詰まりポイントとかもち りばめられてます。
  5. 5. アジェンダ ➡ フロントエンド実装とバックエンド実装を分ける構成に ついて •ケース1) Play内で完結 •ケース2) 別々のリポジトリで作成 -> jsやimgをコピー •ケース3) appとuiを分けて2つのビルドシステムを使う •ケース4) sbt-web? 5 どんな構成 でビルド してます?
  6. 6. ケース1 Play内で完結 Play内でビルド
  7. 7. ケース1 Play内で完結 ➡ Play内でビルド •フロントエンド世界のビルドシステムを使わない 7 project assets/ public/ ...etc CoffeeScript LESS Plugin etc... ビルドが、ちょいおそい... フロントエンドの人がどこをい じればいいか...悩む
  8. 8. ケース2 別々のリポジトリで作成 jsやimgをコピー
  9. 9. ケース2) 別々のリポジトリで作成 ➡ jsやimgをコピー 9 project public/ Frontend JavaScript Images CSS 別リポジトリ こちら内でGruntを 使うなど
  10. 10. ケース3 リポジトリ内でapp用とui用を分ける 2つのビルドシステムを使う
  11. 11. ケース3) Playリポジトリ内でapp用とui用を分ける ➡ 2つのビルドシステムを使う 11 project ui/ public/ Frontend JavaScript Images CSS CoffeeScript LESS etc... Buildして、 /publicへ 出力 ビルドはやい... フロントエンドの人がいじる 場所が固定 アプリ内にファイル出力
  12. 12. ケース3) Playリポジトリ内でapp用とui用を分ける ➡ ディレクトリ構成 •app/ •conf/ •public/ •ui/ -> ここ以下Grunt app/ -> Angularとか components/ node_modules/ stylesheets/ -> LESSとか ui-test-public/ -> フロントの人確認用publicエリア 12 書き出す
  13. 13. ケース4 sbt-web ?
  14. 14. sbt-web ➡ 興味深い技術群で成り立っている •WebJars •js-engine <- Trireme (tráiriːm) トゥラァィリィーム -> 三段櫂船 github.com/apigee/trireme Embed Node.js inside a Java Virtual Machine 『 JVM上Rhinoは、V8よりもはるかに遅い。(いくつかのベンチマークでは、 50倍の時間がかかります。) 』 とのこと。 Nashornとかになるとどうなるんだろう? ... まだよくわかってません。 14
  15. 15. 現場のニーズ ➡ 動作をすぐに確認したい ➡ コピーなどを行うのはうざいので、ビルドがやって ほしい ➡ フロントエンド側ライブラリの管理は面倒 •WebJarで、バックエンド側で解決するか? •bower等で、フロントエンド側で解決するか? ➡ こんな風にやってます話があれば #play_ja へ 15
  16. 16. ありがとうございました! 次のPlayはじめて&もくもく会は 6月半ば∼後半を考えてます Play 2.1 はじめて&もくもく会 日本Playframeworkユーザー会 http://playframeworkja.doorkeeper.jp/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×