Progressively enhance navigating to `seats#show`

The application’s seats#show action renders the details of a Seat within the context of a modally shown <dialog> element that is overlaid on top of that Seat record’s associated Floor record within the Seat map.

During a full page visit to the seats#show action via a direct GET /venues/:venue_id/floors/:floor_id/seats/:id request, that action fetches the entire set of associated Seat records for a given Floor, and renders the entire set into the template.

In this application’s case, that’s between 1,300 and 1,500 records that are fetched, and as many (or more) corresponding <svg> elements sent to the browser.

As a means of mitigating that load when navigating to the seats#show action from within JavaScript-capable browsing environments, this commit introduces the notion of a Turbolinks “fragment”.

Without taking explicit steps to opt-into fragment navigation, all <a> elements that are not annotated with [data-turbolinks="false"] attributes will continue to behave as Turbolinks-enabled links.

When an <a> element declares the [data-turbolinks-fragment] attribute, mark the triggered Turbolinks-powered request to be a “fragment” request.

Our Stimulus controller attaches event listeners throughout the resulting sequence of events:

When the initial turbolinks:click event fires, check the <a> element for an attribute for the value of its [data-turbolinks-fragment] attribute. When present, annotate the <body> element with that value as the [data- turbolinks-fragment-request] attribute.
When the turbolinks:request-start event fires, read the <body data-turbolinks-fragment-request> attribute’s value, passing it along to the event’s XMLHttPRequest instance under the X-Turbolinks-Fragment header.
When the turbolinks:before-render event fires, merge the server’s fragmented response into the current page, before Turbolinks populates its page cache and finishes the navigation.

To ensure that the “fragment”‘s response HTML is injected into the incoming <body> element, merge its contents from the response into the current <body> element, and then re-write the turbolinks:before-render event’s event.data.newBody to reflect the updated current, re-written <body> element.
The modifications to the turbolinks:before-render event’s newBody are written to Turbolinks’ page cache, and are seamlessly re-integrate into the remainder of the Turbolinks navigation

The server-side component

When an incoming request declares the X-Turbolinks-Fragment header, set the request’s variant to :fragment.

In this commit’s case, the seats#show action will skip rendering the seats/index template by guarding it with a request.variant.fragment? check.


      app/controllers/application_controller.rb

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 8533404..a51bbda 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -6,4 +6,10 @@ class ApplicationController < ActionController::Base
 
     cookies[:cart_token] ||= Current.cart.token
   end
+
+  before_action do
+    if request.headers["X-Turbolinks-Fragment"]
+      request.variant = :fragment
+    end
+  end
 end


      app/javascript/controllers/turbolinks_fragment_controller.js

diff --git a/app/javascript/controllers/turbolinks_fragment_controller.js b/app/javascript/controllers/turbolinks_fragment_controller.js
new file mode 100644
index 0000000..2d1685f
--- /dev/null
+++ b/app/javascript/controllers/turbolinks_fragment_controller.js
@@ -0,0 +1,38 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  click(event) {
+    const request = event.target.getAttribute("data-turbolinks-fragment")
+
+    if (request) {
+      this.data.set("request", request)
+    }
+  }
+
+  appendHeader(event) {
+    const request = this.data.get("request")
+
+    if (request) {
+      event.data.xhr.setRequestHeader("X-Turbolinks-Fragment", request)
+    }
+
+    this.data.remove("request")
+  }
+
+  injectFragment(event) {
+    const request = this.data.get("request")
+
+    if (request) {
+      const documentBody = this.element.cloneNode(true)
+      const responseBody = event.data.newBody
+      const channelsInDocumentBody = documentBody.querySelectorAll(
+        `[data-turbolinks-fragment-channel~="${request}"]`
+      )
+
+      for (const channel of channelsInDocumentBody) {
+        channel.innerHTML      = responseBody.innerHTML
+        responseBody.innerHTML = documentBody.innerHTML
+      }
+    }
+  }
+}


      app/views/layouts/application.html.erb

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8be7352..f9a619b 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -11,9 +11,18 @@
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
-  <body>
+  <body
+    data-controller="turbolinks-fragment"
+    data-action="
+      turbolinks:click->turbolinks-fragment#click
+      turbolinks:request-start@document->turbolinks-fragment#appendHeader
+      turbolinks:before-render@document->turbolinks-fragment#injectFragment
+    "
+  >
     <div class="syos-site-frame">
       <%= yield %>
     </div>
+
+    <div data-turbolinks-fragment-channel="dialog"></div>
   </body>
 </html>


      app/views/seats/index.html.erb

diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 8f6b7e2..da853c5 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -142,6 +142,7 @@
               <a
                 href="<%= venue_floor_seat_path(venue, floor, seat.row_number) %>"
                 aria-label="<%= seat.row_number %>"
+                data-turbolinks-fragment="dialog"
               >
                 <use
                   <% if Current.cart.include?(seat) %>


      app/views/seats/show.html.erb

diff --git a/app/views/seats/show.html.erb b/app/views/seats/show.html.erb
index 2ef93c4..ad6783c 100644
--- a/app/views/seats/show.html.erb
+++ b/app/views/seats/show.html.erb
@@ -1,4 +1,6 @@
+<% unless request.variant.fragment? %>
 <%= render(template: "seats/index", locals: local_assigns) %>
+<% end %>
 
 <%= render("seats/dialog") do %>
   <header class="syos-dialog__header">

select-your-own-seat

Progressively enhance navigating to `seats#show`

The lifecycle of a “fragment” navigation

The server-side component

Progressively enhance navigating to seats#show

The lifecycle of a “fragment” navigation

The server-side component

Progressively enhance navigating to `seats#show`