web mock with only java tool chain
TRANSCRIPT
![Page 1: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/1.jpg)
Java だけで実現する
Web アプリモック作成環境第十三回 #渋谷java on 2015-10-10
@yukung
ツールチェイン
![Page 2: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/2.jpg)
About me
• 池田 裕介 (@yukung)
• 株式会社サイバーエージェント
• サーバサイドエンジニア
• Java とか Groovy がすきです
![Page 3: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/3.jpg)
Spring in Summer ~ 夏なのに Spring で発表しました
• コーポレートサイトに資料や動画もあるので、興味のある方はどうぞ!
• http://bit.ly/1LlKiru
![Page 4: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/4.jpg)
今日の話
![Page 5: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/5.jpg)
ちょっとした HTML モックを +jQuery で作りたい
• 素の HTML
• Ruby ツールチェインを駆使
• JavaScript ツールチェインを駆使
![Page 6: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/6.jpg)
素の HTML/CSS/JS を力技で
• さすがに辛い
![Page 7: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/7.jpg)
Ruby ツールチェインを駆使
• Sinatra + Slim + guard + livereload
• 洗練されててオシャンティな感じ
• Ruby 入れて bundler 入れて bundle init して
Gemfile 書いて config.ru 書いて app.rb 書いて…
![Page 8: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/8.jpg)
JS ツールチェインを駆使
• bower/npm, Grunt/gulp, browserify/Webpack...
• Node 入れて npm init して package.json 書いて
bower 入れて bower.json 書いて gulpfile 書いて…
• JavaScript 世界に迷い込んだらそこは未来だった
![Page 9: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/9.jpg)
JavaScript 界隈変化早くて浦島太郎状態
• Grunt はオワコン? gulp を使え?
• bower は使うな?
• さよなら CoffeeScript
![Page 10: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/10.jpg)
JavaScript 世界
ちょっとこわい
![Page 11: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/11.jpg)
われわれはジャバ世界で 生きている
![Page 12: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/12.jpg)
Java だけでなんとかなりませんかね…?
![Page 13: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/13.jpg)
ぼくたちには Spring Boot があるじゃないか!
![Page 14: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/14.jpg)
Spring Boot 1.3 の新機能 Devtools
• Auto restart
• Live reload
• https://twitter.com/making/status/619535922418184192
![Page 15: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/15.jpg)
やった!
![Page 16: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/16.jpg)
でもちょっと重量級…?
![Page 17: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/17.jpg)
やりたいこと
• HTML はテンプレートエンジン使って書きたい
• CSS/JavaScript はプリプロセッサや AltJS 使いたい
• JavaScript ライブラリ(jQueryなど)や Bootstrap
も楽に持ってきたい
• 変更を自動で検知して CSS/JS のコンパイルや変換をしてほしい
• 変更したら自動でブラウザリロードして欲しい
![Page 18: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/18.jpg)
これらを Java のツールチェインだけで
シンプルに実現したい
![Page 19: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/19.jpg)
やってみた
![Page 20: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/20.jpg)
作ってみました
• Web フロントエンドのテンプレートプロジェクト
![Page 21: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/21.jpg)
DEMOhttps://github.com/yukung/mockup-boilerplate-jvm
![Page 22: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/22.jpg)
どう実現しているか
![Page 23: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/23.jpg)
支える技術
Mock サーバ Ratpack
Template Engine Groovy Markup Template
CSS/JS Gradle Asset Pipeline
ライブラリ管理 WebJars
自動再ビルド オートリロード
Gradle Continuous Buid & livereload-jvm
複数プロセス管理 Gaffer
![Page 24: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/24.jpg)
Mock サーバ
• Ratpack
• Groovy 版の Sinatra みたいなやつ
![Page 25: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/25.jpg)
Ratpack
ratpack { bindings { module MarkupTemplateModule module AssetPipelineModule } handlers { get { render groovyMarkupTemplate(“index.gtpl", title: "My Boilerplate") } } }
![Page 26: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/26.jpg)
Template Engine
• Groovy Markup Template
• Thymeleaf や handlebars も使えます
![Page 27: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/27.jpg)
Groovy Markup Template
layout 'layout.gtpl', title: "$title", bodyContents: contents { h1 'Boilerplate' p "This is a ${$a(href: 'https://www.google.co.jp/', 'Google')}." ul { 3.times { i -‐> li "hoge$i" } } }
![Page 28: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/28.jpg)
Asset Pipeline
• Rails で有名な Asset 管理の仕組み
• CoffeeScript や Sass/Less などのコンパイル
• CSS/JS の minify や結合、圧縮など
• Grails で提供されていた Asset Pipeline プラグインが独立して Gradle から利用できるようになり、様々な JVM プロジェクトで利用可能
• https://github.com/bertramdev/asset-pipeline-core
• 詳しくは yamkazu さんの記事を
• http://qiita.com/yamkazu/items/0b92ec0ce27314253ad8
• Ratpack は Asset Pipeline を標準でサポート
![Page 29: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/29.jpg)
Asset Pipeline + Ratpack
buildscript { dependencies { classpath "com.bertramlabs.plugins:sass-‐asset-‐pipeline:2.3.0" classpath "com.bertramlabs.plugins:coffee-‐asset-‐pipeline:2.0.7" } } plugins { id "io.ratpack.ratpack-‐groovy" version "1.0.0" id "com.github.johnrengelman.shadow" version "1.2.2" id "com.bertramlabs.asset-‐pipeline" version "2.5.0" } dependencies { compile "com.bertramlabs.plugins:ratpack-‐asset-‐pipeline:2.5.1" } assets { minifyJs = true minifyCss = true }
![Page 30: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/30.jpg)
ライブラリ管理(bower の代替)
![Page 31: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/31.jpg)
WebJars
dependencies { compile "com.bertramlabs.plugins:ratpack-‐asset-‐pipeline:2.5.1" compile 'org.webjars:jquery:2.1.4' compile 'org.webjars:lodash:3.10.1' compile 'org.webjars:bootstrap-‐sass:3.3.1-‐1' }
![Page 32: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/32.jpg)
application.coffee + Asset Pipeline directive
#= require webjars/jquery/2.1.4/jquery #= require webjars/lodash/3.10.1/lodash #= require webjars/bootstrap-‐sass/3.3.1/javascripts/bootstrap #= require_self #= require_tree .
console.log "Loading Custom Javascript..."
timer = () -‐> snippet = "Timer Triggered" console.log snippet arr = [5, 10, 15] _.each arr,(element, index, arr) -‐> console.log element + ' : ' + index
setInterval timer, 1000
![Page 33: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/33.jpg)
ファイル変更監視と自動ビルド(guard、gulp.watch 代替)
• Gradle 2.5 から Continuous Build がサポート
• ファイルの変更を監視してタスクの再実行をしてくれる
• 内部的には java.nio.file.WatchService を利用しているので、Java 1.7 以上が必要
• -t オプション付きで Gradle タスクを実行する
![Page 34: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/34.jpg)
Gradle の Continuous Build
$ ./gradlew -‐t assetCompile run
![Page 35: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/35.jpg)
ブラウザのオートリロード
• livereload-jvm
• https://github.com/davidB/livereload-jvm
• これも WatchService + WebSocket を使って
livereload サーバを立ち上げる
• Gradle プラグインがある
• https://github.com/aalmiray/livereload-gradle-plugin
![Page 36: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/36.jpg)
livereload-gradle-plugin
plugins { id "org.kordamp.gradle.livereload" version "0.2.1" } liveReload { docRoot = 'build/resources/main' }
![Page 37: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/37.jpg)
複数プロセス管理
• Ruby には foreman という複数プロセスをまとめて扱える gem がある
• foreman の JVM クローンの gaffer を使う
• Procfile で扱いたいプロセスを記述する
![Page 38: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/38.jpg)
Gaffer + Procfile
$ cat Procfileapplication: ./gradlew -t assetCompile runlivereload: ./gradlew liveReload
$ lib/gaffer/bin/gaffer start -f Procfile
![Page 39: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/39.jpg)
Conclusion
• Java のツールチェインだけでもできちゃった
• でも Gradle のビルドが遅いのでちと辛い
• 現在のフロントエンド開発環境は JS のビルド環境が整ってきたこともあって、JS でやれることは JS
でやった方がよいという流れ
• 今だと npm + (browserify + gulp) or webpack が主流?
![Page 40: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/40.jpg)
Conclusion
• フロントエンドのエコシステムに詳しい人が居ない場合は一つの選択肢になるかもしれません
• 個人的には、今回の調査を通じて、結果的にフロントエンド周りのエコシステムの知識が多少付いた
• 次回は素直に JS だけでやると思いますw
![Page 41: Web mock with only Java tool chain](https://reader034.vdocuments.net/reader034/viewer/2022042600/5872db201a28ab74188b7163/html5/thumbnails/41.jpg)
Thank you all for listening!!