Chapters

57 Chapters | 6:19:46 |

01

Turbo: Drive, Frames & Streams!

5:03
02

Installing Turbo

3:41
03

How Turbo Drive Works

9:37
04

Turbo-Friendly JavaScript

6:56
05

The "defer" Attribute & Conditionally Activating Turbo

4:02
06

Form 422 Status & renderForm()

9:05
07

Form Submits & The Preview Feature

7:06
08

The Problem of Snapshots & JavaScript Popups

9:46
09

Cleanup Before Snapshotting (e.g. Modals)

6:03
10

Fixing the Sweetalert Modal

7:14
11

Organizing our Turbo Events Code

3:12
12

3rd Party JavaScript Widgets

7:52
13

Fixing External JS + Analytics Code

8:46
14

Reloading When JS/CSS Changes

6:52
15

Manual Visits with Turbo

5:04
16

CSS Page Transitions

7:24
17

Polished CSS Transitions

8:58
18

Prefetching the Next Page

5:19
19

<link rel="prefetch">

7:37
20

Turbo Frames: Lazy Frames

6:32
21

Turbo Frames Look for & Load the Matching Frame

4:24
22

Using a Full HTML Page to Populate a Frame

7:24
23

Reliably Load External JS with Stimulus

9:57
24

Targeting Links in or out of the Frame

5:00
25

Adding a "Read More" Ajax Frame

8:02
26

Frame Loading Animations

7:45
27

Review this Product... in a turbo-frame!

7:50
28

Globally Disable Buttons on Form Submit

5:50
29

Frame-Powered Inline Editing

6:45
30

Frames & Form "action" Attributes

7:45
31

Frame Redirecting & Dynamic Frame Targets

6:21
32

turbo-frame inside a Modal

7:06
33

Lazy Modal & Big Cleanup

4:59
34

Close the Modal after turbo-frame Success

6:17
35

Prevent a turbo-frame from Rendering

6:34
36

Full Page Redirect from a Frame

6:05
37

Redirecting the Full Page from a Frame

5:14
38

Frame Redirecting and Clearing the Snapshot Cache

6:51
39

Manual "Restore" Visit

8:11
40

Adding a Custom Request Header Based on the Frame

7:02
41

Smart Frame Redirecting with the Server

6:29
42

Automatically Redirect Ajax Calls to /login

5:14
43

Turbo Streams

8:01
44

Streams: Reusing Templates

4:37
45

Multiple Updates in one Stream

7:00
46

Processing Streams by Hand for Fun & Profit

5:18
47

Mercure: Pushing Stream Updates Async

4:43
48

Running the Mercure Service in the symfony Binary

4:28
49

Listening & Publishing

5:42
50

Mercure Hub's JWT Authorization

6:58
51

Publishing Mercure Updates in PHP

3:47
52

Turbo Stream for Instant Review Update

8:50
53

Smartly Updating Elements for all Users

7:06
54

Visually Highlighting new Items that Pop onto the Page

5:26
55

Entity Broadcast

7:02
56

Broadcasting Frontend Changes on Entity Update/Remove

7:28
57

Toast Notifications

10:14

> JavaScript Frameworks & Tools > Symfony UX: Turbo

Buy Access to Course

16.

CSS Page Transitions

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

10 Comments

Sort By

Login or Register to join the conversation

akincer 3 years ago edited

I have a working example of paused rendering and it takes quite a bit.

Here's the core of how you do it:

Create a listener for turbo:before-render on document
In the callback you assign to this listener:
1. Pause rendering event.preventDefault()
2. await the result of a promise that executes another function you define
3. this function returns a promise that creates another listener for animationend on the element you're animating in a promise
4. In the callback for animationend you resolve the promise
Resume rendering after the await from 2.3 event.detail.resume()

You can see a rough outline of what this looks like here

You can view a library (Turn) that has an implementation here

The Turn library does not fit all situations and didn't work for my needs at all but did point me in the direction of how to get this working. If you don't have a lot of experience with promises this can be frustrating to get working but once you do it's pure magic.

2 |

Victor SFCASTS akincer 3 years ago

Hey Akincer,

I haven't tried it personally, but thank you for sharing this with others!

Cheers!

|

akincer Victor 3 years ago

I'm working on a controller that handles the dirty details that should be fairly adaptable that I'll share once I get it finished. Once you start tinkering with timing of things it gets a little weird and tricky or at least it did for me. The real tricky part is form submissions back to the same page especially if you have a multi-step form or some other step by step interface.

|

akincer akincer 3 years ago edited

