Although I love the idea of the Hotwire stack, I have been very intrigued by the Inertia.js approach ever since I heard its creator Jonathan Reinink talk about it on this Full Stack Radio episode back when it was first released.
Recently, Chris Toomey has been talking about it on The Bike Shed (e.g. this episode), touting that it is the most productive he has ever felt. Specifically, he is using:
Rails
Inertia.js
Svelte
Tailwind CSS
I would love to add this as an option to the quickstart template (basically swap out Hotwire with Intertia + Svelte and any related tooling).
First, I must say that I really like the Basecamp approach of never rendering on the client, and only using Javascript to manipulate HTML that the server renders. I've been using Turbolinks + StimulusJS on every rails app I've worked on since StimulusJS was released, and I can vouch that the productivity claims are real. And I've been playing around with the new Hotwire stack, and it is extremely powerful and fun.
However, I also have several years of combined experience working on a few SPA+API apps, and I really enjoyed working on frontends with component based architecture. I definitely prefer the productivity of server-rendered MVC whenever possible, but in my experience there is a "threshold" of reactivity/complexity at which the StimulusJS pattern starts feeling cumbersome, and for some features a component-based architecture is more clear and maintainable (such as a barcode scanning widget).
For that reason, I'll occasionally use react-rails via Webpacker to render a single React component inside a server-rendered view, passing props from the server. However, this means mixing client and server rendering which can come with its own pains, such as a lack of view helpers and often needing boilerplate or duplication.
Hotwire, which is the Basecamp solution to this exact problem, solves it with the concept of "frames" -- portions of the page which use web sockets to navigate with a frame without changing other parts of the page. This makes a whole new realm of real-time and reactivity features relatively easy to add, and it certainly brings more power and flexibility than just StimulusJS provides, but it still feels a bit clunky for certain "widget" scenarios.
Meanwhile, Inertia.js has always been in the back of my mind because it takes a very interesting middle ground that resonates with me -- it still uses mostly a traditional MVC stack, with server-side routing, authentication, etc., but it replaces the view layer with a component-based frontend architecture. Basically, by buying into frontend/backing coupling, it gives you the best of both worlds, and handles/mitigates as much of the boilerplate/pain as possible.
Another framework moving in this direction is Redwood.js, though that is an entire toolkit and requires more specific buy-in, whereas Inertia is just an adapter for get SPA power with MVC convenience.
Anyway, bottom line is that I would love to try the RIST stack, and if it works out like I am guessing it will, it might become the new default, or atleast an easily-selectable option, for this template.
7 removed Hotwire/Turbolinks as a default, so now this template will generate a very neutral view configuration using Webpacker 6, which is ready to easily setup InertiaJS, Hotwire, or any other view layer options.
ryan-hunter-pc
commented
3 years ago
TL; DR
Although I love the idea of the Hotwire stack, I have been very intrigued by the Inertia.js approach ever since I heard its creator Jonathan Reinink talk about it on this Full Stack Radio episode back when it was first released.
Recently, Chris Toomey has been talking about it on The Bike Shed (e.g. this episode), touting that it is the most productive he has ever felt. Specifically, he is using:
I would love to add this as an option to the quickstart template (basically swap out Hotwire with Intertia + Svelte and any related tooling).
Tools to check out:
More thoughts/background
First, I must say that I really like the Basecamp approach of never rendering on the client, and only using Javascript to manipulate HTML that the server renders. I've been using Turbolinks + StimulusJS on every rails app I've worked on since StimulusJS was released, and I can vouch that the productivity claims are real. And I've been playing around with the new Hotwire stack, and it is extremely powerful and fun.
However, I also have several years of combined experience working on a few SPA+API apps, and I really enjoyed working on frontends with component based architecture. I definitely prefer the productivity of server-rendered MVC whenever possible, but in my experience there is a "threshold" of reactivity/complexity at which the StimulusJS pattern starts feeling cumbersome, and for some features a component-based architecture is more clear and maintainable (such as a barcode scanning widget).
For that reason, I'll occasionally use react-rails via Webpacker to render a single React component inside a server-rendered view, passing props from the server. However, this means mixing client and server rendering which can come with its own pains, such as a lack of view helpers and often needing boilerplate or duplication.
Hotwire, which is the Basecamp solution to this exact problem, solves it with the concept of "frames" -- portions of the page which use web sockets to navigate with a frame without changing other parts of the page. This makes a whole new realm of real-time and reactivity features relatively easy to add, and it certainly brings more power and flexibility than just StimulusJS provides, but it still feels a bit clunky for certain "widget" scenarios.
Meanwhile, Inertia.js has always been in the back of my mind because it takes a very interesting middle ground that resonates with me -- it still uses mostly a traditional MVC stack, with server-side routing, authentication, etc., but it replaces the view layer with a component-based frontend architecture. Basically, by buying into frontend/backing coupling, it gives you the best of both worlds, and handles/mitigates as much of the boilerplate/pain as possible.
Another framework moving in this direction is Redwood.js, though that is an entire toolkit and requires more specific buy-in, whereas Inertia is just an adapter for get SPA power with MVC convenience.
Anyway, bottom line is that I would love to try the RIST stack, and if it works out like I am guessing it will, it might become the new default, or atleast an easily-selectable option, for this template.