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.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
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!