Turbo

OpenFoodNetwork is in the process of saying "Bye Bye Angular", and moving towards "Reactive Rails" to keep our focus on building with the Rails stack.

To support this, we are using Turbo and Stimulus to maintain interactive pages where necessary.
Turbo is a framework that provides functionality without having to write any Javascript at all, which means less code to maintain. It avoids the need to fully reload the page between navigations, while still mimicking and fully supporting a full page load. We can integrate features such as Turbo Frames and Turbo Streams in a way that complements the existing Rails framework.

• Handbook : https://turbo.hotwired.dev/handbook/introduction

Although it appears very simple, we have had a bit of a learning curve though.

Tips

• Use a debugging tool to verify when Turbo is working as expected. See hotwire-debug below.
• If you need an action that's more specific than the built in Turbo Stream actions, consider adding turbo_power
• Check that turbo is not disabled or altered by parent dom elements (eg data-turbo="false")

Gotchas

(dcook suggestions June 2024)

• need a before-frame-visit event
• need an after-render event so we can keep showing "loading" until it really has loaded. (See this tip for hacking in a hook https://discuss.hotwired.dev/t/event-to-know-a-turbo-stream-has-been-rendered/1554/24)
• lack of debugging. maybe install and update hotwire-debug (or use my quick hack
• lack of format.turbo_frame (and accepts header). is that because you're meant to use stream?.
• doesn't raise any JS errors when turbo-stream target is not found. That would save time debugging.
• There's probably other errors/notices that could be raised when a turbo action doesn't work
• I think there should be a turbo_frame accept/format so you can tailor rendering for that context (eg render only the frame, without surrounding layout html)

Pages using Turbo include:

Bulk Edit Products admin interface