# Making it work with AND without cable

**URL:** https://discuss.hotwired.dev/t/making-it-work-with-and-without-cable/2955
**Category:** General
**Created:** [June 11, 2021, 9:02am UTC](https://discuss.hotwired.dev/t/making-it-work-with-and-without-cable/2955 "2021-06-11T09:02:08Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Daniel\_Vartanov](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/daniel_vartanov/32/2053_2.png) [@Daniel\_Vartanov](https://discuss.hotwired.dev/u/Daniel_Vartanov)
#### Post date: [June 11, 2021, 9:02am UTC](https://discuss.hotwired.dev/t/making-it-work-with-and-without-cable/2955/1 "2021-06-11T09:02:09Z")

</div>

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](https://github.com/hotwired/hotwire-rails-demo-chat/blob/main/app/views/messages/create.turbo_stream.erb)  
`<% # 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.

---

<div class="post-metadata">

### Author: ![tleish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tleish/32/920_2.png) [@tleish](https://discuss.hotwired.dev/u/tleish)
#### Post date: [June 11, 2021, 12:45pm UTC](https://discuss.hotwired.dev/t/making-it-work-with-and-without-cable/2955/2 "2021-06-11T12:45:27Z")

</div>

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.
