More Related Content Similar to Grails for hipsters (20) Grails for hipsters2. who am I?
• Associate at Energized Work
• Currently at tv.sky.com
• Author of Betamax & various Grails plugins
• Into Grails before it was mainstream
8. demo time…
bit.ly/TWdn1r
192.168.1.57:8080
git.io/hipsteroid
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
18. codekit demo
LESS CSS bundled / cached
CoffeeScript JavaScript bundled / cached
CodeKit Resources
plugin
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'
}
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