Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building the Web with Gradle

288 views

Published on

Tradeoffs, considerations, and guidance for integrating Gradle with popular JavaScript tools like Webpack and Gulp.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Building the Web with Gradle

  1. 1. Building for the Web with Gradle Eric Wendelin — Gradle Summit 2017
  2. 2. | 2 Eric Wendelin @eriwen
  3. 3. stacktracejs.com
  4. 4. | 4 Java C C++ JavaScript HTML Other Why the web is important to Gradle 6% 4% 7% 7% 21% 55% GITHUB PUBLIC SOURCE BYTES #BigQuery hFps://git.io/vQfUx
  5. 5. | 5 Why the web is important to Gradle 13% 87% GITHUB PUBLIC SOURCE BYTES Web Technologies #BigQuery hFps://git.io/vQfUx
  6. 6. | 6 • Gradle + JavaScript State of the Union • OrchestraRng JS Tools with Gradle • Tradeoffs and ConsideraRons Agenda
  7. 7. Gradle + JavaScript State of the Union
  8. 8. | 8 • Webpack for bundling • Heavy framework compeRRon • Progressive Web ApplicaRons • Yarn and npm@5.0 steps forward in JS dependency management JS tools moving fast
  9. 9. | 9 • Full JVM — Gradle manages everything • Full JS — NodeJS tools manage web assets • Hybrid — Gradle orchestrates JS tools Common Build Paradigms
  10. 10. | 10 • Full Java — Java tools manage everything • Full JS — NodeJS tools manage web assets • Hybrid — Gradle runs JS tools Common Build Paradigms
  11. 11. OrchestraHng Node.js Tools with Gradle
  12. 12. | 12 • Problem: Heterogeneous environments • Problem: Unnecessary reprocessing of assets • Problem: Non-incremental processing Known OpportuniHes
  13. 13. | 13 • Problem: Heterogeneous environments • Problem: Unnecessary reprocessing of assets • Problem: Non-incremental processing Known OpportuniHes
  14. 14. | 15 hFps://github.com/srs/gradle-node-plugin
  15. 15. | 16 • hFps://hub.docker.com/_/gradle/ • hFps://github.com/bmuschko/gradle-docker-plugin • Gradle/Docker Talk Friday @ 1:55pm • hFps://github.com/srs/gradle-node-plugin • Gradle/Node Talk Friday @ 10:20am Learn more
  16. 16. | 17 • Problem: Heterogeneous environments • Problem: Unnecessary reprocessing of assets • Problem: Non-incremental processing Known OpportuniHes
  17. 17. | 18 Webpack Bundling Ad-hoc Task Demo
  18. 18. | 19 Webpack Bundling Custom Task Demo hFps://edub.me/summit2017-1
  19. 19. | 20 Gulp ExecuHon hFps://edub.me/summit2017-1
  20. 20. | 21 Look Familiar?
  21. 21. | 22 • Problem: Heterogeneous environments • Problem: Unnecessary reprocessing of assets • Problem: Non-incremental processing Known OpportuniHes
  22. 22. | 23 • Linters like ESLint (maybe TSLint) • Asset minificaRon and compression • ExecuRng tests • Some transpilers like Babel and Sass
 (*) TypeScript is not safe w/o using its incremental compiler Web tasks that can be incremental
  23. 23. | 24 • Linters like ESLint (maybe TSLint) • Asset minificaRon and compression • ExecuRng tests • Some transpilers like Babel and Sass
 (*) TypeScript is not safe w/o using its incremental compiler Web tasks that can be incremental CAUTION
  24. 24. | 25 hFps://edub.me/summit2017-2 IncrementalNodeExec // IncrementalNodeExec.java
  25. 25. --continuous
  26. 26. Tradeoffs and ConsideraHons
  27. 27. | 28 • Don't miss out on benefits from JS tools • Use npm5 or Yarn for dependency management • Check in those lock files • Use Webpack or Gulp, but orchestrate with Gradle General Guidance
  28. 28. | 29 • DLL Chunk Plugin recommended • Fixed dependency versions recommended Specific Webpack Guidance
  29. 29. | 30 • Should not be enabled blindly • Tasks that do linking to naRve libraries (e.g. npm install) are environment specific • Symlinks mess with task output caching • SomeRmes it's faster to build than reuse (Use gradle-profiler!) Build Cache Caveats hFps://guides.gradle.org/using-build-cache/
  30. 30. | 31 • Increased mental overhead • Overhead for some single invocaRons • AddiRonal tooling investment • Rich build info (build scans/history) • BeFer average build speed • OrganizaRon Velocity Tradeoffs
  31. 31. | 32 • Make it easier for users to take advantage of unique Gradle features • Invest in gradle-node-plugin • Integrate JS features into build scans • Write beFer docs and guides • More thoroughly research pain and opportunity Short-Term PrioriHes
  32. 32. In Summary
  33. 33. | 34 • Work Avoidance • Incremental builds • Incremental tasks • Local/Shared caching • Unify front-end/back-end build processes • Take advantage of rich build history Advantages of Gradle Web OrchestraHon
  34. 34. | 35 • Requires iniRal investment • Some tasks are tricky to implement in robust ways & take advantage of Gradle features • Not pracRcal for some project types Disadvantages of Gradle Web OrchestraHon
  35. 35. | 36 More likely to benefit if: • Your project is larger • You already use Gradle • Can adopt latest Gradle and NodeJS • You have an aforemenRoned problem Consider Your Projects
  36. 36. | 37 • Write or improve an example task around your favorite node tool • Write or improve a Gradle Guide
 hFps://github.com/gradle/guides/issues/119 • File issues for gradle-node-plugin • Provide specific suggesRons in #web Slack Your ContribuHons Wanted
  37. 37. | 38 DMs open @eriwen Extended Q&A in #web Slack channel QuesHons? Feedback?
  38. 38. w Thank You Gradle Summit 2017

×