Grails for hipsters

4,566 views
4,332 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

×