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, appe...
Designing with Progressive      Enhancement http://filamentgroup.com/dwpe/
Is this worth the effort?• Cross-browser compatibility• SEO compliance• Mobile device support• Support for assistive devic...
Fundamentals• JavaScript and CSS separated from markup• Script reads and enhances markup• Presentational markup injected b...
dowebsitesneedtolookexactlythesameineverybrowser.com
Don’t Break The Web!
Separation of markup & behaviourMarkup:<a href="/foo” class="profile">Click me</a> <a href="/foo" onclick="return doSometh...
Read and enhance markup<a href="/foo" class="popup">Click me</a>$(a.popup).click(function() {    displayInPopup(/foo);    ...
Form enhancements and dialogsEXAMPLE
The X-Ray Perspective1. Map design components to basic HTML2. Build markup with simple styles & no JS3. Layer visual & int...
Data visualisationEXAMPLE
How can Grails help?request.xhr•  different response for AJAX requests•  render template / view•  disable SiteMesh•  forwa...
Varying output for AJAXdef show = {    def model = // … whatever    if (request.xhr) {        render template: "basket", m...
Disabling SiteMesh for AJAX<!doctype html><html>    <head>        <g:if test="${!request.xhr}">            <meta name="lay...
Pagination -> infinite scrollEXAMPLE
Test-driven progressive           enhancementUse browser capability detection to…• activate script-driven behaviour• activ...
Modernizr<html class="js flexbox canvas canvastext    webgl no-touch geolocation postmessage    no-websqldatabase indexedd...
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 fir...
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...
Resources plugin & yepnope.js<r:script disposition="head">    yepnope({        test : Modernizr.geolocation,        yep  :...
Thank you!@rfletcherEWadhockery.blogspot.comwww.energizedwork.com
Upcoming SlideShare
Loading in...5
×

GR8Conf 2011: Building Progressive UIs with Grails

4,327

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,327
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

GR8Conf 2011: Building Progressive UIs with Grails

  1. 1. Building Progressive UIs with Grails Rob Fletcher Energized Work
  2. 2. Who am I?
  3. 3. Examples gr8-examples.cloudfoundry.comgithub.com/robfletcher/gr8-examples
  4. 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. 5. Designing with Progressive Enhancement http://filamentgroup.com/dwpe/
  6. 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. 7. Fundamentals• JavaScript and CSS separated from markup• Script reads and enhances markup• Presentational markup injected by script
  8. 8. dowebsitesneedtolookexactlythesameineverybrowser.com
  9. 9. Don’t Break The Web!
  10. 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. 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. 12. Form enhancements and dialogsEXAMPLE
  13. 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. 14. Data visualisationEXAMPLE
  15. 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. 16. Varying output for AJAXdef show = { def model = // … whatever if (request.xhr) { render template: "basket", model: model } else { return model }}
  17. 17. Disabling SiteMesh for AJAX<!doctype html><html> <head> <g:if test="${!request.xhr}"> <meta name="layout" content="main"> </g:if>
  18. 18. Pagination -> infinite scrollEXAMPLE
  19. 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. 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. 21. FOUC preventionEXAMPLE
  22. 22. Yepnope.jsyepnope({ test : Modernizr.geolocation, yep : normal.js, nope : [polyfill.js, wrapper.js’]});
  23. 23. AJAX-enhanced paginationEXAMPLE
  24. 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. 25. What to avoid in GrailsAJAX tags:• g:formRemote• g:remoteField• g:remoteFunction• g:remoteLink
  26. 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. 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. 28. Thank you!@rfletcherEWadhockery.blogspot.comwww.energizedwork.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×