Web mock with only Java tool chain

Web mock with only Java tool chain

1. 1. Java だけで実現する Web アプリモック作成環境 第十三回 #渋谷java on 2015-10-10 @yukung ツールチェイン
2. 2. About me • 池田 裕介 (@yukung) • 株式会社サイバーエージェント • サーバサイドエンジニア • Java とか Groovy がすきです
3. 3. Spring in Summer ∼ 夏なのに Spring で発表しました • コーポレートサイトに資料や動画もあるので、興 味のある方はどうぞ！ • http://bit.ly/1LlKiru
4. 4. 今日の話
5. 5. ちょっとした HTML モックを +jQuery で作りたい • 素の HTML • Ruby ツールチェインを駆使 • JavaScript ツールチェインを駆使
6. 6. 素の HTML/CSS/JS を力技で • さすがに辛い
7. 7. Ruby ツールチェインを駆使 • Sinatra + Slim + guard + livereload • 洗練されててオシャンティな感じ • Ruby 入れて bundler 入れて bundle init して Gemfile 書いて config.ru 書いて app.rb 書いて…
8. 8. JS ツールチェインを駆使 • bower/npm, Grunt/gulp, browserify/Webpack... • Node 入れて npm init して package.json 書いて bower 入れて bower.json 書いて gulpfile 書いて… • JavaScript 世界に迷い込んだらそこは未来だった
9. 9. JavaScript 界隈変化早くて浦島太郎状態 • Grunt はオワコン？ gulp を使え？ • bower は使うな？ • さよなら CoffeeScript
10. 10. JavaScript 世界 ちょっとこわい
11. 11. われわれはジャバ世界で 生きている
12. 12. Java だけでなんとかなりませんかね…？
13. 13. ぼくたちには Spring Boot があるじゃないか!
14. 14. Spring Boot 1.3 の新機能 Devtools • Auto restart • Live reload • https://twitter.com/making/ status/619535922418184192
15. 15. やった！
16. 16. でもちょっと重量級…？
17. 17. やりたいこと • HTML はテンプレートエンジン使って書きたい • CSS/JavaScript はプリプロセッサや AltJS 使いたい • JavaScript ライブラリ（jQueryなど）や Bootstrap も楽に持ってきたい • 変更を自動で検知して CSS/JS のコンパイルや変換 をしてほしい • 変更したら自動でブラウザリロードして欲しい
18. 18. これらを Java のツールチェインだけで シンプルに実現したい
19. 19. やってみた
20. 20. 作ってみました • Web フロントエンドのテンプ レートプロジェクト
21. 21. DEMO https://github.com/yukung/mockup-boilerplate-jvm
22. 22. どう実現しているか
23. 23. 支える技術 Mock サーバ Ratpack Template Engine Groovy Markup Template CSS/JS Gradle Asset Pipeline ライブラリ管理 WebJars 自動再ビルド オートリロード Gradle Continuous Buid & livereload-jvm 複数プロセス管理 Gaffer
24. 24. Mock サーバ • Ratpack • Groovy 版の Sinatra みたいなやつ
25. 25. Ratpack ratpack  {          bindings  {                  module  MarkupTemplateModule                  module  AssetPipelineModule          }          handlers  {                  get  {                          render  groovyMarkupTemplate(“index.gtpl",                                                            title:  "My  Boilerplate")                  }          }   }  
26. 26. Template Engine • Groovy Markup Template • Thymeleaf や handlebars も使えます
27. 27. 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"              }          }      }  
28. 28. 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 を標準でサポート
29. 29. 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   }  
30. 30. ライブラリ管理（bower の代替)
31. 31. 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'   }  
32. 32. 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  
33. 33. ファイル変更監視と自動ビルド（guard、gulp.watch 代替） • Gradle 2.5 から Continuous Build がサポート • ファイルの変更を監視してタスクの再実行をして くれる • 内部的には java.nio.file.WatchService を利用して いるので、Java 1.7 以上が必要 • -t オプション付きで Gradle タスクを実行する
34. 34. Gradle の Continuous Build $  ./gradlew  -­‐t  assetCompile  run  
35. 35. ブラウザのオートリロード • livereload-jvm • https://github.com/davidB/livereload-jvm • これも WatchService + WebSocket を使って livereload サーバを立ち上げる • Gradle プラグインがある • https://github.com/aalmiray/livereload-gradle- plugin
36. 36. livereload-gradle-plugin plugins  {          id  "org.kordamp.gradle.livereload"  version  "0.2.1"   }   liveReload  {          docRoot  =  'build/resources/main'   }  
37. 37. 複数プロセス管理 • Ruby には foreman という複数プロセスをまとめ て扱える gem がある • foreman の JVM クローンの gaffer を使う • Procfile で扱いたいプロセスを記述する
38. 38. Gaffer + Procfile $ cat Procfile application: ./gradlew -t assetCompile run livereload: ./gradlew liveReload $ lib/gaffer/bin/gaffer start -f Procfile
39. 39. Conclusion • Java のツールチェインだけでもできちゃった • でも Gradle のビルドが遅いのでちと辛い • 現在のフロントエンド開発環境は JS のビルド環境 が整ってきたこともあって、JS でやれることは JS でやった方がよいという流れ • 今だと npm + (browserify + gulp) or webpack が 主流？
40. 40. Conclusion • フロントエンドのエコシステムに詳しい人が居な い場合は一つの選択肢になるかもしれません • 個人的には、今回の調査を通じて、結果的にフロ ントエンド周りのエコシステムの知識が多少付い た • 次回は素直に JS だけでやると思いますｗ
41. 41. Thank you all for listening!!