SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
フロントエンドと
バックエンドの
ビルド構成について
原 一浩 @kara_d
Play Framework 2 Meetup
自己紹介
2
原 一浩
ハラ カズヒロ
グレーティブ合同会社代表
Playはじめて&もくもく会主宰
Play JavaのCRUDプラグインを開発
Play Javaでアプリケーションを
開発運用中
http://greative.jp/
( @kara_d )
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つのビルドシステムを使う
•ケース4) sbt-web?
5
どんな構成
でビルド
してます?
ケース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...
Buildして、
/publicへ
出力
ビルドはやい...
フロントエンドの人がいじる
場所が固定
アプリ内にファイル出力
ケース3)
Playリポジトリ内でapp用とui用を分ける
➡ ディレクトリ構成
•app/
•conf/
•public/
•ui/ -> ここ以下Grunt
app/ -> Angularとか
components/
node_modules/
stylesheets/ -> LESSとか
ui-test-public/ -> フロントの人確認用publicエリア
12
書き出す
ケース4
sbt-web ?
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
現場のニーズ
➡ 動作をすぐに確認したい
➡ コピーなどを行うのはうざいので、ビルドがやって
ほしい
➡ フロントエンド側ライブラリの管理は面倒
•WebJarで、バックエンド側で解決するか?
•bower等で、フロントエンド側で解決するか?
➡ こんな風にやってます話があれば #play_ja へ
15
ありがとうございました!
次のPlayはじめて&もくもく会は
6月半ば∼後半を考えてます
Play 2.1 はじめて&もくもく会
日本Playframeworkユーザー会
http://playframeworkja.doorkeeper.jp/

Mais conteúdo relacionado

Mais de Kazuhiro Hara

buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話Kazuhiro Hara
 
Clojure.tokyo.descjop
Clojure.tokyo.descjopClojure.tokyo.descjop
Clojure.tokyo.descjopKazuhiro Hara
 
SwaggerとAPIのデザイン
SwaggerとAPIのデザインSwaggerとAPIのデザイン
SwaggerとAPIのデザインKazuhiro Hara
 
React VR ことはじめ
React VR ことはじめReact VR ことはじめ
React VR ことはじめKazuhiro Hara
 
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようReact系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようKazuhiro Hara
 
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状についてClojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状についてKazuhiro Hara
 
Re-frame and A-Frame
Re-frame and A-FrameRe-frame and A-Frame
Re-frame and A-FrameKazuhiro Hara
 
ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介Kazuhiro Hara
 
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境についてKazuhiro Hara
 
Cryogenでサイトつくろーじぇん
CryogenでサイトつくろーじぇんCryogenでサイトつくろーじぇん
CryogenでサイトつくろーじぇんKazuhiro Hara
 
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうKazuhiro Hara
 
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 JavaWebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 JavaKazuhiro Hara
 
第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会Kazuhiro Hara
 
-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会Kazuhiro Hara
 
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードPlay framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードKazuhiro Hara
 
sbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころsbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころKazuhiro Hara
 
Playbay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイPlaybay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイKazuhiro Hara
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションKazuhiro Hara
 
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocketPlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocketKazuhiro Hara
 
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...Kazuhiro Hara
 

Mais de Kazuhiro Hara (20)

buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
 
Clojure.tokyo.descjop
Clojure.tokyo.descjopClojure.tokyo.descjop
Clojure.tokyo.descjop
 
SwaggerとAPIのデザイン
SwaggerとAPIのデザインSwaggerとAPIのデザイン
SwaggerとAPIのデザイン
 
React VR ことはじめ
React VR ことはじめReact VR ことはじめ
React VR ことはじめ
 
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようReact系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
 
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状についてClojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
 
Re-frame and A-Frame
Re-frame and A-FrameRe-frame and A-Frame
Re-frame and A-Frame
 
ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介
 
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
 
Cryogenでサイトつくろーじぇん
CryogenでサイトつくろーじぇんCryogenでサイトつくろーじぇん
Cryogenでサイトつくろーじぇん
 
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろう
 
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 JavaWebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 Java
 
第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会
 
-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会
 
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードPlay framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
 
sbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころsbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころ
 
Playbay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイPlaybay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイ
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
 
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocketPlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
 
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
 

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