As the complexity of web and mobile apps increases, so does the importance of ensuring that your client-side resources load and execute in an optimal and efficient manner. Differences in resource loading, transforming, and fingerprinting techniques can have a dramatic impact on performance and caching. These techniques can dictate whether your users have a joyful or frustrating experience. Attend this talk to learn the SpringMVC performance techniques aimed at keeping your users happy. A video of this presentation is available from InfoQ: http://www.infoq.com/presentations/resource-spring-mvc-4-1

1. Resource Handling In Spring MVC 4.1
Brian Clozel, Rossen Stoyanchev
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

2. About the presenters
• Brian Clozel
• Spring framework committer
• Sagan maintainer
• Open source enthusiast
• Rossen Stoyanchev
• Spring framework committer
• Consulting and training for Spring teams
• Java and web development since 1998
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

3. About the presentation
• Web resource handling features in Spring Framework 4.1
• Provide context and guidance
• Design choices, questions
• Sample code
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

4. Resource Handling
in Spring Framework
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

5. Resource Handling < 4.1
• Serve static resources from any Spring Resource location
• classpath, file system, etc.
• Basic cache header management
• Expires, Cache-Control, Last-Modified
• Easy to configure
• MVC Java config and XML namespace
• Or just map ResourceHttpRequestHandler
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

6. Remaining Questions
• Optimize (minify, concatenate, etc.)
• Transform (sass, less, gzip)
• Use CDN
• Effective HTTP caching (versioned URLs)
• Develop, debug, and refresh (F5) with ease
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

7. Comprehensive strategy
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

8. Spring Framework 4.1 goal
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

9. Request for Fingerprinting URLs
• http://jira.springsource.org/browse/SPR-10310
• Based on “asset pipeline” from Ruby on Rails
• Adapt feature to Spring MVC
• build on existing resource handling mechanism
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

10. URL “Fingerprinting” ?!
• Technique for effective HTTP “cache busting”
• Version URL with hash computed from file content
• e.g. “/css/font-awesome.min-7fbe76cdac.css”
• Add aggressive cache headers, e.g. +1 year
• Resource is cached in browser (until content changes)
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

11. Full Spring MVC “Asset Pipeline” Proposal
• Independently a proposal for complete “asset pipeline”
• via @robertharrop (Spring Framework founder)
• Initial investigation lead to major fork in the road
• JavaScript build tasks offer attractive alternative
• e.g. Grunt
• huge ecosystem, many plugins of interest
• works with any backend
• Runtime vs build-time approach and trade-offs
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

12. Yet another development
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

13. Sagan: http://spring.io
• Written with Spring
• by Pivotal Labs (deep RoR knowledge) and Chris Beams
• launched during SpringOne 2GX keynote
• Aggressive deadline, some technical debt
• pay-off due prior to open-sourcing
• Improve client side
• with help from @unscriptable and @briancavalier (cujo.js fame)
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

14. Client Source Code Layout
• Modern client as 1st class citizen in a Java project
• Server and client side are each entitled to:
• dependency management
• modularity
• tests
• build artifacts (e.g. minification, concatenation)
• Use of src/main/webapp is just not adequate any more
• Common but behind the times
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

15. Sagan Project Structure
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

16. The sagan-client module
• Separate module
• Lets you follow best practices
• node.js / npm for node dependencies
• bower: 3rd party dependency management (like Maven for Java)
• curl, cram: module loading and concatenating
• gulp: build tasks
• Gradle integrated
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

17. Working with Sagan Client Sources
• We’re no longer using src/main/webapp
• How to keep the same smooth, just-hit-F5, dev experience?
• Copying files at build time, not the way to go!
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

18. How Sagan Serves Static Resources?
• Spring profiles (“dev”, “prod”, etc)
• In dev mode serve directly from source location
• i.e.
• where saganPath is initialized from a property
• In production from classpath (minified, concatenated)
• JavaScript source maps for debugging in production
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

19. Managing front-end dependencies
• WebJars: refers to “resources bundled in a jar”
• Sagan
• manage client dependencies with npm and bower
• bundle a single JAR
• Spring Boot serves from classpath:/static
• www.webjars.org
• front-end dependencies as jars from Maven central
• plus bundle client application sources (“src/main/webapp”)
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

20. Sagan Summary
• Production Spring application
• Open source github.com/spring-io/sagan
• Separate talk about Sagan:
“Inside spring.io a production Spring reference application”
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

