LiveComponent: Hotwire와 ViewComponent를 활용한 실시간 클라이언트 상태 관리 및 렌더링
LiveComponent는 Rails ViewComponent에 클라이언트 사이드 상태 관리와 정밀한 리렌더링 기능을 추가하여 Hotwire 환경에서의 개발 경험을 혁신합니다.
LiveComponent: Hotwire와 ViewComponent를 활용한 실시간 클라이언트 상태 관리 및 렌더링
LiveComponent는 Rails ViewComponent에 클라이언트 사이드 상태 관리와 정밀한 리렌더링 기능을 추가하여 Hotwire 환경에서의 개발 경험을 혁신합니다.
If you’re using ViewComponents, I’ve submitted a PR to support their instrumentation in Datadog
https://github.com/practical-computer/datadog-contrib-view_component
Support for ViewComponent instrumentation in Datadog APM Tracing, to be merged into `datadog` itself - practical-computer/datadog-contrib-view_component
🎉 ViewComponent 4.0.0 is here!
After 2 years since v3 🚀
✨ Key highlights:
Removes ActionView::Base dependency
Requires Rails 7.1+ & Ruby 3.2+
New SystemSpecHelpers for RSpec
around_render lifecycle method
Reached feature maturity
I’ve wanted more compact syntax for rendering #ViewComponent in #Rails and finally got around to making a proof-of-concept.
Before:
<%= render Admin::HeadingComponent.new(“Hi”) %>
After:
<%= c.heading “Hi” %>
Inspired by the `tag.strong “Hi”` Rails tag proxy.
Curious if others do anything similar!
https://gist.github.com/henrik/d053195e891b08e13c35338a82927f0a
ViewComponents reduce bloat, simplify data, and create reusable consistent frontend styling. Despite these benefits, they're often under-utilized in the Rails community. I've written a blog post outlining an overview of how they work by refactoring a real-world example into isolated ViewComponents.
💎 Check it out 💎
https://joshfrankel.me/blog/viewcomponents-the-missing-view-layer-for-rails/
If you’ve worked with Rails for any measure of time, then you know that Rails’ Views can quickly get out of hand. Between Helpers, instance variables, and inline logic, they quickly become bloated and tightly coupled to other view specific logic. Pushing these concerns into the Controller layer, or even a Presenter helps, but still lands the View in a place where it contains multiple responsibilities. If only there was a better way… Enter ViewComponents or as I like to call them, “The Missing View Layer for Rails”.
If you use VSCode and have a lot of View Components, configuring explorer.fileNesting might clean up your `app/components` in the explorer a lot:
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*_component.rb": "_${capture}_component_*.html.erb, ${capture}_component.html.erb, ${capture}_component.js, ${capture}_component_controller.js, ${capture}_component.scss"
},
I've always felt rendering ViewComponent with Rails is a bit too verbose.
Especially if you have namespaces. E.g:
render(Admin::Navigation::Item.new(label: 'Example'))
I've used a helper to make it nicer on 2 projects so far:
vc.admin.navigation.item(label: 'Example')
Maybe make it into a gem?
(Might seem a bit over-engineered on a first glance. But it's something that might be called 100s-1000s of time on a page, so had to make sure it's fast enough.
New on the Honeybadger Developer Blog:
Building reusable UI components in Rails with ViewComponent 
Harness the power of modularity in Rails. Learn how to build reusable UI components to reduce code duplication and scale your design system.