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.
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a
Creative Commons Attr...
Upcoming SlideShare
Loading in …5
×

Resource Handling in Spring MVC 4.1

4,346 views

Published on

Speakers: Brian Clozel, Rossen Stoyanchev
Web / JavaScript Track

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.

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Resource Handling in Spring MVC 4.1

  1. 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/ 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/ Resource Handling In Spring MVC 4.1 Brian Clozel, Rossen Stoyanchev
  2. 2. 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/ 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
  3. 3. 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/ About the presentation • Web resource handling features in Spring Framework 4.1 • Provide context and guidance • Design choices, questions • Sample code
  4. 4. 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/ Resource Handling in Spring Framework
  5. 5. 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/ 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
  6. 6. 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/ Remaining Questions • Optimize (minify, concatenate, etc.) • Transform (sass, less, gzip) • Use CDN • Effective HTTP caching (versioned URLs) • Develop, debug, and refresh (F5) with ease
  7. 7. 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/ Comprehensive strategy
  8. 8. 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/ Spring Framework 4.1 goal
  9. 9. 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/ 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
  10. 10. 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/ 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)
  11. 11. 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/ 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
  12. 12. 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/ Yet another development
  13. 13. 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/ 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)
  14. 14. 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/ 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
  15. 15. 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/ Sagan Project Structure
  16. 16. 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/ 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
  17. 17. 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/ 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!
  18. 18. 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/ 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
  19. 19. 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/ 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”)
  20. 20. 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/ • Production Spring application • Open source github.com/spring-io/sagan • Separate talk about Sagan: “Inside spring.io a production Spring reference application” Sagan Summary
  21. 21. 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/ Sample Application github.com/SpringOne2GX-2014/spring-resource-handling
  22. 22. 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/ Demo
  23. 23. 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/ 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
  24. 24. 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/ 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)
  25. 25. 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/ 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
  26. 26. 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/ Enter Spring Framework 4.1
  27. 27. 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/ • Two new auxiliary strategies forming two chains • ResourceResolver • ResourceTransformer • New component to determine “public” resource URLs • ResourceUrlProvider • internally delegates to resolver chain Extending ResourceHttpRequestHandler
  28. 28. 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/ 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
  29. 29. 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/ 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
  30. 30. 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/ 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
  31. 31. 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/ 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
  32. 32. 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/ 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
  33. 33. 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/ 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
  34. 34. 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/ Which VersionStrategy? • ContentVersionStrategy a good default choice • automated version • per-resource “cache busting” • FixedVersionStrategy still needed • with JavaScript module loaders
  35. 35. 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/ 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
  36. 36. 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/ 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
  37. 37. 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/ Demo
  38. 38. 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/ Web configuration in dev
  39. 39. 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/ Web configuration in production
  40. 40. 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/ Handlebars Template and HTML output
  41. 41. 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/ Groovy Template and HTML output
  42. 42. 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/ Creating a Groovy Template Helper
  43. 43. 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/ HTML5 AppCache MANIFEST
  44. 44. 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/ Questions?
  45. 45. 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/ Learn More. Stay Connected Start your next app with Spring 4 and JDK8! Check out Rossen’s “Spring 4 Web applications” @springcentral | spring.io/video

×