Turbo Frame
What is Turbo Frames?
Turbo Frames allow predefined parts of a page to be updated on request. Any links and forms inside a frame are captured, and the frame contents automatically updated after receiving a response. Regardless of whether the server provides a full document, or just a fragment containing an updated version of the requested frame, only that particular frame will be extracted from the response to replace the existing content.
Some Benifits:
- Decompose the page into smaller chunks
- Fast loading
Installation:
Add CDN to head tag:
<script src=”https://cdn.skypack.dev/pin/@hotwired/turbo@v7.1.0-V83RMQBlYCPK9CvTqQoL/mode=imports/optimized/@hotwired/turbo.js"></script>
Turbo CDN and Gem Links
CDN: https://cdn.skypack.dev/@hotwired/turbo
Gem: https://github.com/hotwired/turbo-rails
Decompose with Turbo Frames:
when we click on the link “Edit this” the portion in between <turbo-fram id=”message_1">//</turbo-frame> in the show page will be replace by <turbo-fram id=”message_1">//</turbo-frame> of edit page at the same place without changing the view so now you can edit the message on the same page.
//show.html.erb
<turbo-frame id="message_1">
<h1>My message title</h1>
<a href="/messages/1/edit">Edit this message</a>
</turbo-frame>
//edit.html.erb
<turbo-frame id="message_1">
<textarea>My message content</textarea>
</turbo-frame>Lazy-Loading Frames:
“Turbo Frame” is likely a custom HTML element that’s part of a framework or library used to implement lazy loading. Lazy loading is a technique used to defer the loading of images or other resources on a web page until they are actually needed. This can improve the performance of the page, as it reduces the amount of data that needs to be loaded initially.
Get Umeriqbal’s stories in your inbox
Join Medium for free to get updates from this writer.
In this case, the <turbo-frame> element is used to wrap a content section of a web page, and the "data-turbo" attribute is used to control whether the content of the frame should be loaded dynamically (lazily) or not. If "data-turbo" is set to "true", the content of the frame will be loaded dynamically when it becomes visible on the screen, which can improve the performance and speed of the page. If "data-turbo" is set to "false", the content of the frame will be loaded as part of the initial page load, which can be useful for SEO purposes or for content that needs to be available immediately.
//show.html.erb
<turbo-frame id="message_1", data-loading="lazy">
<h1>My message title</h1>
<a href="/messages/1/edit">Edit this message</a>
</turbo-frame>
//edit.html.erb
<turbo-frame id="message_1">
<textarea>My message content</textarea>
</turbo-frame>Turbo (False) Frames:
Setting data-turbo="false" on the <turbo-frame> element tells the framework or the JavaScript code using the <turbo-frame> that the content of this frame should not be loaded dynamically, but instead should be loaded as part of the initial page load. This desired for performance or SEO reasons, as loading the content dynamically may result in slower page load times or less visibility to search engines. By setting data-turbo="false", you can ensure that the content of the frame is available immediately when the page loads.
//show.html.erb
<turbo-frame id="message_1", data-turbo="false">
<h1>My message title</h1>
<a href="/messages/1/edit">Edit this message</a>
</turbo-frame>
//edit.html.erb
<turbo-frame id="message_1">
<textarea>My message content</textarea>
</turbo-frame>Eager-loaded frame:
Link in src will replace on load of the page.
when we want to replace the particular part of the with some particular content then we user eager-loading of turbo frame like in the below case now the content inside of the turbo frame will be replaced by that particular link provided in the
<turbo-frame id="messages" src="https://message/1">
Content will be replaced when /messages has been loaded.
</turbo-frame>replace the whole page
The “target” attribute specifies where the content of the frame should be loaded. The value “_top” specifies that the content should replace the current page and be loaded in the full browser window, breaking out of any previous frames or iframes.
This feature allows you to create a more seamless user experience by loading new content in the full browser window, rather than within a smaller frame. It is often used for navigation or for displaying content that should take up the full browser window.
<turbo-frame id="messages" target="_top">
<a href="/messages/1">
Following link will replace the whole page, not this frame.
</a>
</turbo-frame>Self replacement
<turbo-frame id="messages">
<a href="/messages/1" data-turbo-frame="_self">
Following link will replace just this frame.
</a>
</turbo-frame>For more detail Turbo Frame link
