Your SlideShare is downloading. ×
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
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

4,286

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Building Progressive UIs with Grails Rob Fletcher Energized Work
  • 2. Who am I?
  • 3. Examples gr8-examples.cloudfoundry.comgithub.com/robfletcher/gr8-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 http://filamentgroup.com/dwpe/
  • 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. dowebsitesneedtolookexactlythesameineverybrowser.com
  • 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!@rfletcherEWadhockery.blogspot.comwww.energizedwork.com

×