logoalt Hacker News

x0x0today at 6:49 PM0 repliesview on HN

no api. The way it works is thus (rails, because it's what I regularly use):

The system is called Turbo. A turbo_frame is just a custom html element. You can largely use it instead of a div.

Turbo's js watches for navigation events (link clicks, form submits) that originate inside one of these elements, and instead of letting the browser do a full navigation, it:

1 - makes the request itself, against the usual rails routes. It uses your normal routing, sessions, cookies, etc.

2 - Intercepts the html response and looks for a <turbo-frame id="..."> that matches the id of the frame that triggered the request

3 - Swaps just that element's contents into the page.

more concretely: suppose I have a list of people in a flex table. I wrap the people table in a turbo_frame so I can prepend to it, and wrap each person in a turbo_frame so I can update it. My page can look as so:

    turbo_frame "people", class: "person-table flex flex-row" <-- the overall list
      turbo_frame person_1, class: "person-row flex flex-col"
        the row for person 1
      turbo_frame person_17, class: "person-row flex flex-col"
        the row for person 17
      turbo_frame person_12345, class: "person-row flex flex-col"
        the row for person 12345
etc.

If the user edits a form for person 12345, that is wrapped in turbo_frame person_12345.

The browser makes the request itself, grabs the response, pulls out the contents of turbo_frame person_12345 (and NB: the response can be a whole page or just this fragment), then swaps that in for the existing person_12345.

It's designed so you can make your normal MPA with page navigations and reloads for editing a table row or whatever, make a small set of updates to the html, and have this work almost entirely for free. It sounds too good to be true but I've been using it for years and it often really is that easy.

edit: for server-initiated updates, I can broadcast to select listeners:

1 - replace a turbo_frame (person_12345 was updated externally, and I want to just swap out) 2 - prepend (eg for a css table, put my new person_12345 row in front of other rows; 3 - append (same, but at bottom)