4 ms·

DHH recently introduced Hotwire https://hotwire.dev/ https://hotwire.dev/ which already does something similar. Any idea what the difference is?

julianrubisch 6y ago
in one word: morphdom (https://github.com/patrick-steele-idem/morphdom https://github.com/patrick-steele-idem/morphdom) also, StimulusReflex predates Hotwire for 1 year and is already pretty hardened :-)
- sudhirj 6y ago
  So this receives the full HTML page and does a near-zero-damage “morphing” as opposed to Hotwire which either does full page dumb replacement or asks you to define which sections to replace? Does that sound right?
  - rolae 6y ago
    Exactly. Basically all you to is to call a remote procedure, which you can do by adding a simple `data-reflex="click->Todo#toggle`. In the remote method you change something about the state (for example db, redis). The server rerenders the page and morphs the difference. If you need more control you can get it by defining which elements to render and to morph.
  - nickjj 6y ago
    > as opposed to Hotwire which either does full page dumb replacement or asks you to define which sections to replace It's not that dumb in practice because for a lot of things Hotwire uses HTTP instead of WebSockets which means you can take advantage of what HTTP has to offer such as caching. That means if you decide to dynamically load a menu's contents with a Hotwire Turbo Frame then it's only sent over the wire once and assuming its content doesn't change, it'll serve a 304 content not modified for future requests. For pushing updates with Turbo Stream which is done over WebSockets, I'm pretty sure it'll push that snippet of HTML (let's say a user's comment) over WebSockets and then either append or prepend it to the DOM based on however you configured it to be inserted. And if you edited that comment later on, it will replace that snippet of HTML that was previously sent (since it's the same ERB template). It won't re-render the full page.
    - julianrubisch 6y ago
      There are a lot of wonderful upsides to this approach, yes. It’s just... people think those technologies are congruent but the overlaps are actually minimal. For any rather sophisticated UI you can (and will want) to use both. For example: repaint a data visualization. With Hotwire you can only replace it and start fresh, with SR you can just surgically morph data attributes without disconnecting your stimulus controllers
- joelbluminator 6y ago
  Well Hotwire is running on Basecamp (or Hey?) , its not some half arsed solution...
  - julianrubisch 6y ago
    For sure! It just doesn’t really overlap.
    - deleted 6y ago
      [deleted]
HorizonShadow 6y ago
They don't really have any overlap. Hotwire is for replacing frames with content when navigating through anchors or form posts. StimulusReflex is performing RPC, then diffs the old page and the new page, updating changed elements.
- agd 6y ago
  One difference is that liveview / reflex are stateful whereas Hotwire (turbo) is not. This has varying performance implications. Turbo will do repeat work server side and payloads will typically be bigger, however development may be simpler due to lack of state and memory usage server side may be lower. Turbo also has the possibility to gracefully degrade when js is not available (although I doubt this will be taken advantage of much in practice).
  - freedomben 6y ago
    This is a great point. Plus not all platforms, hosts, and proxies for that matter will allow web sockets. Especially for an established rails app, allowing web sockets can require architecture changes.

julianrubisch 6y ago

in one word: morphdom (https://github.com/patrick-steele-idem/morphdom https://github.com/patrick-steele-idem/morphdom) also, StimulusReflex predates Hotwire for 1 year and is already pretty hardened :-)

sudhirj 6y ago
So this receives the full HTML page and does a near-zero-damage “morphing” as opposed to Hotwire which either does full page dumb replacement or asks you to define which sections to replace? Does that sound right?
- rolae 6y ago
  Exactly. Basically all you to is to call a remote procedure, which you can do by adding a simple `data-reflex="click->Todo#toggle`. In the remote method you change something about the state (for example db, redis). The server rerenders the page and morphs the difference. If you need more control you can get it by defining which elements to render and to morph.
- nickjj 6y ago
  > as opposed to Hotwire which either does full page dumb replacement or asks you to define which sections to replace It's not that dumb in practice because for a lot of things Hotwire uses HTTP instead of WebSockets which means you can take advantage of what HTTP has to offer such as caching. That means if you decide to dynamically load a menu's contents with a Hotwire Turbo Frame then it's only sent over the wire once and assuming its content doesn't change, it'll serve a 304 content not modified for future requests. For pushing updates with Turbo Stream which is done over WebSockets, I'm pretty sure it'll push that snippet of HTML (let's say a user's comment) over WebSockets and then either append or prepend it to the DOM based on however you configured it to be inserted. And if you edited that comment later on, it will replace that snippet of HTML that was previously sent (since it's the same ERB template). It won't re-render the full page.
  - julianrubisch 6y ago
    There are a lot of wonderful upsides to this approach, yes. It’s just... people think those technologies are congruent but the overlaps are actually minimal. For any rather sophisticated UI you can (and will want) to use both. For example: repaint a data visualization. With Hotwire you can only replace it and start fresh, with SR you can just surgically morph data attributes without disconnecting your stimulus controllers
joelbluminator 6y ago
Well Hotwire is running on Basecamp (or Hey?) , its not some half arsed solution...
- julianrubisch 6y ago
  For sure! It just doesn’t really overlap.
  - deleted 6y ago
    [deleted]

HorizonShadow 6y ago

They don't really have any overlap. Hotwire is for replacing frames with content when navigating through anchors or form posts. StimulusReflex is performing RPC, then diffs the old page and the new page, updating changed elements.

agd 6y ago
One difference is that liveview / reflex are stateful whereas Hotwire (turbo) is not. This has varying performance implications. Turbo will do repeat work server side and payloads will typically be bigger, however development may be simpler due to lack of state and memory usage server side may be lower. Turbo also has the possibility to gracefully degrade when js is not available (although I doubt this will be taken advantage of much in practice).
- freedomben 6y ago
  This is a great point. Plus not all platforms, hosts, and proxies for that matter will allow web sockets. Especially for an established rails app, allowing web sockets can require architecture changes.