This document discusses progressive enhancement and how to build progressive user interfaces with Grails. It provides examples of using Grails features like request.xhr and withFormat to vary output for AJAX requests. It also covers techniques like separating markup and behavior, reading and enhancing markup with JavaScript, form enhancements, and test-driven progressive enhancement using Modernizr and yepnope.
4. What is Progressive Enhancement?
Approach to building web UIs that emphasizes:
• Semantic markup
• Separation of markup, appearance, behaviour
• Rich appearance and
behaviour applied selectively
• Adaptive design for cross-browser & cross-
device support
• Distinct from 'graceful degradation’
6. Is this worth the effort?
• Cross-browser compatibility
• SEO compliance
• Mobile device support
• Support for assistive devices e.g.
screenreaders
• Low bandwidth environments
• Maintainable structure
• Testability
7. Fundamentals
• JavaScript and CSS separated from markup
• Script reads and enhances markup
• Presentational markup injected by script
13. The X-Ray Perspective
1. Map design components to basic HTML
2. Build markup with simple styles & no JS
3. Layer visual & interaction enhancements
using JS & CSS
15. How can Grails help?
request.xhr
• different response for AJAX requests
• render template / view
• disable SiteMesh
• forward rather than redirect
withFormat
• respond with different data types
WebUtils.isIncludeRequest
• tailor response for full page or content section
16. Varying output for AJAX
def show = {
def model = // … whatever
if (request.xhr) {
render template: "basket", model: model
} else {
return model
}
}
24. Mobile-first progressive
enhancement
body {
background: url(low-res-image.png);
}
• Build for mobile devices first
@media screen and (min-width: 480px) {
• Layer up to desktop using media queries
body {
background: url(hi-res-image.png);
• }Prevent large images & supplementary
max-width: 1140px;
content sections loading
#main, #sidebar { float: left; }
#main { width: 65%; }
#sidebar { width: 35%; }
}
25. What to avoid in Grails
AJAX tags:
• g:formRemote
• g:remoteField
• g:remoteFunction
• g:remoteLink
26. Resources plugin & templates
<r:use module="div-enhance-script"/>
• Useful for highly modular apps
• Script included at end of page
• Can be used multiple times & script is
only included once