GR8Conf 2011: Building Progressive UIs with Grails

Building Progressive UIs with Grails Rob Fletcher Energized Work

Who am I?

Examples gr8-examples.cloudfoundry.comgithub.com/robfletcher/gr8-examples

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’

Designing with Progressive Enhancement http://filamentgroup.com/dwpe/

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

Fundamentals• JavaScript and CSS separated from markup• Script reads and enhances markup• Presentational markup injected by script

dowebsitesneedtolookexactlythesameineverybrowser.com

Don’t Break The Web!

Separation of markup & behaviourMarkup:<a href="/foo” class="profile">Click me</a> <a href="/foo" onclick="return doSomething()"> Click meExternal script file:</a> $(a.profile).click(doSomething);

Read and enhance markup<a href="/foo" class="popup">Click me</a>$(a.popup).click(function() { displayInPopup(/foo); displayInPopup($(this).attr(href)); return false;});

Form enhancements and dialogsEXAMPLE

The X-Ray Perspective1. Map design components to basic HTML2. Build markup with simple styles & no JS3. Layer visual & interaction enhancements using JS & CSS

Data visualisationEXAMPLE

How can Grails help?request.xhr• different response for AJAX requests• render template / view• disable SiteMesh• forward rather than redirectwithFormat• respond with different data typesWebUtils.isIncludeRequest• tailor response for full page or content section

Varying output for AJAXdef show = { def model = // … whatever if (request.xhr) { render template: "basket", model: model } else { return model }}

Disabling SiteMesh for AJAX<!doctype html><html> <head> <g:if test="${!request.xhr}"> <meta name="layout" content="main"> </g:if>

Pagination -> infinite scrollEXAMPLE

Test-driven progressive enhancementUse browser capability detection to…• activate script-driven behaviour• activate polyfills on less capable browsers• selectively load JavaScript and CSS files• apply advanced CSS rules to capable browsers

Modernizr<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange.dialog {if (Modernizr.geolocation) { rgba history draganddrop no-websockets background-color: #ccc; hsla multiplebgs backgroundsize // use native geolocation borderimage borderradius boxshadow}} else { textshadow opacity no-cssanimations.rgba .dialog cssgradients no-cssreflections csscolumns { // activate JavaScript polyfill csstransforms no-csstransforms3d0, 0.3); background-color: rgba(0, 0,} csstransitions fontface video audio} localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

FOUC preventionEXAMPLE

Yepnope.jsyepnope({ test : Modernizr.geolocation, yep : normal.js, nope : [polyfill.js, wrapper.js’]});

AJAX-enhanced paginationEXAMPLE

Mobile-first progressive enhancementbody { 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%; }}

What to avoid in GrailsAJAX tags:• g:formRemote• g:remoteField• g:remoteFunction• g:remoteLink

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

Resources plugin & yepnope.js<r:script disposition="head"> yepnope({ test : Modernizr.geolocation, yep : "${r.resource(uri: normal.js)}", nope : [ "${r.resource(uri: polyfill.js)}", "${r.resource(uri: wrapper.js)}" ] });</r:script>

Thank you!@rfletcherEWadhockery.blogspot.comwww.energizedwork.com

GR8Conf 2011: Building Progressive UIs with Grails

by GR8Conf

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 20

Statistics

GR8Conf 2011: Building Progressive UIs with Grails Presentation Transcript

http://links.jetztgrad.net	14
http://universegroovygrails.blogspot.com	6