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.
A Better UJS for RailsCodemy.netpresents@zacksiriby:Monday, June 10, 13
Javascript is a big part of Rails ProjectMonday, June 10, 13
No real convention forworking with JS filesMonday, June 10, 13
Backbone is Great but...Monday, June 10, 13
I miss working with RubyMonday, June 10, 13
And then I saw Turbolinks...Monday, June 10, 13
Monday, June 10, 13
Turbolinks Backbone / MV*Control / Complexity for ClientLess RubyMonday, June 10, 13
So I thought long and hardMonday, June 10, 13
Turbolinks Backbone / MV*?Something ismissingControl / Complexity for ClientLess RubyMonday, June 10, 13
Transponder JShttp://www.github.com/zacksiri/transponderExtracted from CodemyMonday, June 10, 13
3 Core Components• Helpers• Presenters• ServicesMonday, June 10, 13
CH.calendar = Codemy.Helpers.Calendar =  dateOnly: (date_time) ->    moment(date_time).format(YYYY-MM-DD)   timeInISO: (da...
class CommentsPresenter extends Transponder.Presenter  presenterName: comments  modelName: comment   index: ->    if @para...
• maps to your controller actions• calls helper functions when needed• trigger services• modify the DOM as neededPresenter...
How does it work?Monday, June 10, 13
class CommentsPresenter extends Transponder.Presenter  presenterName: comments  modelName: comment   index: ->    # your c...
Ok so how do I trigger theevent?Monday, June 10, 13
$(#comments).trigger("<%= j ujs_event_type %>", "<%= jrender comments %>");app/views/comments/index.js.erbapp/views/commen...
class CommentsPresenter extends Transponder.Presenter  presenterName: comments  modelName: comment   index: ->    if @para...
Presenters Provide• Better code reusability (Dryer)• Cleaner• Provides Structure• Use what you already know!• Logicless Vi...
What are services?Monday, June 10, 13
Monday, June 10, 13
<select>  <option value="drafting">drafting</option>  <option value="request_approval">awaiting approval</option></select>...
class Codemy.Services.SubmitOnChange extendsTransponder.Service  serviceName: codemy:services:submit_on_change   serve: ->...
<select class="submit_on_change">  <option value="drafting">drafting</option>  <option value="request_approval">awaiting a...
Transponder.service_manifest = ->  $("body.questions,     body.apprentice.objectives.show,     body.mentor.owned_levels.sh...
What Services Do• Write once use everywhere (again Dryer code)• Better Maintainability• Makes sure it doesn’t run on a nod...
How do they all WorkTogether?Monday, June 10, 13
class BadgesPresenter extends Transponder.Presenter  nameSpace: "mentor"  presenterName: "badges"  modelName: "badge"   sh...
Monday, June 10, 13
$(document).readytriggers uploader serviceUseruploads uploader service runsRuns Update action inPresenterTriggers pollerse...
Transponder works withEverythingMonday, June 10, 13
Not Saying don’t useBackboneMonday, June 10, 13
Use the right tools forthe job.Monday, June 10, 13
Codemy uses Turbolinks withTransponder and Backbone whenappropriateMonday, June 10, 13
Transponder is out!http://www.github.com/zacksiri/transponderMonday, June 10, 13
# TODO:• Clean up some APIs• Add Documentation• Video Screencasts• More Generators• Example Rails ProjectMonday, June 10, 13
Thank You!@codemy_netQuestions?@zacksiriMonday, June 10, 13
Upcoming SlideShare
Loading in …5
×

A Better UJS for Rails

1,715 views

Published on

Published in: Technology
  • Be the first to comment

A Better UJS for Rails

  1. 1. A Better UJS for RailsCodemy.netpresents@zacksiriby:Monday, June 10, 13
  2. 2. Javascript is a big part of Rails ProjectMonday, June 10, 13
  3. 3. No real convention forworking with JS filesMonday, June 10, 13
  4. 4. Backbone is Great but...Monday, June 10, 13
  5. 5. I miss working with RubyMonday, June 10, 13
  6. 6. And then I saw Turbolinks...Monday, June 10, 13
  7. 7. Monday, June 10, 13
  8. 8. Turbolinks Backbone / MV*Control / Complexity for ClientLess RubyMonday, June 10, 13
  9. 9. So I thought long and hardMonday, June 10, 13
  10. 10. Turbolinks Backbone / MV*?Something ismissingControl / Complexity for ClientLess RubyMonday, June 10, 13
  11. 11. Transponder JShttp://www.github.com/zacksiri/transponderExtracted from CodemyMonday, June 10, 13
  12. 12. 3 Core Components• Helpers• Presenters• ServicesMonday, June 10, 13
  13. 13. CH.calendar = Codemy.Helpers.Calendar =  dateOnly: (date_time) ->    moment(date_time).format(YYYY-MM-DD)   timeInISO: (date_time) ->    moment(date_time).format(YYYY-MM-DD HH:mm:ss Z)   timeInHour: (date_time) ->    moment(date_time).format(HH:mm A)Monday, June 10, 13
  14. 14. class CommentsPresenter extends Transponder.Presenter  presenterName: comments  modelName: comment   index: ->    if @params.page      CH.infiniteLoader.loadNext        element: @element        response: @response        modelName: @modelName        putAt: prepend   show: ->    $(@element).replaceWith(@response)    $(@element).trigger(codemy:services:highlight) ....   create: ->    $(#new_comment).replaceWith(@response)    $(".comment:last").effect(highlight, {}, 500)   destroy: ->    $(@element).fadeOut 300, ->      $(this).remove()Monday, June 10, 13
  15. 15. • maps to your controller actions• calls helper functions when needed• trigger services• modify the DOM as neededPresentersMonday, June 10, 13
  16. 16. How does it work?Monday, June 10, 13
  17. 17. class CommentsPresenter extends Transponder.Presenter  presenterName: comments  modelName: comment   index: ->    # your code for modifying the DOM    # listens for event ujs:comments:index   update: ->    # listens for even ujs:comments:update...• ujs:comments:index triggers index()• ujs:comments:show triggers show()• ujs:comments:edit triggers edit()• ujs:comments:update triggers update()• ujs:comments:create triggers create()• ujs:comments:destroy triggers destroy()Monday, June 10, 13
  18. 18. Ok so how do I trigger theevent?Monday, June 10, 13
  19. 19. $(#comments).trigger("<%= j ujs_event_type %>", "<%= jrender comments %>");app/views/comments/index.js.erbapp/views/comments/update.js.erb$(#comment_1).trigger("<%= j ujs_event_type %>", "<%= jrender @comment %>");{ujs:comments:update{controller_name:action_nameMonday, June 10, 13
  20. 20. class CommentsPresenter extends Transponder.Presenter  presenterName: comments  modelName: comment   index: ->    if @params.page      CH.infiniteLoader.loadNext        element: @element        response: @response        modelName: @modelName        putAt: prepend   update: ->    $(@element).replaceWith(@response)   ...Monday, June 10, 13
  21. 21. Presenters Provide• Better code reusability (Dryer)• Cleaner• Provides Structure• Use what you already know!• Logicless View in RailsMonday, June 10, 13
  22. 22. What are services?Monday, June 10, 13
  23. 23. Monday, June 10, 13
  24. 24. <select>  <option value="drafting">drafting</option>  <option value="request_approval">awaiting approval</option></select>Monday, June 10, 13
  25. 25. class Codemy.Services.SubmitOnChange extendsTransponder.Service  serviceName: codemy:services:submit_on_change   serve: ->    @element.on change, (e) ->      e.preventDefault()      form = $(this).parents(form)      $.ajax        url: form.attr(action)        type: PUT        dataType: script        data: $(form).serialize()Monday, June 10, 13
  26. 26. <select class="submit_on_change">  <option value="drafting">drafting</option>  <option value="request_approval">awaiting approval</option></select>$(body.courses.index).trigger(codemy:services:submit_on_change);<select class="submit_on_change submit_on_change_active">  <option value="drafting">drafting</option>  <option value="request_approval">awaiting approval</option></select>Monday, June 10, 13
  27. 27. Transponder.service_manifest = ->  $("body.questions,     body.apprentice.objectives.show,     body.mentor.owned_levels.show,     body.mentor.objectives.show,     body.mentor.posts,     body.posts.show").trigger       codemy:services:live_preview   $("body.questions,     body.mentor.posts").trigger     codemy:services:tag_select   $("body.questions,     body.apprentice,     body.mentor,     body.activities,     body.posts.show").trigger       codemy:services:highlightMonday, June 10, 13
  28. 28. What Services Do• Write once use everywhere (again Dryer code)• Better Maintainability• Makes sure it doesn’t run on a node that has that servicealready running• Makes it easier to manage all your code via manifestMonday, June 10, 13
  29. 29. How do they all WorkTogether?Monday, June 10, 13
  30. 30. class BadgesPresenter extends Transponder.Presenter  nameSpace: "mentor"  presenterName: "badges"  modelName: "badge"   show: ->    $(@element).replaceWith(@response)    $(@element).trigger(codemy:services:poller)    $(@element).trigger(codemy:services:uploader)   update: ->    @show()Monday, June 10, 13
  31. 31. Monday, June 10, 13
  32. 32. $(document).readytriggers uploader serviceUseruploads uploader service runsRuns Update action inPresenterTriggers pollerservicerenders processed image tobrowserthrough presenter123456Monday, June 10, 13
  33. 33. Transponder works withEverythingMonday, June 10, 13
  34. 34. Not Saying don’t useBackboneMonday, June 10, 13
  35. 35. Use the right tools forthe job.Monday, June 10, 13
  36. 36. Codemy uses Turbolinks withTransponder and Backbone whenappropriateMonday, June 10, 13
  37. 37. Transponder is out!http://www.github.com/zacksiri/transponderMonday, June 10, 13
  38. 38. # TODO:• Clean up some APIs• Add Documentation• Video Screencasts• More Generators• Example Rails ProjectMonday, June 10, 13
  39. 39. Thank You!@codemy_netQuestions?@zacksiriMonday, June 10, 13

×