One more thing -- if you DO decide to hook into turbo:before-render just know there's a really high if not certain chance that you'll break the back button and maybe even the forward button (haven't tested that). To deal with this you'll want to tap into the popstate event on window so you can set a flag or something in the callback you can check inside your turbo:before-render callback if this event has fired before you pause rendering. This also allows you to get creative with your animations so you can reverse your animations if you so choose to provide a smooth experience.

|

akincer 3 years ago

I finally have something I think is ready for people to play with that leverages pausable rendering. As with most things it's a work in progress. The main downside is you have to disable caching.

Hopefully someone finds it useful or educational.

Stimulus Animation Orchestrator

1 |

Nick-F 4 years ago

Pausable rendering has been implemented since this video
https://github.com/hotwired...

I'm going to try to implement it on my own but a video on integrating Swup with Turbo would be awesome

|

weaverryan SFCASTS Nick-F 4 years ago

Yes, I need to try this :).

> but a video on integrating Swup with Turbo would be awesome

It's not that you would integrate Swup WITH Turbo... more that you would take advantage of the "pausable" rendering in order to do Swup-like transitions in Turbo (taking inspiration from Swup).

Anyways, if you have any luck, I'd love to know!

Cheers!

|

Nick-F weaverryan 4 years ago

Yeah... it looks like swup and turbo do almost the same exact thing: turn all the links in the body to ajax calls. So, right now it looks to me like there's no point in using both together, it's either one or the other. Or if there's some other capabilities that only Turbo has, then I can just disable turbo-drive and use the other stuff. I just really want swup, it looks sick
But, I've still got a ways to go in this tutorial so we'll see

|

weaverryan SFCASTS Nick-F 4 years ago

Yea, that's the draw of Swup as I understand it - you get those slick transitions out of the box. With Turbo, they appear to now be possible, but you would likely be rolling them manually :).

Turbo Drive and Swup are, as you said, effectively the same in what they do. The "extra" that Turbo has (that I don't think Swup has) is the "Frames" and "Streams" systems, if you need those.

Cheers!

|

Nick-F weaverryan 4 years ago

Yes, I just finished the course and my mind is blown by the possibilities of frames and streams.
I haven't dug too deep into swup yet but it seems like swup containers may be comparable to frames.
I'm doing a lot of backend stuff right now but I can't wait to get another full-stack project to try it out.

|

Symfony 5.2 Turbo 1.2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.13.1
        "doctrine/doctrine-bundle": "^2.2", // 2.3.2
        "doctrine/orm": "^2.8", // 2.9.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^6.1", // v6.1.4
        "symfony/asset": "5.3.*", // v5.3.0-RC1
        "symfony/console": "5.3.*", // v5.3.0-RC1
        "symfony/dotenv": "5.3.*", // v5.3.0-RC1
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.3.*", // v5.3.0-RC1
        "symfony/framework-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/property-access": "5.3.*", // v5.3.0-RC1
        "symfony/property-info": "5.3.*", // v5.3.0-RC1
        "symfony/proxy-manager-bridge": "5.3.*", // v5.3.0-RC1
        "symfony/runtime": "5.3.*", // v5.3.0-RC1
        "symfony/security-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/serializer": "5.3.*", // v5.3.0-RC1
        "symfony/twig-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/ux-chartjs": "^1.1", // v1.3.0
        "symfony/ux-turbo": "^1.3", // v1.3.0
        "symfony/ux-turbo-mercure": "^1.3", // v1.3.0
        "symfony/validator": "5.3.*", // v5.3.0-RC1
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.2
        "symfony/yaml": "5.3.*", // v5.3.0-RC1
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.1
        "twig/intl-extra": "^3.2", // v3.3.0
        "twig/string-extra": "^3.3", // v3.3.1
        "twig/twig": "^2.12|^3.0" // v3.3.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.3.0-RC1
        "symfony/maker-bundle": "^1.27", // v1.31.1
        "symfony/monolog-bundle": "^3.0", // v3.7.0
        "symfony/stopwatch": "^5.2", // v5.3.0-RC1
        "symfony/var-dumper": "^5.2", // v5.3.0-RC1
        "symfony/web-profiler-bundle": "^5.2", // v5.3.0-RC1
        "zenstruck/foundry": "^1.10" // v1.10.0
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.13.13
        "@fortawesome/fontawesome-free": "^5.15.3", // 5.15.3
        "@hotwired/turbo": "^7.0.0-beta.5", // 1.2.6
        "@popperjs/core": "^2.9.1", // 2.9.2
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/Resources/assets", // 0.1.0
        "@symfony/ux-turbo-mercure": "file:vendor/symfony/ux-turbo-mercure/Resources/assets", // 0.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.3.0
        "bootstrap": "^5.0.0-beta2", // 5.0.1
        "chart.js": "^2.9.4",
        "core-js": "^3.0.0", // 3.13.0
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.2
        "react-dom": "^17.0.1", // 17.0.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "https://github.com/weaverryan/stimulus-autocomplete#toggle-event-always-dist", // 2.0.0
        "stimulus-use": "^0.24.0-1", // 0.24.0-2
        "sweetalert2": "^11.0.8", // 11.0.12
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.2
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Challenge

Next Challenge