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

1. Building for the Web with Gradle
Eric Wendelin — Gradle Summit 2017

2. | 2
Eric Wendelin
@eriwen

3. stacktracejs.com

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
Why the web is important to Gradle
13%
87%
GITHUB PUBLIC
SOURCE BYTES
Web
Technologies
#BigQuery hFps://git.io/vQfUx

6. | 6
• Gradle + JavaScript State of the Union
• OrchestraRng JS Tools with Gradle
• Tradeoffs and ConsideraRons
Agenda

7. Gradle + JavaScript
State of the Union

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
• Full JVM — Gradle manages everything
• Full JS — NodeJS tools manage web assets
• Hybrid — Gradle orchestrates JS tools
Common Build Paradigms

10. | 10
• Full Java — Java tools manage everything
• Full JS — NodeJS tools manage web assets
• Hybrid — Gradle runs JS tools
Common Build Paradigms

11. OrchestraHng Node.js
Tools with Gradle

12. | 12
• Problem: Heterogeneous environments
• Problem: Unnecessary reprocessing of assets
• Problem: Non-incremental processing
Known OpportuniHes

13. | 13
• Problem: Heterogeneous environments
• Problem: Unnecessary reprocessing of assets
• Problem: Non-incremental processing
Known OpportuniHes

15. | 15
hFps://github.com/srs/gradle-node-plugin

16. | 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

17. | 17
• Problem: Heterogeneous environments
• Problem: Unnecessary reprocessing of assets
• Problem: Non-incremental processing
Known OpportuniHes

18. | 18
Webpack Bundling
Ad-hoc Task Demo

19. | 19
Webpack Bundling
Custom Task Demo
hFps://edub.me/summit2017-1

20. | 20
Gulp ExecuHon
hFps://edub.me/summit2017-1

21. | 21
Look Familiar?

22. | 22
• Problem: Heterogeneous environments
• Problem: Unnecessary reprocessing of assets
• Problem: Non-incremental processing
Known OpportuniHes

23. | 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

24. | 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

25. | 25
hFps://edub.me/summit2017-2
IncrementalNodeExec
// IncrementalNodeExec.java

26. --continuous

27. Tradeoffs and
ConsideraHons

28. | 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

29. | 29
• DLL Chunk Plugin recommended
• Fixed dependency versions recommended
Specific Webpack Guidance

30. | 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/

31. | 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

32. | 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

33. In Summary

34. | 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

35. | 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

36. | 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

37. | 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

38. | 38
DMs open @eriwen
Extended Q&A in #web Slack channel
QuesHons? Feedback?

39. w
Thank You
Gradle Summit 2017