Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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 aCreative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/

Resource Handling In Spring MVC 4.1Brian Clozel, Rossen Stoyanchev

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

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

Resource Handlingin Spring Framework

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

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

Comprehensive strategy

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

Spring Framework 4.1 goal

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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)

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

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

Yet another development

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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)

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

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

Sagan Project Structure

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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!

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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”)

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

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

Sample Applicationgithub.com/SpringOne2GX-2014/spring-resource-handling

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

Demo

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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)

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

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

EnterSpring Framework 4.1

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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

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

Demo

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

Web configuration in dev

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

Web configuration in production

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

Handlebars Template and HTML output

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

Groovy Template and HTML output

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

Creating a Groovy Template Helper

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

HTML5 AppCache MANIFEST

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

Questions?

Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under aCreative 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