Refactoring Views in Rails

Slide 1

Slide 1 text

Refactoring III: Views Brian Hughes @brianvhughes Thursday, June 6, 13

Slide 2

Slide 2 text

MVC in Rails C M V Thursday, June 6, 13

Slide 3

Slide 3 text

MVC in Rails C M V Has a Problem! Thursday, June 6, 13

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

MVC in Rails V C M S How do we deal with Views, when they get fat? Thursday, June 6, 13

Slide 9

Slide 9 text

Dealing with Fat Views The Rails Way: Helpers Methods in modules. Not regular classes Can have name collisions Procedural in nature Difﬁcult to test We Don’t Need that kind of Help V Thursday, June 6, 13

Slide 10

Slide 10 text

Objects, not Helpers Standard classes, with standard methods Knows the state of our Model objects Provides presentation-speciﬁc data, when needed Knows how to render sub-templates Can be tested, just like our other classes V Thursday, June 6, 13

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

When should we refactor our Views? When we ﬁnd 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

Slide 15

Slide 15 text

Example View Template Contains at least 6 code smells! V Thursday, June 6, 13

Slide 16

Slide 16 text

Code Smell #1 Formatting the meeting date for presentation V Thursday, June 6, 13

Slide 17

Slide 17 text

Code Smell #2 V Conditional check to render more content Thursday, June 6, 13

Slide 18

Slide 18 text

Code Smell #3 Conditional content should move to a partial V Thursday, June 6, 13

Slide 19

Slide 19 text

Code Smell #4 Iterating over array should call to render V Thursday, June 6, 13

Slide 20

Slide 20 text

Code Smell #5 Conditional check to render more content V Thursday, June 6, 13

Slide 21

Slide 21 text

Code Smell #6 Formatting time_slots for presentation V Thursday, June 6, 13

Slide 22

Slide 22 text

Code Smell #7-ish Delegating to object other than @meeting V Thursday, June 6, 13

Slide 23

Slide 23 text

Draper to the Rescue! /app/decorators/meeting_decorator.rb V Thursday, June 6, 13

Slide 24

Slide 24 text

Draper to the Rescue! /app/decorators/meeting_decorator.rb V Thursday, June 6, 13

Slide 25

Slide 25 text

Draper to the Rescue! Addresses Code Smell #1 V Thursday, June 6, 13

Slide 26

Slide 26 text

Draper to the Rescue! Addresses Code Smell #2 V Thursday, June 6, 13

Slide 27

Slide 27 text

Draper to the Rescue! Addresses Code Smells #3 & 4 V Thursday, June 6, 13

Slide 28

Slide 28 text

Refactoring w/Partials V Thursday, June 6, 13

Slide 29

Slide 29 text

Refactoring w/Partials V Replace HAML block with partial call app/views/meetings/_kudo_votes.html.haml Thursday, June 6, 13

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text