Your SlideShare is downloading. ×
GR8Conf 2011: Building Progressive UIs with Grails
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

GR8Conf 2011: Building Progressive UIs with Grails


Published on

Published in: Technology, Design

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Building Progressive UIs with Grails Rob Fletcher Energized Work
  • 2. Who am I?
  • 3. Examples
  • 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’
  • 5. Designing with Progressive Enhancement
  • 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
  • 8.
  • 9. Don’t Break The Web!
  • 10. 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);
  • 11. Read and enhance markup<a href="/foo" class="popup">Click me</a>$(a.popup).click(function() {    displayInPopup(/foo); displayInPopup($(this).attr(href));    return false;});
  • 12. Form enhancements and dialogsEXAMPLE
  • 13. The X-Ray Perspective1. Map design components to basic HTML2. Build markup with simple styles & no JS3. Layer visual & interaction enhancements using JS & CSS
  • 14. Data visualisationEXAMPLE
  • 15. 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
  • 16. Varying output for AJAXdef show = { def model = // … whatever if (request.xhr) { render template: "basket", model: model } else { return model }}
  • 17. Disabling SiteMesh for AJAX<!doctype html><html> <head> <g:if test="${!request.xhr}"> <meta name="layout" content="main"> </g:if>
  • 18. Pagination -> infinite scrollEXAMPLE
  • 19. 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
  • 20. 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">
  • 21. FOUC preventionEXAMPLE
  • 22. Yepnope.jsyepnope({ test : Modernizr.geolocation, yep : normal.js, nope : [polyfill.js, wrapper.js’]});
  • 23. AJAX-enhanced paginationEXAMPLE
  • 24. 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%; }}
  • 25. What to avoid in GrailsAJAX 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
  • 27. 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>
  • 28. Thank you!