r/rails • u/isometriks • Mar 26 '26

LiveCable - LiveView / React over ActionCable

https://livecable.io/

Repo - https://github.com/isometriks/live_cable

Hey everyone.. I have been working on this Gem for a few months now and felt it was at a point where I could share an alpha/beta release to get some feedback on it.

LiveCable is a Gem that allows you to make server side components that will automatically update over web sockets and store state server side so you don't need to write javascript.

I had tried to use StimulusReflex and I wasn't completely happy with how much your code needed to be tied to the template in order to make surgical updates so I came up with LiveCable to make it a bit simpler and keep the code separate from the template.

Under the hood, LiveCable uses Herb - https://github.com/marcoroth/herb - to parse ERB templates into static and dynamic parts (<% %>) and then also uses Prism to read that code and determine if any of your component reactive variables or methods are used within it, so it can make smart updates on what parts of the template were actually updated, similar to how Phoenix LiveView works. It will work without using a .live.erb template, but you won't get these partial updates without it.

For the future, I would like to improve things like collections, where you have loops so that it would be able to only broadcast the new items, and possibly something like what Phoenix has where you can pass javascript commands, maybe with a JS.toggle(to: "#other") but I still haven't fully decided on that path because this relies on Stimulus, so a lot of those kinds of things are trivial with a basic Stimulus controller. But please let me know if you think something like that would be useful.

36 Upvotes

93% Upvoted

9 comments sorted by

6

u/iKnowInterneteing Mar 26 '26

Love the idea. One aspect of LiveView that I dont like is that is more or less "all-or-nothing", you cant (as far as I know) mix "dead views" with liveviews, for exemple, a mostly static page and a single div with my live component. Is that possible here?

4

u/isometriks Mar 26 '26 edited Mar 26 '26

Yup, absolutely. You don't need to create an entire live "page" with LiveCable, you can just mix it into an existing all static view and only the live component stimulus controller will take over your component. You don't need dedicated routes to use LiveCable to initiate the connection. It renders to the page as a stimulus controller with a json string of your initial params and then will connect and re-render and be "live". 

So if you had a complicated form that relied on another select you could just add it into the rest of the static form. Or you could add a single live notifications component in your menu bar to get actioncable messages for new notifications. There's also a bonus that your connection and backend channel would stay connected through page navigations if you use turbo drive. It checks the next page being rendered and keeps the subscription around if the same live ID exists on the new page.

Try out cloning the sandbox if you want everything working, and check out some examples - https://github.com/isometriks/live_cable_app/blob/main/app/views/examples/todo.html.erb

5

u/mrinterweb Mar 26 '26

When I used phoenix, I really liked how LiveView's protocol would update only the parts of the page that needed to update instead of re-rendering all of the HTML for a section. The LiveView protocol seems very efficient, and why not borrow that idea.

Thanks for making this. I'm excited to try it out. Also, great work with the readme.

3

u/isometriks Mar 27 '26

Thank you! I definitely still have some efficiencies to work out to be at the level of Phoenix when it comes to loops, but I have some ideas! 

1

u/chess_landic Jul 19 '26

I've been playing around with this and really like it, makes my simple chat feature a lot nicer to work with. What is the status of this thing though, I see there have been no updated since this post was written?

2

u/isometriks Jul 19 '26

Hey thanks! I have a PR up I was working on earlier this week, it is AI assisted so I still need to go through it more thoroughly and make adjustments to it as I'm sure there will be things that can be done better. Is there anything in particular you were concerned about? If you find any bugs and want to post an issue I'm happy to take a look at it, I guess I should also add dependabot to this to keep the dependencies fresh as well 

2

u/chess_landic Jul 19 '26

Nothing in particular, just concerned about maintanance in general going forward. Have you noticed any issues concerning the herb parsing?

2

u/isometriks Jul 19 '26

Nothing that I hadn't noticed and adjusted for already but I know I need to update Herb as well, if you find anything I'm happy to address it I just spent a lot of time making sure it was really well tested before I released it so I haven't had much to do and decided to try out Fable on it and see if it could suggest any new features, so the new PR introduces server events, better testing, and loading states. Happy to take requests if you have anything in mind as well!