This document discusses how to build hipster-friendly web applications using Grails and front-end tools. It introduces Vert.x for offloading expensive work, Handlebars for templating, and implementing single page applications with mirrored routing and dual rendering. Front-end build tools like Grunt, Brunch, and CodeKit are also covered. Templates can be reused across views, and Handlebars integrates with Grails through a plugin.

1. GRAILS FOR
HIPSTERS
ROB FLETCHER
@rfletcherEW

2. who am I?
• Associate at Energized Work
• Currently at tv.sky.com
• Author of Betamax & various Grails plugins
• Into Grails before it was mainstream

3. javascript 2006

4. javascript 2012

5. is grails hipster-friendly?

6. enterprise development

7. hipster development

8. demo time…
bit.ly/TWdn1r
192.168.1.57:8080
git.io/hipsteroid

9. async processing

10. push data
vert.x
grails app
bus

11. offload expensive work
vert.x
Grails app
grails app vert.x app
bus
AJAX
HTTP push
HTTP
202 JSON
POST

12. one request…n responses
vert.x
Grails app
grails app vert.x app
bus
AJAX
HTTP
HTTP
202
POST

13. other options
• Atmosphere / Comet
• Grails events-push plugin
• Grails Servlet 3.0 support

14. front-end tooling

15. not invented here
the philosophy of social, corporate, or
institutional cultures that avoid using or
buying already existing products, research,
standards, or knowledge because of their
external origins
Wikipedia

16. build & packaging tools
brunch.io
jamjs.org
yeoman.io
gruntjs.com
livereload.com
ender.jit.su
twitter.github.com/bower
incident57.com/codekit

17. tl;dr - here’s a list…
github.com/codylindley/frontend-tools

18. codekit demo
LESS CSS bundled / cached
CoffeeScript JavaScript bundled / cached
CodeKit Resources
plugin

19. testing

20. dual-rendering

21. one page app navigation
http://hipsteroid.co
HTML
CSS
script
JSON JSON
JSON
/ /timeline /pictures/$id /users/$name

22. deep link: /pictures/$id
serves fetches data &
HTML & JS serves JSON
app starts renders
bookmark renders
& route view
or link empty page
triggers template

23. …with dual rendering
serves
HTML & JS
app starts
bookmark renders full
& route
or link page
triggers

24. mirrored routing
UrlMappings.groovy hipsteroid-router.coffee
'/' { routes:
controller = 'home' '/': 'home'
} 'timeline': 'timeline'
'pictures:id': 'picture'
'/timeline' { 'users:name': 'profile'
controller = 'pictures'
action = 'list'
}
"/pictures/$id" {
controller = 'pictures'
action = 'show'
}
"/users/$name" {
controller = 'user'
action = 'show'
}

25. the handlebars plugin
github.com/davidtinker/grails-handlebars

26. handlebars
timeline.handlebars
<h1>Timeline</h1>
<ul>
{{#each .}}
<li data-id="{{id}}">
{{> picture}}
</li>
{{/each}}
</ul>
picture.handlebars
<figure>
<img src="{{url}}">
<figcaption>
<p>Uploaded {{friendlyTime dateCreated}} by {{uploadedBy.username}}</p>
{{#isCurrentUser uploadedBy}}
<button type="button" class="delete" title="Delete">Delete</button>
{{/isCurrentUser}}
</figcaption>
</figure>

27. template re-use
PicturesController.groovy picture-view.coffee
def show(String id) {
class PictureView extends Backbone.View
def picture = Picture.get(id)
if (picture) {
template: Handlebars.templates.picture
render text: handlebars.render(
template: 'picture',
render: ->
model: picture
@$el.html @template(@model.toJSON())
)
} else {
response.sendError SC_NOT_FOUND
}
}
web-app/templates/picture.handlebars

28. thanks
git.io/hipsteroid
@rfletcherEW
@hipsterdevstack
blog.freeside.co
hipsterdevstack.tumblr.com
energizedwork.com