GR8Conf 2011: Building Progressive UIs with Grails
Upcoming SlideShare
Loading in...5

GR8Conf 2011: Building Progressive UIs with Grails






Total Views
Views on SlideShare
Embed Views



2 Embeds 20 14 6



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

GR8Conf 2011: Building Progressive UIs with Grails GR8Conf 2011: Building Progressive UIs with Grails Presentation Transcript

  • Building Progressive UIs with Grails Rob Fletcher Energized Work
  • Who am I?
  • 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
  • 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
  • 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!