Download to read offline
Uploaded byEric Wendelin
Building the Web with Gradle
The document discusses the integration of web technologies with Gradle, emphasizing the orchestration of JavaScript tools and addressing common challenges like heterogeneous environments and non-incremental processing. It provides guidance on using Webpack, Yarn, and NPM for dependency management alongside Gradle, promoting incremental builds and caching for improved performance. The presentation emphasizes the importance of project scale and existing tool adoption, seeking contributions for enhancing Gradle's web capabilities.
More Related Content
Similar to Building the Web with Gradle
![[4developers2016] The ultimate mobile DX using JS as a primary language (Fato...](https://cdn.slidesharecdn.com/ss_thumbnails/ultimatedxusingjsasaprimarylanguage2-160531144318-thumbnail.jpg?width=640&height=640&fit=bounds)
Building the Web with Gradle
- 1. Building for theWeb with Gradle Eric Wendelin — Gradle Summit 2017
- 2.
- 3.
- 4. | 4 Java C C++ JavaScript HTML Other Why theweb is important to Gradle 6% 4% 7% 7% 21% 55% GITHUB PUBLIC SOURCE BYTES #BigQuery hFps://git.io/vQfUx
- 5. | 5 Why theweb 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 Stateof the Union
- 8. | 8 • Webpackfor bundling • Heavy framework compeRRon • Progressive Web ApplicaRons • Yarn and npm@5.0 steps forward in JS dependency management JS tools moving fast
- 9. | 9 • FullJVM — Gradle manages everything • Full JS — NodeJS tools manage web assets • Hybrid — Gradle orchestrates JS tools Common Build Paradigms
- 10. | 10 • FullJava — Java tools manage everything • Full JS — NodeJS tools manage web assets • Hybrid — Gradle runs JS tools Common Build Paradigms
- 11.
- 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.
- 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-hocTask Demo
- 19. | 19 Webpack Bundling CustomTask Demo hFps://edub.me/summit2017-1
- 20.
- 21.
- 22. | 22 • Problem:Heterogeneous environments • Problem: Unnecessary reprocessing of assets • Problem: Non-incremental processing Known OpportuniHes
- 23. | 23 • Linterslike 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 • Linterslike 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.
- 26.
- 27.
- 28. | 28 • Don'tmiss 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 • DLLChunk Plugin recommended • Fixed dependency versions recommended Specific Webpack Guidance
- 30. | 30 • Shouldnot 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 • Increasedmental overhead • Overhead for some single invocaRons • AddiRonal tooling investment • Rich build info (build scans/history) • BeFer average build speed • OrganizaRon Velocity Tradeoffs
- 32. | 32 • Makeit 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.
- 34. | 34 • WorkAvoidance • 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 • RequiresiniRal 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 likelyto 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 • Writeor 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.