Symfony UX: Turbo

Think you need to build an SPA (single page app) in React or Vue to make your site feel like an SPA? Think again!

In part 1 of this series - Symfony UX: Stimulus - we talked about a library that allows you to attach JavaScript functionality to HTML elements - even if that HTML is loaded via AJAX.

In this course, we'll talk about Turbo: a JavaScript library that instantly makes your site feel like an SPA. How? By turning every link and form into an AJAX call... without you needing to make any changes to your app (well, almost no changes):

• Understanding and enabling Turbo Drive!
• Reloading the page when assets change
• Form updates: returning a 4xx status code
• AJAX loading parts of your page with Turbo Frames
• Symfony'x ux-turbo package!
• Making links/form submits "stay" inside a frame
• Targeting the main page from a frame
• Turbo streams: updating multiple parts of your page from the server!

The end result? A "traditional" site (one that returns HTML) that absolutely flies!

• Turbo: Drive, Frames & Streams!
• Installing Turbo
• How Turbo Drive Works
• Turbo-Friendly JavaScript
• The "defer" Attribute & Conditionally Activating Turbo
• Form 422 Status & renderForm()
• Form Submits & The Preview Feature
• The Problem of Snapshots & JavaScript Popups
• Cleanup Before Snapshotting (e.g. Modals)
• Fixing the Sweetalert Modal
• Organizing our Turbo Events Code
• 3rd Party JavaScript Widgets
• Fixing External JS + Analytics Code
• Reloading When JS/CSS Changes
• Manual Visits with Turbo
• CSS Page Transitions
• Polished CSS Transitions
• Prefetching the Next Page
• Turbo Frames: Lazy Frames
• Turbo Frames Look for & Load the Matching Frame
• Using a Full HTML Page to Populate a Frame
• Reliably Load External JS with Stimulus
• Targeting Links in or out of the Frame
• Adding a "Read More" Ajax Frame
• Frame Loading Animations
• Review this Product... in a turbo-frame!
• Globally Disable Buttons on Form Submit
• Frame-Powered Inline Editing
• Frames & Form "action" Attributes
• Frame Redirecting & Dynamic Frame Targets
• turbo-frame inside a Modal
• Lazy Modal & Big Cleanup
• Close the Modal after turbo-frame Success
• Prevent a turbo-frame from Rendering
• Full Page Redirect from a Frame
• Redirecting the Full Page from a Frame
• Frame Redirecting and Clearing the Snapshot Cache
• Manual "Restore" Visit
• Adding a Custom Request Header Based on the Frame
• Smart Frame Redirecting with the Server
• Automatically Redirect Ajax Calls to /login
• Turbo Streams
• Streams: Reusing Templates
• Multiple Updates in one Stream
• Processing Streams by Hand for Fun & Profit
• Mercure: Pushing Stream Updates Async
• Running the Mercure Service in the symfony Binary
• Listening & Publishing
• Mercure Hub's JWT Authorization
• Publishing Mercure Updates in PHP
• Turbo Stream for Instant Review Update
• Smartly Updating Elements for all Users
• Visually Highlighting new Items that Pop onto the Page
• Entity Broadcast
• Broadcasting Frontend Changes on Entity Update/Remove
• Toast Notifications