Making it work with AND without cable

1

It is advised by the official docs to make one’s things work as if there is no cables/websockets and then add realtime-ness by using the cables, but how to make them both work?

Even the reference implementation of the chat app has messages/create.turbo_stream.erb containing
<% # Return handled by cable %> to avoid double vision, i.e. not exposing the actual message in response to a creation request.

So how is it supposed to be done? Maybe they mean that the app shall somehow switch from turbo_stream to html? I’m a bit confused TBH, can anyone help please?

Thanks in advance.

2

Instead of

Making it work with AND without cable

think

Making it work without cable, then enhance it with cable

Step 1. Build your application without JavaScript. Use traditional http requests and style page using CSS. In many cases the user experience will not look and behave the way you want it to (e.g. user presses button to refresh page in order to see updated messages). It’s not the best user experience, but it works.

Step 2. Enhance with JavaScript. (Often referred as “sprinkle with JavaScript”). Add turbo-frame/turbo-stream HTML tags and stimulus controllers as needed. This steps often uses the same controllers as before, but enhances the user experience. If using turbo-streams, then you add turbo-stream.erb files and update controllers to handle requests without and with turbo-stream requests.

1 Like