4 ms·

I tried to solve this problem for last two projects I worked on. Ended up using Rails that rendered Vue components with data already passed in the generated htm

by Ocha 4y ago

I tried to solve this problem for last two projects I worked on. Ended up using Rails that rendered Vue components with data already passed in the generated html. It works really well: adding new components or iterating over existing ones is super easy, nothing is brittle, UI/UX fidelity is great and very easy to implement, minimal to no API calls (depending on what components I have on the page). Rails views are smaller and much easier to refactor too.

hu3 4y ago
Do you have any example? Even a minimal non-working PoC would make my day. I've been dying to implement Vue component responses for my projects ever since I first heard about it because I believe that this is a way to keep things mostly on the backend while still preventing JS spaghetti on the frontend. I read about https://inertiajs.com/ https://inertiajs.com/ but it seems too overkill. I'd prefer to keep things simpler.
- benblue 4y ago
  For a greenfield project I'd probably reach for Inertia.js though I don't have any experience with it aside from reading the docs. If you just want to use Vue for your rendering layer, you can can do that using a very minimal partial that renders the root element and loads the JS to mount the component. This example should get you started (Vue 2 syntax): https://gist.github.com/yourboyblue/834aac9c427a97037dd49694a25f8199 https://gist.github.com/yourboyblue/834aac9c427a97037dd49694...
- Ocha 4y ago
  You can see working version on app.mailsnag.com. I will try to make a sample project out of it and put on GitHub tomorrow and share the link.
  - dane-pgp 4y ago
    Any progress you can share on that sample project?
theomega3 4y ago
Do you have an example of how you did this?
- Ocha 4y ago
  app.mailsnag.com is the actual project I am using that approach. Will post a link to git repo after I create a trimmed down version just to show the integration
deleted 4y ago
[deleted]
pqdbr 4y ago
Not op, and I’m on the phone so can’t post an example. But I just wanted to add that Rails + Vue (only for those views that require heavy reactivity) is the most productive stack I’ve ever worked.
girvo 4y ago
> Ended up using Rails that rendered Vue components with data already passed in the generated html. Hah, I did this with PHP and React on a pretty big project quite a few years ago now :) It works really well -- though was quite hacky back then. Gave a lovely static-server-side-rendered experience, but with the interaction and organisation of React components.
theonething 4y ago
For Rails, GitHub's ViewComponents coupled with Hotwire looks promising. https://viewcomponent.org/ https://viewcomponent.org/
- dmix 4y ago
  This is the future of Rails apps for sure, more so than just looking at Hotwire or Alpine.js or whatever, especially for that sweet spot between larger mega teams and tiny companies without front-end engineers. There's still plenty of room for Vue/React done right when you have the staff and technical investment no doubt. For Node.js and non-Rails apps where the SSR/hydrating story for complex front-end UIs are needed then it's still very comparable and not really worth the 'paradigm shift'. Otherwise if you're on Rails with Vue you need to do it right and/or you don't mind a bit of latency and have users using Chrome/FF.

by Ocha 4y ago

hu3 4y ago

Do you have any example? Even a minimal non-working PoC would make my day. I've been dying to implement Vue component responses for my projects ever since I first heard about it because I believe that this is a way to keep things mostly on the backend while still preventing JS spaghetti on the frontend. I read about https://inertiajs.com/ https://inertiajs.com/ but it seems too overkill. I'd prefer to keep things simpler.

benblue 4y ago
For a greenfield project I'd probably reach for Inertia.js though I don't have any experience with it aside from reading the docs. If you just want to use Vue for your rendering layer, you can can do that using a very minimal partial that renders the root element and loads the JS to mount the component. This example should get you started (Vue 2 syntax): https://gist.github.com/yourboyblue/834aac9c427a97037dd49694a25f8199 https://gist.github.com/yourboyblue/834aac9c427a97037dd49694...
Ocha 4y ago
You can see working version on app.mailsnag.com. I will try to make a sample project out of it and put on GitHub tomorrow and share the link.
- dane-pgp 4y ago
  Any progress you can share on that sample project?

theomega3 4y ago

Do you have an example of how you did this?

Ocha 4y ago
app.mailsnag.com is the actual project I am using that approach. Will post a link to git repo after I create a trimmed down version just to show the integration

deleted 4y ago

[deleted]

pqdbr 4y ago

Not op, and I’m on the phone so can’t post an example. But I just wanted to add that Rails + Vue (only for those views that require heavy reactivity) is the most productive stack I’ve ever worked.

girvo 4y ago

> Ended up using Rails that rendered Vue components with data already passed in the generated html. Hah, I did this with PHP and React on a pretty big project quite a few years ago now :) It works really well -- though was quite hacky back then. Gave a lovely static-server-side-rendered experience, but with the interaction and organisation of React components.

theonething 4y ago

For Rails, GitHub's ViewComponents coupled with Hotwire looks promising. https://viewcomponent.org/ https://viewcomponent.org/

dmix 4y ago
This is the future of Rails apps for sure, more so than just looking at Hotwire or Alpine.js or whatever, especially for that sweet spot between larger mega teams and tiny companies without front-end engineers. There's still plenty of room for Vue/React done right when you have the staff and technical investment no doubt. For Node.js and non-Rails apps where the SSR/hydrating story for complex front-end UIs are needed then it's still very comparable and not really worth the 'paradigm shift'. Otherwise if you're on Rails with Vue you need to do it right and/or you don't mind a bit of latency and have users using Chrome/FF.