Hacker News Reader

Comment by pdoub | Hacker News Reader

Anyone doing/thinking about Rails in 2020 should give matestack a try :) reactive user interfaces in pure Ruby (and Vue.js under the hood!)

https://github.com/matestack/matestack-ui-core

View on HN

You can roll this yourself with Cells (https://github.com/trailblazer/cells) and Stimulus Reflex (https://docs.stimulusreflex.com/). I've been watching view_component too but the simplicity of cells keeps me happy.

I've been working full time using both and love the flexibility. My process is mostly using state machines on cells which take in a struct and output the html for that state with Stimulus Reflex.

Trailblazer Cells and Stimulus Reflex are great tools, but one big advantage of matestack (https://matestack.io) is to write UI components in pure Ruby, giving you the possibility to use Ruby's language features creating a really dry and clean UI implementation while having a lot of fun doing so! Adding the reactive core components on top saving you a lot of time and effort creating reactive UIs in pure Ruby. Compared to Stimulus Reflex, you have to write less code and manage less added complexity. That's at least my experience. But as said: Cells and Stimulus Reflex are great projects, don't get me wrong. I just love the pure Ruby thing ;)

@pdoub - can you elaborate on the Vue under the hood? I love ruby, and like Vue a lot. Does Matestack do a translation layer from Ruby -> Vue in JS? Eg: transpile, etc.

Matestack's reactive core components are built on pure Vue.js components. When a reactive component is rendered, Matestack renders a HTML component tag, passing in configuration via props and ships that to the browser. Vue.js on the browser then detects these component tags and mounts the appropriate Vue.js component, which reads the configuration coming from the props and perform the desired (configured) functionality. The HTML within the component tag is used as the inline template for the Vue.js component. It's rendering HTML tags out of pure Ruby on the one hand, and mounting pure Vue.js component on top of that in the browser on the other hand.

Reply on news.ycombinator.com