Need help with Drupal or Grav admin, site building, design, or content? Contact us!   

Back to top with progress scrollbar

Discover Symfony UX. Turbo lets you put SPAs in the Rearview Mirror.

By Reuben Walker, 6 September, 2022
Meme of car taking hard right turn away from SPAs to Turbo

Let’s explore the SPA-like speed that Turbo brings to Symfony UX.

This is a companion article to Discover Symfony UX’s Twig Components and Discover Symfony UX. UI with Stimulus. Read those first, as they contain more detailed Symfony UX information referenced here.

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.

Screenshot of Symfony UX

Symfony UX

If you have read our Twig Components article, you may scroll down to the Let’s turbocharge your app heading.

If not, Symfony describes Symfony UX as “JavaScript tools you can't live without. They’re a set of PHP and JavaScript packages to solve everyday frontend problems featuring Stimulus and Turbo.

Symfony UX is an initiative and set of libraries to seamlessly integrate JavaScript tools into your application.

Behind the scenes, the UX packages leverage Stimulus: a small but powerful library for binding JavaScript functionality to elements on your page.”

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.

Screenshot of Symfony UX componenents

Symfony UX Components/Packages

As the image above indicates, there are twelve components to make your programming life easier.

You can explore them all here.

Let’s turbocharge your app

Having examined all of them besides Turbo in our previous articles, we now look at it.

Screenshot of Turbo Symfony UX component

Turbo was originally developed by Hotwire for use in Ruby on Rails applications.

Symfony’s implementation of Turbo gives your application the speed of a single-page web app without writing any JavaScript. And the less JS we have in our lives, the better our lives are.

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:

“Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.

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.

Turbo Drive

This is a quick overview article, so I’m not going to reinvent the wheel here. Let's go to the docs.

They say:

“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.”

Turbo Frames

Hotwire says:

“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.”

Turbo Streams

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.

Explore all the Symfony documentation here.

And find Hotwire’s Turbo library documentation here.

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.

You get all of this without the headaches of JavaScript. It’s easy to use, and no way to lose.

A quick note is warranted here. William Pinaud gave a presentation on SPAs at a Symfony conference. It featured this insightful slide.

Graph for when and when not to use SPAs

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!

Screenshot of Symfony UX and Turbo SymfonyCasts

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!

section separator
Article Type
Donate using Liberapay

Symfony Station covers the essential news in the Symfony, PHP, and Fediverse development communities with a focus on protecting democracy. Please use the button above to make a small donation to help cover our out-of-pocket costs. Our labor is provided free of charge to support the communities we write about.

Join our newsletter list

Subscribe to The Payload, our weekly newsletter exploring the Symfony Universe.

  Start exploring!

Please share