21. Sample Application
github.com/SpringOne2GX-2014/spring-resource-handling
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

22. Demo
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

23. Demo Summary
• Bower downloads dependencies
• e.g. curl 0.8.10, jquery 2.0.3, bootstrap 3.1.1, less 1.7.3
• Gulp.js plugins
• cram, uglify, minify-css, bower-src, pngcrush, etc.
• Optimize .js, .css, images under src/ + copy to dist/
• including bower-managed sources
• Gradle-driven
• bundle dist under classpath:/static
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

24. JavaScript Build Tasks (Gulp, Grunt)
• Tremendous choice
• Rich ecosystem, continues to evolve
• Sagan switched from Grunt to Gulp in its relatively short life
• Best way to remain aligned with client trends
• Works well with any server (Java, Ruby, etc)
and client (JS, Dart, ES6, TypeScript)
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

25. How can Spring MVC help?
• Make it easy to switch between environments
• work with (un)optimized sources
• Pluggable resolution of resources
• optimized, transpiled, gzipped, etc.
• Insert versions in URLs for “cache busting”
• Produce HTML5 AppCache manifests
• Prepare links with CDN domain
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

26. Enter
Spring Framework 4.1
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

27. Extending ResourceHttpRequestHandler
• Two new auxiliary strategies forming two chains
• ResourceResolver
• ResourceTransformer
• New component to determine “public” resource URLs
• ResourceUrlProvider
• internally delegates to resolver chain
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

28. Built-in Resolvers
• PathResourceResolver
• simple path lookup under configured locations
• VersionResourceResolver
• resolution with version in URL path
• GzipResourceResolver
• lookup with.gz extension when “Accept-Encoding: gzip”
• CachingResourceResolver
• caching of resolved resource
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

29. Built-in Transformers
• CssLinkResourceTransformer
• update links in CSS file (e.g. insert version)
• AppCacheManifestTransformer
• update links in HTML5 AppCache manifest
• insert comment with content-based hash
• CachingResourceTransformer
• caching of transformed resource
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

30. Resource URLs
• No longer a simple location-relative paths
• e.g. may need to insert version
• ResourceResolver expected to
• resolve resource
• prepare “public” URL
• ResourceUrlProvider
• detects resource handler mappings on startup
• returns “public” resource URL or null if not a resource URL
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

31. How to render resource URLs in views?
• ResourceUrlEncodingFilter
• re-writes resource URLs
• uses servlet response wrapper (overrides encodeUrl)
• Works with JSP, FreeMarker, Velocity
• and wherever response.encodeUrl is in use
• Alternatively use ResourceUrlProvider directly
• MVC Java config declares “mvcResourceUrlProvider” bean
• also exposed as request attribute via interceptor
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

32. How to render resource URLs in resources?
• Resource can have embedded URLs
• e.g. @import in CSS file
• Use resource transformers to update URLs
• CssLinkResourceTransformer
• AppCacheManifestTransformer
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

33. VersionResourceResolver
• Configured with one or more version strategies
• mapped by pattern
• ContentVersionStrategy
• a.k.a “fingerprinting” URLs
• FixedVersionStrategy
• version from property file, current date, Github commit sha, etc.
• inserted as prefix in the URL path
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

34. Which VersionStrategy?
• ContentVersionStrategy a good default choice
• automated version
• per-resource “cache busting”
• FixedVersionStrategy still needed
• with JavaScript module loaders
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

35. Where we draw the line for the built-in support
• Enable flexible resource resolution
• Runtime transformation only where absolutely needed
• e.g. update links inside CSS
• Support URL versioning as first class feature
• fingerprinting, fixed version, etc.
• Work well with JavaScript build plugins
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

36. Can Full “Asset Pipeline” Be Supported?
• Yes, one example already exists
• WUIC (http://wuic.github.io/)
• The foundation is flexible for any approach
• use any resolvers, transformers
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

37. Demo
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

38. Web configuration in dev
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

39. Web configuration in production
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

40. Handlebars Template and HTML output
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

41. Groovy Template and HTML output
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

42. Creating a Groovy Template Helper
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

43. HTML5 AppCache MANIFEST
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

44. Questions?
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

45. Learn More. Stay Connected
Start your next app with
Spring 4 and JDK8!
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Check out Rossen’s
“Spring 4 Web applications”
@springcentral | spring.io/video