Curly – Rethinking the view layer

Presented at RailsConf 2015.

Transcript

1. Daniel Schierbeck @dasch Hello!
3. { No JavaScript! };
5. Curly Rethinking the view layer
6. How we came to build a new template language
7. Help Center Hosted Knowledge Base & Community that integrates with Zendesk
8. Theming & customizable templates
9. Best company ever!
10. ERb? <ul id="products"> <% for product in products %> <li> <h2><%= product.title %></h2> Only <%= product.price %> <p><%= product.description %></p> </li> <% end %> </ul>
11. ... maybe not. <% system("sudo rm -fr /") %>
12. Customers should write templates, not code
13. Liquid <ul id="products"> {% for product in products %} <li> <h2>{{ product.title }}</h2> Only {{ product.price | format_as_money }} <p>{{ product.description | truncate: 200 }}</p> </li> {% endfor %} </ul>
14. Mustache Hello {{name}} You have just won ${{value}}! {{#in_ca}} Well, ${{taxed_value}}, after taxes. {{/in_ca}}
15. So, what do we want? • Safe, declarative templates • Logic in a separate place • Testable! • Full integration with our existing Rails views
16. Curly! • HTML in templates, logic in presenters • Presenters have full access to all the Rails goodies! • Can be used alongside ERb
17. <!-- app/views/search/_result.html.curly --> <li class="search-result"> {{link}} {{popularity}} <div class="search-result-meta"> {{meta}} </div> <div class="search-result-description"> {{description}} </div> </li>
18. app/ models/ views/ controllers/ presenters/
19. # app/presenters/search/result_presenter.rb class Search::ResultPresenter < Curly::Presenter presents :article def link link_to @article.title, @article, class: "search-result-link" end ... end
20. class ... < Curly::Presenter def link ... end def popularity ... end def meta ... end def description ... end end <li class="search-result"> {{link}} {{popularity}} <div class="..."> {{meta}} </div> <div class="..."> {{description}} </div> </li>
21. app/views/posts/_comment.html.curly app/presenters/posts/comment_presenter.rb Naming convention
22. Customers’ templates stored in the database
23. Safe and simple for our customers to use
25. More than for just customization?
26. <% if @post.comments_enabled? && can?(:comment, @post) %> <%= render 'comment_form', post: @post %> <% else %> <p><%= t(".comments_disabled") %></p> <% end %> <% comments = @post.comments.page(@page || 1).per(30) %> <h2><%= comments.count == 0 ? t(".no_comments") : t(".comment_count", count: comments.count) %></h2> <ul class="comments"> <%= render comments %> </ul> <%= paginate(comment) %>
27. <% if @post.comments_enabled? && can?(:comment, @post) %> <%= render 'comment_form', post: @post %> <% else %> <p><%= t(".comments_disabled") %></p> <% end %> <% comments = @post.comments.page(@page || 1).per(30) %> <h2><%= comments.count == 0 ? t(".no_comments") : t(".comment_count", count: comments.count) %></h2> <ul class="comments"> <%= render comments %> </ul> <%= paginate(comment) %>
28. {{comment_form}} <h2>{{comment_count}} </h2> <ul class="comments"> {{comment_list}} </ul> {{pagination}}
29. class Posts::ShowPresenter < Curly::Presenter presents :post, :page def comment_form if @post.comments_enabled? && can?(:comment, @post) render 'comment_form', post: @post else content_tag :p, t(".comments_disabled") end end def comment_count if comments.count == 0 t(".no_comments") else t(".comment_count", count: comments.count) end end ... end
30. Separation of structure & logic (!!)
31. Complex logic could now be dealt with
32. class ProfilePresenter < Curly::Presenter include AvatarHelpers end
33. Testing A new approach?
34. Traditional view testing • Render view with a bunch of variables set • Parse the result • Make assertions
35. Traditional view testing Test View Variables Rendered string Interesting string Parse
36. Curly presenter testing Test Presenter method Variables Return string
37. describe UserPresenter do describe "#name" do it "adds a (moderator) note for moderators" do presenter = UserPresenter.new(context, user: user) presenter.name.should == "John (moderator)" end end end Unit testing presenters
38. Test the logic with unit tests
39. Test the structure with your eyes
40. Caching!
41. class PostPresenter < Curly::Presenter presents :post def cache_key [@post, current_user.admin?] end end
42. Use the best tool for the job Markup languages for structure Programming languages for logic
43. Implementation
44. Template Handler Action View Action Controller Template object Template name Rendered HTML Ruby code (string)
45. So, is Curly better than ERb?
46. Running in production for > 2 years
47. gem install curly-templates
48. • Daniel Schierbeck • @dasch on GitHub and Twitter • Come talk with me! Thank you! http://github.com/zendesk/curly