Upload
spring-io
View
1.939
Download
3
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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