GRAILS FOR HIPSTERS

ROB FLETCHER@rfletcherEW

who am I?

• Associate at Energized Work

• Currently at tv.sky.com

• Author of Betamax & various Grails plugins

• Into Grails before it was mainstream

javascript 2006

javascript 2012

is grails hipster-friendly?

enterprise development

hipster development

demo time…

bit.ly/TWdn1r192.168.1.57:8080

git.io/hipsteroid

async processing

push data

grails appvert.x bus

Grails app

offload expensive workgrails app vert.x app

AJAXHTTPPOST

HTTP202

push JSON

vert.x bus

Grails app

AJAXHTTPPOST

HTTP202

one request…n responsesvert.x appgrails app vert.x

bus

other options

• Atmosphere / Comet

• Grails events-push plugin

• Grails Servlet 3.0 support

front-end tooling

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

build & packaging tools

gruntjs.comyeoman.io

livereload.com

incident57.com/codekittwitter.github.com/bower

brunch.io

jamjs.org

ender.jit.su

tl;dr - here’s a list…

github.com/codylindley/frontend-tools

codekit demo

LESS

CoffeeScript JavaScript

CSS bundled / cached

bundled / cached

CodeKit Resourcesplugin

testing

dual-rendering

one page app navigation

/ /timeline /pictures/$id /users/$name

http://hipsteroid.coHTMLCSSscript

JSONJSON

JSON

deep link: /pictures/$idserves

HTML & JS

app starts & route triggers

fetches data & serves JSON

renders view

template

bookmark or link

renders empty page

…with dual renderingserves

HTML & JS

app starts & route triggers

bookmark or link

renders full page

mirrored routing

'/' {controller = 'home'

}

'/timeline' {controller = 'pictures'action = 'list'

}

"/pictures/$id" {controller = 'pictures'action = 'show'

}

"/users/$name" {controller = 'user'action = 'show'

}

routes:'/': 'home''timeline': 'timeline''pictures:id': 'picture''users:name': 'profile'

UrlMappings.groovy hipsteroid-router.coffee

the handlebars plugin

github.com/davidtinker/grails-handlebars

handlebars<h1>Timeline</h1><ul>{{#each .}} <li data-id="{{id}}"> {{> picture}} </li>{{/each}}</ul>

<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>

picture.handlebars

timeline.handlebars

template re-use

def show(String id) {def picture = Picture.get(id)if (picture) {

render text: handlebars.render(template: 'picture', model: picture

)} else {

response.sendError SC_NOT_FOUND}

}

PicturesController.groovy

class PictureView extends Backbone.View

template: Handlebars.templates.picture

render: ->@$el.html @template(@model.toJSON())

picture-view.coffee

web-app/templates/picture.handlebars

thanks

git.io/hipsteroid

@rfletcherEW

@hipsterdevstack

blog.freeside.co

hipsterdevstack.tumblr.com

energizedwork.com