rails-views-patterns

Rails Views Patterns

Follow standard Rails view conventions for ERB templates, partials, layouts, helpers, form_with, and content_for regions. This skill covers only the opinionated and non-obvious additions.

Applies on the html delivery axis (Axis B, rails-stack-profiles). On the api axis there are no app views — use rails-api-patterns instead.

See patterns.md for detailed examples.

Quick Reference

Area	Key Rule	Anti-Pattern
Partials	Extract reusable components	Duplicated HTML across views
Collections	Always use render collection:	Manual loops with each
Caching	Fragment cache expensive renders	No caching on collection renders
Accessibility	Semantic HTML + ARIA	<div> soup without roles
Logic	Presenter or helper for complex logic	Conditionals in templates

Core Principles

1. Views are for presentation only -- no queries, no mutations, no business logic
2. Semantic HTML5 -- use <header>, <nav>, <main>, <article>, <section>, <aside> instead of generic <div> wrappers
3. Always render collection: -- never each + render inside the loop (performance + enables collection caching)
4. Cache aggressively -- fragment caching with cached: true on collections, Russian-doll nesting for parent/child

Presenter Objects and ViewComponents

Where complex view logic goes is governed by an orthogonal project fact, not an architecture axis: whether the view_component gem is installed. Read it from the project-conventions fingerprint (Frontend category).

• view_component gem present: use ViewComponents — see patterns.md.
• No view_component gem: extract complex view logic into plain Ruby presenter objects.

# app/presenters/dashboard_presenter.rb
class DashboardPresenter
  attr_reader :user, :period

  def initialize(user:, period: Date.current.all_month)
    @user = user
    @period = period
  end

  def grouped_activities
    user.activities.where(date: period).group_by(&:category).sort_by { |cat, _| cat.position }
  end

  def empty? = user.activities.where(date: period).none?
  def title  = "#{user.name}'s Dashboard"
end