A Better UJS for Rails
3 likes2,051 views
Transponder is a JavaScript framework that aims to provide a better UJS experience for Rails projects. It consists of three main components: helpers, presenters, and services. Presenters map to controller actions and modify the DOM as needed. Services encapsulate reusable logic and can be triggered from presenters. The framework uses an event-based approach where presenters listen for events corresponding to controller actions. This provides a cleaner, more reusable structure for managing JavaScript in Rails compared to alternatives like Backbone alone.
A Better UJS for Rails
- 1. A Better UJS for Rails Codemy.net presents @zacksiriby: Monday, June 10, 13
- 2. Javascript is a big part of Rails Project Monday, June 10, 13
- 3. No real convention for working with JS files Monday, June 10, 13
- 4. Backbone is Great but... Monday, June 10, 13
- 5. I miss working with Ruby Monday, June 10, 13
- 6. And then I saw Turbolinks... Monday, June 10, 13
- 7. Monday, June 10, 13
- 8. Turbolinks Backbone / MV* Control / Complexity for Client Less Ruby Monday, June 10, 13
- 9. So I thought long and hard Monday, June 10, 13
- 10. Turbolinks Backbone / MV* ? Something is missing Control / Complexity for Client Less Ruby Monday, June 10, 13
- 11. Transponder JS http://www.github.com/zacksiri/transponder Extracted from Codemy Monday, June 10, 13
- 12. 3 Core Components • Helpers • Presenters • Services Monday, June 10, 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. 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. • maps to your controller actions • calls helper functions when needed • trigger services • modify the DOM as needed Presenters Monday, June 10, 13
- 16. How does it work? Monday, June 10, 13
- 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. Ok so how do I trigger the event? Monday, June 10, 13
- 19. $('#comments').trigger("<%= j ujs_event_type %>", "<%= j render 'comments' %>"); app/views/comments/index.js.erb app/views/comments/update.js.erb $('#comment_1').trigger("<%= j ujs_event_type %>", "<%= j render @comment %>"); { ujs:comments:update { controller_name:action_name Monday, June 10, 13
- 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. Presenters Provide • Better code reusability (Dryer) • Cleaner • Provides Structure • Use what you already know! • Logicless View in Rails Monday, June 10, 13
- 22. What are services? Monday, June 10, 13
- 23. Monday, June 10, 13
- 24. <select> <option value="drafting">drafting</option> <option value="request_approval"> awaiting approval </option> </select> Monday, June 10, 13
- 25. class Codemy.Services.SubmitOnChange extends Transponder.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. <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. 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:highlight' Monday, June 10, 13
- 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 service already running • Makes it easier to manage all your code via manifest Monday, June 10, 13
- 29. How do they all Work Together? Monday, June 10, 13
- 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. Monday, June 10, 13
- 32. $(document).ready triggers uploader service User uploads uploader service runs Runs Update action in Presenter Triggers poller service renders processed image to browser through presenter 1 2 3 4 5 6 Monday, June 10, 13
- 33. Transponder works with Everything Monday, June 10, 13
- 34. Not Saying don’t use Backbone Monday, June 10, 13
- 35. Use the right tools for the job. Monday, June 10, 13
- 36. Codemy uses Turbolinks with Transponder and Backbone when appropriate Monday, June 10, 13
- 37. Transponder is out! http://www.github.com/zacksiri/transponder Monday, June 10, 13
- 38. # TODO: • Clean up some APIs • Add Documentation • Video Screencasts • More Generators • Example Rails Project Monday, June 10, 13