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

This article originally appeared on Symfony Station.

Introduction

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.

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.

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.

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.

This is a quick overview article, so I’m not going to reinvent the wheel here.

Turbo Drive

The docs 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.”

Mercure

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.

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!

Explore some more

We rate these SymfonyCast courses 10 out of 10.

• Symfony UX: Stimulus
• Symfony UX: Turbo

Take the Turbo course, it’s worth the investment. Plus, SymfonyCasts is entertaining.

Happy coding (without JS) Symfonistas!

Visit our Communiqué Library

You can find a vast array of curated evergreen content.

Author

Reuben Walker

Founder

Symfony Station