Refactoring III: Views - Brian Hughes

Original available at https://speakerdeck.com/brianvh/refactoring-views-in-rails

Transcript

1. Refactoring III: Views Brian Hughes @brianvhughes Thursday, June 6, 13
2. MVC in Rails C M V Thursday, June 6, 13
3. MVC in Rails C M V Has a Problem! Thursday, June 6, 13
4. MVC in Rails C M V It’s Anti-SRP! • Receive HTTP Requests • Process Parameters • Delegate Business Logic to Models • Delegate UI Rendering to Views • Persist the Data • Validate Attributes • Process Queries • Perform Business Logic • • Render HTML/CSS/JS • Interpolate Ruby code • Present Model data • Manage App State Thursday, June 6, 13
5. MVC in Rails C M V • Receive HTTP Requests • Process Parameters • Delegate Business Logic to Models • Delegate UI Rendering to Views • Persist the Data • Validate Attributes • Process Queries • Perform Business Logic • • Render HTML/CSS/JS • Interpolate Ruby code • Present Model data • Manage App State Skinny Controllers, Fat Models Thursday, June 6, 13
6. MVC in Rails C V S • Business Logic • Process Forms • Complex Queries Service Classes can help make our models thin. M Thursday, June 6, 13
7. MVC in Rails C M V S • Business Logic • Process Forms • Complex Queries Service Classes can help make our models thin. Thursday, June 6, 13
8. MVC in Rails V C M S How do we deal with Views, when they get fat? Thursday, June 6, 13
9. Dealing with Fat Views The Rails Way: Helpers Methods in modules. Not regular classes Can have name collisions Procedural in nature Difficult to test We Don’t Need that kind of Help V Thursday, June 6, 13
10. Objects, not Helpers Standard classes, with standard methods Knows the state of our Model objects Provides presentation-specific data, when needed Knows how to render sub-templates Can be tested, just like our other classes V Thursday, June 6, 13
11. I’ll bet he’s talking about Design Patterns! Decorator Pattern One of the original GoF patterns Exhibit Pattern Objects on Rails, Avdi Grimm Presenter Pattern Introduced by Jay Fields, 2007 V Thursday, June 6, 13
12. How do I use these in my Rails app? Roll your own Decorator Using Ruby stdlib’s SimpleDelegator Display Case – Exhibits github.com/objects-on-rails/display-case Draper github.com/drapergem/draper V Thursday, June 6, 13
13. What is Draper? The most popular gem for View refactoring A bit confused about design patterns Almost a pure implementation of Presenter Calls itself a View-Model Stores classes in /app/decorators V Thursday, June 6, 13
14. When should we refactor our Views? When we find Code Smells! Use of conditionals: if, else, unless, case Performing an ActiveRecord query Processing Arrays/Hashes: each, map Formatting model data for presentation Improper use of partial templates Instantiating local variables V Thursday, June 6, 13
15. Example View Template Contains at least 6 code smells! V Thursday, June 6, 13
16. Code Smell #1 Formatting the meeting date for presentation V Thursday, June 6, 13
17. Code Smell #2 V Conditional check to render more content Thursday, June 6, 13
18. Code Smell #3 Conditional content should move to a partial V Thursday, June 6, 13
19. Code Smell #4 Iterating over array should call to render V Thursday, June 6, 13
20. Code Smell #5 Conditional check to render more content V Thursday, June 6, 13
21. Code Smell #6 Formatting time_slots for presentation V Thursday, June 6, 13
22. Code Smell #7-ish Delegating to object other than @meeting V Thursday, June 6, 13
23. Draper to the Rescue! /app/decorators/meeting_decorator.rb V Thursday, June 6, 13
24. Draper to the Rescue! /app/decorators/meeting_decorator.rb V Thursday, June 6, 13
25. Draper to the Rescue! Addresses Code Smell #1 V Thursday, June 6, 13
26. Draper to the Rescue! Addresses Code Smell #2 V Thursday, June 6, 13
27. Draper to the Rescue! Addresses Code Smells #3 & 4 V Thursday, June 6, 13
28. Refactoring w/Partials V Thursday, June 6, 13
29. Refactoring w/Partials V Replace HAML block with partial call app/views/meetings/_kudo_votes.html.haml Thursday, June 6, 13
30. Refactoring w/Partials V Replace HAML block with partial call app/views/meetings/_kudo_votes.html.haml app/views/meetings/_kudo_link.html.haml Thursday, June 6, 13
31. Draper to the Rescue! Addresses Code Smells #3 & 4 V Thursday, June 6, 13
32. Draper to the Rescue! Addresses Code Smell #5 V Thursday, June 6, 13
33. Draper to the Rescue! Addresses Code Smell #6 V Thursday, June 6, 13
34. Example View Template Before Applying Draper V Thursday, June 6, 13
35. After Applying Draper Example View Template V Thursday, June 6, 13
36. @meeting should display these links What about Smell #7? V Thursday, June 6, 13
37. Extend our Decorator /app/decorators/meeting_decorator.rb V Thursday, June 6, 13
38. Extend our Decorator /app/decorators/meeting_decorator.rb V Thursday, June 6, 13
39. Before the meeting display links Update View Template V Thursday, June 6, 13
40. After the meeting display links Final View Template V Thursday, June 6, 13