Web framework agnostic Hotwire Native

[realprabs]

While Hotwire native was born as a native counterpart of Turbolinks and now Hotwire native, I think it can be tweaked a bit to work with any web framework. This is in accordance to the rails doctrine "Push up a big tent". While hotwire turbo is a really simple and effective way to build web apps, most people are building web apps with React/Vue/Svelte. The larger industry can benefit from making Hotwire Native available for them.

The sequence diagram of web and native as I understand looks somewhat like this.

Any web framework or even a vanilla JS implementation which follows that contract should be able to build a hotwire native app. As a proof of concept, I recreated the hotwire demo site using SvelteKit and made it work with Hotwire Native - https://sk-hotwire-native-demo.vercel.app/. I only tested on iOS, but it seems to work fine for the usual use cases.

The POC code is at https://github.com/jaysson/sk-hotwire-native-demo/blob/main/src/hooks.client.ts in case anyone wants to take a look at. Warning: it's in typescript and is just a proof of concept 😛.

Since 37signals doesn't use other frameworks, I understand the maintainers of Hotwire may not be interested in explicitly supporting any other frontend framework. That's fair. I am only proposing the following:

• Documenting the web <-> native contract
• Loosely coupled native JS. The JS injected by the Hotwire Native explicitly calls Turbo. It can be updated to use an agnostic interface if available.

I can contribute PRs if this sounds good.

[realprabs]

I have now created a package for this. Not battle tested, and documentation is coming soon.

https://www.npmjs.com/package/hotwire-native-bolt

[domchristie]

This looks great, I had a little experiment with this a while back: https://domchristie.co.uk/posts/turbo-native-without-turbo/

[domchristie]

Oh interesting. I've not tried Android, but it looks like I was just doing history.back() for my htmx demo: https://github.com/domchristie/turbo-native-htmx-driver/blob/main/turbo-native-htmx-driver.js#L73 I wonder how Hotwire Native does it with Turbo?

[realprabs]

Yes, back works fine in iOS but not in Android. Turbo does pushState, but has its own cache to store & restore the html snapshot.

[domchristie]

I wonder if it's possible to store the history stack, along with the state, in an array. This might require specific code for each framework. Eg for sveltekit, use an afterNavigate hook to store the url and state?

[realprabs]

That may require creating a glue library for every router library. Some may not provide the right callbacks.

[domchristie]

A bit hacky, but could we patch window.history.pushState?