Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 b...
javascript 2006
javascript 2012
is grails hipster-friendly?
enterprise development
hipster development
demo time…  bit.ly/TWdn1r192.168.1.57:8080git.io/hipsteroid
async processing
push data           vert.xgrails app            bus
offload expensive work             vert.x  Grails app  grails app                  vert.x app              busAJAX         ...
one request…n responses              vert.x   Grails app   grails app          vert.x app               bus AJAX          ...
other options• Atmosphere / Comet• Grails events-push plugin• Grails Servlet 3.0 support
front-end tooling
not invented herethe philosophy of social, corporate, orinstitutional cultures that avoid using orbuying already existing ...
build & packaging tools                 brunch.io                                                      jamjs.org          ...
tl;dr - here’s a list…github.com/codylindley/frontend-tools
codekit demo   LESS                    CSS                    bundled / cachedCoffeeScript             JavaScript         ...
testing
dual-rendering
one page app navigation               http://hipsteroid.co    HTML    CSS    script             JSON                     J...
deep link: /pictures/$id      serves                 fetches data &     HTML & JS                serves JSON              ...
…with dual rendering       serves      HTML & JS                           app starts bookmark   renders full             ...
mirrored routingUrlMappings.groovy           hipsteroid-router.coffee/ {                        routes:   controller = hom...
the handlebars plugingithub.com/davidtinker/grails-handlebars
handlebarstimeline.handlebars<h1>Timeline</h1><ul>{{#each .}}     <li data-id="{{id}}">         {{> picture}}     </li>{{/...
template re-usePicturesController.groovy               picture-view.coffeedef show(String id) {                           ...
thanksgit.io/hipsteroid@rfletcherEW@hipsterdevstackblog.freeside.cohipsterdevstack.tumblr.comenergizedwork.com
Upcoming SlideShare
Loading in …5
×

Grails for hipsters

5,241 views

Published on

Talk given on 2012-12-13 at Groovy & Grails Exchange, London.

Published in: Technology

Grails for hipsters

  1. 1. GRAILS FOR HIPSTERS ROB FLETCHER @rfletcherEW
  2. 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. 3. javascript 2006
  4. 4. javascript 2012
  5. 5. is grails hipster-friendly?
  6. 6. enterprise development
  7. 7. hipster development
  8. 8. demo time… bit.ly/TWdn1r192.168.1.57:8080git.io/hipsteroid
  9. 9. async processing
  10. 10. push data vert.xgrails app bus
  11. 11. offload expensive work vert.x Grails app grails app vert.x app busAJAX HTTP pushHTTP 202 JSONPOST
  12. 12. one request…n responses vert.x Grails app grails app vert.x app bus AJAX HTTP HTTP 202 POST
  13. 13. other options• Atmosphere / Comet• Grails events-push plugin• Grails Servlet 3.0 support
  14. 14. front-end tooling
  15. 15. not invented herethe philosophy of social, corporate, orinstitutional cultures that avoid using orbuying already existing products, research,standards, or knowledge because of theirexternal origins Wikipedia
  16. 16. build & packaging tools brunch.io jamjs.org yeoman.io gruntjs.com livereload.com ender.jit.sutwitter.github.com/bower incident57.com/codekit
  17. 17. tl;dr - here’s a list…github.com/codylindley/frontend-tools
  18. 18. codekit demo LESS CSS bundled / cachedCoffeeScript JavaScript bundled / cached CodeKit Resources plugin
  19. 19. testing
  20. 20. dual-rendering
  21. 21. one page app navigation http://hipsteroid.co HTML CSS script JSON JSON JSON/ /timeline /pictures/$id /users/$name
  22. 22. deep link: /pictures/$id serves fetches data & HTML & JS serves JSON app starts rendersbookmark renders & route view or link empty page triggers template
  23. 23. …with dual rendering serves HTML & JS app starts bookmark renders full & route or link page triggers
  24. 24. mirrored routingUrlMappings.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. 25. the handlebars plugingithub.com/davidtinker/grails-handlebars
  26. 26. handlebarstimeline.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. 27. template re-usePicturesController.groovy picture-view.coffeedef 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. 28. thanksgit.io/hipsteroid@rfletcherEW@hipsterdevstackblog.freeside.cohipsterdevstack.tumblr.comenergizedwork.com

×