Java だけで実現する

Web アプリモック作成環境第十三回 #渋谷java on 2015-10-10

@yukung

ツールチェイン

About me

• 池田　裕介 (@yukung)

• 株式会社サイバーエージェント

• サーバサイドエンジニア

• Java とか Groovy がすきです

Spring in Summer ～ 夏なのに Spring で発表しました

• コーポレートサイトに資料や動画もあるので、興味のある方はどうぞ！

• http://bit.ly/1LlKiru

今日の話

ちょっとした HTML モックを +jQuery で作りたい

• 素の HTML

• Ruby ツールチェインを駆使

• JavaScript ツールチェインを駆使

素の HTML/CSS/JS を力技で

• さすがに辛い

Ruby ツールチェインを駆使

• Sinatra + Slim + guard + livereload

• 洗練されててオシャンティな感じ

• Ruby 入れて bundler 入れて bundle init して

Gemfile 書いて config.ru 書いて app.rb 書いて…

JS ツールチェインを駆使

• bower/npm, Grunt/gulp, browserify/Webpack...

• Node 入れて npm init して package.json 書いて

bower 入れて bower.json 書いて gulpfile 書いて…

• JavaScript 世界に迷い込んだらそこは未来だった

JavaScript 界隈変化早くて浦島太郎状態

• Grunt はオワコン？ gulp を使え？

• bower は使うな？

• さよなら CoffeeScript

JavaScript 世界

ちょっとこわい

われわれはジャバ世界で 生きている

Java だけでなんとかなりませんかね…？

ぼくたちには Spring Boot があるじゃないか!

Spring Boot 1.3 の新機能 Devtools

• Auto restart

• Live reload

• https://twitter.com/making/status/619535922418184192

やった！

でもちょっと重量級…？

やりたいこと

• HTML はテンプレートエンジン使って書きたい

• CSS/JavaScript はプリプロセッサや AltJS 使いたい

• JavaScript ライブラリ（jQueryなど）や Bootstrap

も楽に持ってきたい

• 変更を自動で検知して CSS/JS のコンパイルや変換をしてほしい

• 変更したら自動でブラウザリロードして欲しい

これらを Java のツールチェインだけで

シンプルに実現したい

やってみた

作ってみました

• Web フロントエンドのテンプレートプロジェクト

DEMOhttps://github.com/yukung/mockup-boilerplate-jvm

どう実現しているか

支える技術

Mock サーバ Ratpack

Template Engine Groovy Markup Template

CSS/JS Gradle Asset Pipeline

ライブラリ管理 WebJars

自動再ビルド オートリロード

Gradle Continuous Buid & livereload-jvm

複数プロセス管理 Gaffer

Mock サーバ

• Ratpack

• Groovy 版の Sinatra みたいなやつ

Ratpack

ratpack  {          bindings  {                  module  MarkupTemplateModule                  module  AssetPipelineModule          }          handlers  {                  get  {                          render  groovyMarkupTemplate(“index.gtpl",                                                            title:  "My  Boilerplate")                  }          }  }  

Template Engine

• Groovy Markup Template

• Thymeleaf や handlebars も使えます

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"              }          }      }  

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 を標準でサポート

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  }  

ライブラリ管理（bower の代替)

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'  }  

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  

ファイル変更監視と自動ビルド（guard、gulp.watch 代替）

• Gradle 2.5 から Continuous Build がサポート

• ファイルの変更を監視してタスクの再実行をしてくれる

• 内部的には java.nio.file.WatchService を利用しているので、Java 1.7 以上が必要

• -t オプション付きで Gradle タスクを実行する

Gradle の Continuous Build

$  ./gradlew  -­‐t  assetCompile  run  

ブラウザのオートリロード

• livereload-jvm

• https://github.com/davidB/livereload-jvm

• これも WatchService + WebSocket を使って

livereload サーバを立ち上げる

• Gradle プラグインがある

• https://github.com/aalmiray/livereload-gradle-plugin

livereload-gradle-plugin

plugins  {          id  "org.kordamp.gradle.livereload"  version  "0.2.1"  }  liveReload  {          docRoot  =  'build/resources/main'  }  

複数プロセス管理

• Ruby には foreman という複数プロセスをまとめて扱える gem がある

• foreman の JVM クローンの gaffer を使う

• Procfile で扱いたいプロセスを記述する

Gaffer + Procfile

$ cat Procfileapplication: ./gradlew -t assetCompile runlivereload: ./gradlew liveReload

$ lib/gaffer/bin/gaffer start -f Procfile

Conclusion

• Java のツールチェインだけでもできちゃった

• でも Gradle のビルドが遅いのでちと辛い

• 現在のフロントエンド開発環境は JS のビルド環境が整ってきたこともあって、JS でやれることは JS

でやった方がよいという流れ

• 今だと npm + (browserify + gulp) or webpack が主流？

Conclusion

• フロントエンドのエコシステムに詳しい人が居ない場合は一つの選択肢になるかもしれません

• 個人的には、今回の調査を通じて、結果的にフロントエンド周りのエコシステムの知識が多少付いた

• 次回は素直に JS だけでやると思いますｗ

Thank you all for listening!!