Skip to content

Commit

Permalink
deploy: a54529d
Browse files Browse the repository at this point in the history
  • Loading branch information
dhh committed Apr 10, 2024
1 parent d1bab01 commit 60e9b5d
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 4 deletions.
2 changes: 1 addition & 1 deletion handbook/introduction.html
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ <h2 id="turbo-drive%3A-navigate-within-a-persistent-process"><a class="anchor" h
<p>Turbo Drive gives you that same speed by using the same persistent-process model, but without requiring you to craft your entire application around the paradigm. There’s no client-side router to maintain, there’s no state to carefully manage. The persistent process is managed by Turbo, and you write your server-side code as though you were living back in the early aughts – blissfully isolated from the complexities of today’s SPA monstrosities!</p>
<p>This happens by intercepting all clicks on <code>&lt;a href&gt;</code> links to the same domain. When you click an eligible link, Turbo Drive prevents the browser from following it, changes the browser’s URL using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/History">History API</a>, requests the new page using <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch"><code>fetch</code></a>, and then renders the HTML response.</p>
<p>Same deal with forms. Their submissions are turned into <code>fetch</code> requests from which Turbo Drive will follow the redirect and render the HTML response.</p>
<p>During rendering, Turbo Drive replaces the current <code>&lt;body&gt;</code> element outright and merges the contents of the <code>&lt;head&gt;</code> element. The JavaScript window and document objects, and the <code>&lt;html&gt;</code> element, persist from one rendering to the next.</p>
<p>During rendering, Turbo Drive replaces the contents of the <code>&lt;body&gt;</code> element and merges the contents of the <code>&lt;head&gt;</code> element. The JavaScript window and document objects, and the <code>&lt;html&gt;</code> element, persist from one rendering to the next.</p>
<p>While it’s possible to interact directly with Turbo Drive to control how visits happen or hook into the lifecycle of the request, the majority of the time this is a drop-in replacement where the speed is free just by adopting a few conventions.</p>
<h2 id="turbo-frames%3A-decompose-complex-pages"><a class="anchor" href="#turbo-frames%3A-decompose-complex-pages"></a> Turbo Frames: Decompose complex pages</h2>
<p>Most web applications present pages that contain several independent segments. For a discussion page, you might have a navigation bar on the top, a list of messages in the center, a form at the bottom to add a new message, and a sidebar with related topics. Generating this discussion page normally means generating each segment in a serialized manner, piecing them all together, then delivering the result as a single HTML response to the browser.</p>
Expand Down
2 changes: 1 addition & 1 deletion handbook/page_refreshes.html
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ <h1>Smooth page refreshes with morphing</h1>
<nav class="table-of-contents"><ul><li><a href="#morphing"> Morphing</a></li><li><a href="#scroll-preservation"> Scroll preservation</a></li><li><a href="#exclude-sections-from-morphing"> Exclude sections from morphing</a></li><li><a href="#turbo-frames"> Turbo frames</a></li><li><a href="#broadcasting-page-refreshes"> Broadcasting page refreshes</a></li></ul></nav><h2 id="morphing"><a class="anchor" href="#morphing"></a> Morphing</h2>
<p>You can configure how Turbo handles page refresh with a <code>&lt;meta name=&quot;turbo-refresh-method&quot;&gt;</code> in the page’s head.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span><br> ...<br> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>turbo-refresh-method<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>morph<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>The possible values are <code>morph</code> or <code>replace</code> (the default). When it is <code>morph,</code> when a page refresh happens, instead of replacing the page’s <code>&lt;body&gt;,</code> Turbo will only update the DOM elements that have changed, keeping the rest untouched. This approach delivers better sensations because it keeps the screen state.</p>
<p>The possible values are <code>morph</code> or <code>replace</code> (the default). When it is <code>morph,</code> when a page refresh happens, instead of replacing the page’s <code>&lt;body&gt;</code> contents, Turbo will only update the DOM elements that have changed, keeping the rest untouched. This approach delivers better sensations because it keeps the screen state.</p>
<p>Under the hood, Turbo uses the fantastic <a href="https://github.com/bigskysoftware/idiomorph">idiomorph library</a>.</p>
<h2 id="scroll-preservation"><a class="anchor" href="#scroll-preservation"></a> Scroll preservation</h2>
<p>You can configure how Turbo handles scrolling with a <code>&lt;meta name=&quot;turbo-refresh-scroll&quot;&gt;</code> in the page’s head.</p>
Expand Down
4 changes: 2 additions & 2 deletions handbook/streams.html
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,8 @@ <h2 id="integration-with-server-side-frameworks"><a class="anchor" href="#integr
<p>Since the document’s <code>&lt;head&gt;</code> is persistent across Turbo navigations, it’s
important to mount the <code>&lt;turbo-stream-source&gt;</code> as a descendant of the document’s
<code>&lt;body&gt;</code> element.</p>
<p>Typical full page navigations driven by Turbo will result in the <code>&lt;body&gt;</code> being
discarded and replaced with the resulting document. It’s the server’s
<p>Typical full page navigations driven by Turbo will result in the <code>&lt;body&gt;</code> contents
being discarded and replaced with the resulting document. It’s the server’s
responsibility to ensure that the element is present on any page that requires
streaming.</p>
<p>Alternatively, a straightforward way to integrate any backend application with Turbo Streams is to rely on <a href="https://mercure.rocks">the Mercure protocol</a>. Mercure defines a convenient way for server applications to broadcast page changes to every connected clients through <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">Server-Sent Events (SSE)</a>. <a href="https://mercure.rocks/docs/ecosystem/hotwire">Learn how to use Mercure with Turbo Streams</a>.</p>
Expand Down

0 comments on commit 60e9b5d

Please sign in to comment.