Mastering Ruby on Rails Views

🎨 Mastering Ruby on Rails Views: Hidden Tricks, Performance Hacks & Gems You MUST Know 🚀

When building a Ruby on Rails application, Views are where your users actually experience your product. But most developers only scratch the surface — using basic ERB templates without unlocking the true power of Rails Views.

In this blog, we’ll uncover: ✅ Hidden features ✅ Smart tricks ✅ Performance optimizations ✅ Powerful gems ✅ Real-world examples

Let’s transform your views from basic templates → high-performance UI engines 💡

🧠 What Are Rails Views (Quick Recap)

Rails Views are responsible for rendering the UI using:

• ERB (.html.erb)
• HAML / SLIM
• Partials
• Layouts

They follow MVC: 👉 Controller → prepares data 👉 View → displays data

🔥 1. Hidden Features of Rails Views You Probably Missed

🧩 1.1 content_for & yield Magic

Used for dynamic layouts.

<% content_for :title do %>
  Dashboard
<% end %>

In layout:

<title><%= yield :title %></title>

💡 Use Case: Dynamic page titles, scripts, meta tags

🧩 1.2 capture for Reusable Blocks

<% greeting = capture do %>
  Hello, <%= current_user.name %>
<% end %>

<%= greeting %>

💡 Helps build reusable UI snippets dynamically.

🧩 1.3 provide (Cleaner Alternative)

<% provide(:title, "Home") %>

✔ Cleaner than content_for

🧩 1.4 render Variations (Super Powerful)

<%= render @users %>

Rails automatically picks _user.html.erb

💡 This is called Collection Rendering — super efficient!

⚡ 2. Performance Optimization Techniques

🚀 2.1 Fragment Caching (Must Know)

<% cache @product do %>
  <%= render @product %>
<% end %>

💡 Rails stores this block → avoids re-rendering

🚀 2.2 Russian Doll Caching 🪆

<% cache @post do %>
  <%= render @post.comments %>
<% end %>

💡 Nested caching for complex UI

🚀 2.3 Avoid N+1 Queries in Views

❌ Bad:

<% @posts.each do |post| %>
  <%= post.user.name %>
<% end %>

✔ Fix in controller:

@posts = Post.includes(:user)

🚀 2.4 Use pluck Instead of Full Objects

User.pluck(:name)

💡 Faster than loading entire records

🚀 2.5 Streaming Views (Advanced ⚡)

render stream: true

💡 Sends response in chunks → faster perceived load

🧙 3. Pro-Level View Tricks

🎯 3.1 View Helpers for Clean Code

def format_price(price)
  number_to_currency(price)
end

Use in view:

<%= format_price(100) %>

✔ Keeps views clean and readable

🎯 3.2 Safe HTML Rendering

<%= sanitize(user_input) %>

⚠️ Avoid:

<%= raw user_input %>

💡 Prevents XSS attacks

🎯 3.3 Conditional Rendering Shortcut

<%= render @post if @post.present? %>

🎯 3.4 Dynamic Partial Names

<%= render "cards/#{@user.role}" %>

💡 Super useful for role-based UI

💎 4. Powerful Gems for Rails Views

🌟 4.1 Draper (Decorator Pattern)

👉 Clean separation of logic

@user.decorate.full_name

✔ Keeps views logic-free

🌟 4.2 ViewComponent (by GitHub)

Component-based views:

render(UserComponent.new(user: @user))

💡 Scalable UI architecture

🌟 4.3 Slim / HAML (Cleaner Syntax)

Slim example:

h1 Hello #{@user.name}

✔ Less code, cleaner UI

🌟 4.4 Cells (View Models)

cell(:comment, @comment)

💡 Encapsulates view logic

🌟 4.5 Phlex (Modern Approach 🚀)

Ruby-based views:

class Card < Phlex::HTML
  def template
    h1 "Hello World"
  end
end

🧱 5. Folder Structure Best Practices

app/views/
  users/
    index.html.erb
    _user.html.erb
  shared/
    _navbar.html.erb
    _footer.html.erb

✔ Use shared/ for reusable components ✔ Keep partials small & focused

🧪 6. Real-World Example (Optimized View)

<% cache @users do %>
  <%= render @users %>
<% end %>

Controller:

@users = User.includes(:profile)

Partial:

<div class="user-card">
  <h3><%= user.name %></h3>
</div>

🔥 Result:

• Faster rendering
• Clean code
• Scalable UI

⚠️ 7. Common Mistakes to Avoid

❌ Heavy logic in views ❌ Too many partials (over-fragmentation) ❌ Ignoring caching ❌ Using raw dangerously ❌ Not optimizing DB queries

🎯 Final Thoughts

Rails Views are not just templates — they are a performance layer + UX engine.

👉 Master these:

• Caching strategies
• Partial rendering
• Helper usage
• Component-based design

And your app will: 🚀 Load faster 🎨 Look cleaner 📈 Scale better

💬 Powerful Quote

“First impressions are everything — and in web apps, your Views ARE the first impression.” 💡

🔥 Bonus Tip

If you want to level up even more: 👉 Combine Rails Views + React (Hybrid Approach) 👉 Use Hotwire (Turbo + Stimulus) for modern UI without heavy JS