Let’s explore the SPA-like speed that Turbo brings to Symfony UX.
In a Symfony project’s UI, components are handled by a group of tools called Symfony UX. This article will explore its implementation of Hotwire’s Turbo via a Symfony UX component.
If you have read our Twig Components article, you may scroll down to the Let’s turbocharge your app heading.
So, it’s abstraction.
How does Symfony UX work?
The short answer is when you install a package (aka Stimulus component), Symfony updates everything automagically.
The long answer is in our previous article.
Symfony UX Components/Packages
As the image above indicates, there are twelve components to make your programming life easier.
Let’s turbocharge your app
Having examined all of them besides Turbo in our previous articles, we now look at it.
Turbo was originally developed by Hotwire for use in Ruby on Rails applications.
Symfony uses a variety of tools to boost page speed:
It uses Turbo Drive to convert all link clicks, or form submits into Ajax calls to provide a single-page-application feel.
Turbo Frames decomposes complex pages into smaller parts that load and behave independently of each other and the page itself.
Turbo Streams deliver page updates - to any elements on your page - directly from Symfony. You can add Mercure to provide the same functionality for any users on your site in real-time.
And as Hotwire says, “it's all done by sending HTML over the wire.”
They explain their approach:
This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, without sacrificing any of the speed or responsiveness associated with a traditional single-page application.”
You can run through some Turbo demos here.
This is a quick overview article, so I’m not going to reinvent the wheel here. Let's go to the docs.
“Turbo Drive enhances page-level navigation. It watches for link clicks and form submissions, performs them in the background, and updates the page without doing a full reload. This gives you the "single-page-app" experience without major changes to your code!
Turbo Drive is automatically enabled when you install Symfony UX Turbo.”
“With Turbo Frames, you can place independent page segments inside frame elements that can scope their navigation and be lazily loaded. Scoped navigation means all interaction within a frame, like clicking links or submitting forms, happens within that frame, keeping the rest of the page from changing or reloading.”
The docs say:
“Turbo Streams are a way for the server to send partial page updates to clients. There are two main ways to receive the updates:
- in response to a user action, for instance, when the user submits a form;
- asynchronously, by sending updates to clients using Mercure, WebSocket, and similar protocols.”
Regarding Mercure, Symfony says:
“Broadcasting data in real-time from servers to clients is a requirement for many modern web and mobile applications.
Creating a UI reacting live to changes made by other users, like notifying the user when an asynchronous job has been completed or creating chat applications, are among the typical use cases requiring "push" capabilities.
Symfony provides a straightforward component, built on top of the Mercure protocol, specifically designed for this class of use cases.”
Mercure says it “provides a common publish-subscribe mechanism for public and private web resources. It enables the pushing of any web content to web browsers and other clients in a fast, reliable, and battery-efficient way. It is especially useful for publishing real-time updates of resources served through websites and web APIs to web and mobile apps.”
So, there you go.
Wrapping it up
As you have seen, Symfony takes advantage of the efforts of Hotwire and Mercure to provide a SPA-like feel to your Symfony applications.
A quick note is warranted here. William Pinaud gave a presentation on SPAs at a Symfony conference. It featured this insightful slide.
The slide shows when and when not to use SPAs. He makes an easy-to-understand point that you should not use SPAs 95% of the time. Props to him for the presentation and for allowing us to use the slide.
So, take advantage of the Symfony UX Turbo component when working on apps that do not need a SPA frontend.
It’s time for you to put the pedal to the metal and turbocharge your Symfony apps. Feed your need for speed and put SPAs in the rearview mirror!
Explore some more
We rate these SymfonyCast courses 10 out of 10.
Take the Turbo course, it’s worth the investment. Plus, SymfonyCasts is entertaining.
Happy coding (without JS) Symfonistas!