Rails 7 #137 Use ViewComponent to Abstract reusable HTML. Blocks, Slots, Variables

Показать описание

Don't repeat yourself (DRY) applies not only to Ruby code, but HTML and CSS too!

In this episode we will identify common HTML/CSS elements across some pages in our app and abstract it into a ViewComponent.

A View Component can accept variables and blocks of html to accomodate for the small differences of each of the pages.

View Components is an innovative approach for abstracting view logic elements in your Rails 7 frontend.

This might not be one of my "greatest" episodes, but I had to make it because it displays a great usecase for the right tool.

0:00 identify duplicate HTML/CSS
1:25 grenerate component and display variables
4:22 move duplicate HTML/CSS to ViewComponent
5:20 display content block in Component
6:20 optionally full width
8:35 reuse the Component in other parts of the app
10:11 ViewComponent Slots
12:57 Summary

Рекомендации по теме

Комментарии

Very Amazing Lecture, really Thank you

aman.asrani

Go on Yaro! Spreading ViewComponent love ♥

itsameandrea

Thanks for sharing. We can achieve same functionality using ActionView FormBuilder

nirav-kanani

Please make a video on Nested Attributes

rajamohsin

Thank you so much for the great material!
I would be grateful for the continuation of this topic.
More examples, complex, interlinked. Especially with the use of Turbo technology.
Слава Україні!

ledockol

This is awesome! Are you able to make a detailed video on deployment with MRSK and sidekiq?

theappsecguy

Hi Supe, thanks for the tutorial. I generated a component with a title attribute, and when I tried adding another attribute(body) to the initialize method it says 'ArgumentError missing keyword: :body'. Any ideas? I tried restarting the server but nothing changed.

def initialize(title:, body:)
@title = title
@body = body
end

shadowtman

Rails 7 #137 Use ViewComponent to Abstract reusable HTML. Blocks, Slots, Variables

Rails 7 #137 Use ViewComponent to Abstract reusable HTML. Blocks, Slots, Variables

Intro To View Components In Ruby On Rails 7

Is ViewComponent the Future of Rails?

5 reasons YOU NEED to use view_component

ViewComponents in the Real World - Joel Hawksley

Rails Already Supports View Components! by Andy Maleh (Montreal.rb Ruby Talk 2023/04)

Simplify your VIEW COMPONENTS with dry-initializer

Build a View Component library in Rails with LookBook

Customising Primer ViewComponent & CSS Library | Ruby on Rails Livestream

Creating your first VIEW_COMPONENT with Rails and Hotwire

ViewComponent 101 and discussion

Rails ViewComponent and Tailwind CSS | Ruby on Rails Livestream

Code Along Video Subscription App #19 View Components

This Could Make You a More Productive Rails 7 Dev! | Phlex Gem Spotlight with Ruby on Rails 7

Why do we need View Component in coding life?｜Ruby Jam

Stripe LIFETIME Subscriptions with Rails 7

View Components In The Wild by Joel Hawksley from Github

Rails 7 #112 Devise finally works with Rails 7 and Turbo, but with a twist

Episodes #376 - Active Storage Variants | Preview

React On Rails 7 With Importmaps

Ruby on Rails #143 Turbo Permanent: persist Audio Video and Search results while navigating pages

50. View components 🎨 - Curso de Ruby on Rails 7 para principiantes en español

How to build a startup under 15 minutes

001e-03 Primer View Components: Componentes no HTML ERB do Ruby on Rails Influenciados pelo React