ViewComponent

We are happy users of ViewComponent (as they are to be called). It helps us create fast, reusable and tested view snippets.

If you have not tried it out yet, here is me saying - do it, it’s great! We have it running in production on customer projects already, and we love it.

Live updating views

Even though we are doing most of our projects in Ruby on Rails, we go look at new languages and frameworks to learn. That brought us to Elixir and the Phoenix framework and that cool LiveView feature. We never really got to a place where we wanted to switch away from Ruby, but that LiveView was stuck in memory.

Then one day someone went and created StimulusReflex. Live updating view in Ruby on Rails - inspired by Phoenix LiveView. That is really cool!

Actionview::Component::Live

By combining the best ideas from LiveView and ViewComponent we figured out a way to make components re-render themselves on the page by responding to changes on the server and updating related components in real time through a persistent socket connection. We wanted to have something that felt Railsy - nothing to configure or decide, just write a bit of “magic” and have live updating views. We called it Actionview::Component::Live.

The little demo page in the video contains 2 components. One for the user card on the left and a small badge at the top right. Each component updates seperately when data is change server-side.

How does it work

1: Make those records active

First we tell our model that it should inform the world when things change. This is just a simple Rails after_update hook.

2: The component

Here we include a subscriber and setting up a listener for updates from User. The component used for live updating has a few limitations. It can only take one argument, it must be named with the name of the model it listens to. The component must expose an id of the model it is bound to.

3: Tying it together in the view

The last thing we need is to wrap the HTML that should update in a block, telling what component is rendered here, and the id of the record that the component renders.

Behind the scenes

As we wanted to make this appear “magical” when using it, we made some decisions for you. As with Phoenix LiveView and StimulusReflex this uses websocket to update the view, we created one ActionCable::Channel that broadcasts everything based on the name of the components that need updating. So our little naming convention in view helps us minimize configuration.

Limitations

Right now a component can only listen to updates on one model - maybe we’ll find a way to change that, if we find the need to do that.

Simon Træls Ravn - geek, problem solver & rails enthusiast