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

14.

Reloading When JS/CSS Changes

|

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

Infourok 2 years ago edited

In turbo 8 we also have "dynamic" for CSS, see https://github.com/hotwired/turbo/pull/1140

1 |

Victor SFCASTS Infourok 2 years ago

Hey Infourok,

That's cool, thanks for this tip! :)

Cheers!

|

Vafilor 4 years ago edited

Hey guys,

Does this mean you can't have multiple entries in your <b>webpack.config.js</b> file, combined with adding extra javascript and link tags per page when this is on? E.g.


{# templates/another/index.html.twig #}
{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('another') }}
{% endblock %}

If you do, and you visit another page, it will have new js/css, so it will always reload, right?

This is no problem if you're using all stimulus for javascript, but does this mean you would put all of your css into the main app.(s)css? Any tips for separation? I'm thinking of splitting things into partials and import them all in app.(s)css.

Thanks!

1 |

Vafilor Vafilor 4 years ago

This does seem to be the case: https://discuss.hotwired.de...

|

weaverryan SFCASTS Vafilor 4 years ago edited

Hey Vafilor!

Yes, as you already saw, this IS the case. The "reloading" system is kind of "dumb": if there are ANY new script/link tags then... boom! You get the full page reload.

Generally-speaking, I've been moving away from using multiple Webpack entry files. Instead, I'm using "dynamic imports" https://symfonycasts.com/sc... or the super-cool "lazy controllers" - https://symfonycasts.com/sc...

For me, this keeps my code simpler, but I still have the benefits of splitting things into smaller pieces to prevent having a GIANT app.js or app.css file. CSS can be dynamically imported in this exact same way.

> but does this mean you would put all of your css into the main app.(s)css?

I would put all of my "main" and most important CSS (for my general layout, etc) into this file (see note below). If I have some CSS that I'd like to not include in the final build app.css file for performance reasons, then I would try to import it from some Stimulus controller and load that controller lazily.

> Any tips for separation? I'm thinking of splitting things into partials and import them all in app.(s)css.

There are 2 reasons to separate your code: (A) performance (a smaller built app.css file) and (B) internal organization. I've talked a lot about part (A). But for (B), totally! Feel free to separate your main CSS into partials and then import from app.css - we do that internally here. Probably 90% of our CSS is done this way (they live in scss partials and are imported by app.scss). The last 10% are for features that are not on the main part of our site (e.g. challenges) and so we import them from a lazy stimulus controller.

Cheers!

1 |

nonplusultra 1 year ago

Where do you set data-turbo-track when you use asset mapper instead of webpack? The only supported command - that is similar - is: importmap_script_attributes:

        'data-turbo-track': 'reload'

in: asset_mapper.yaml

But this only affects imports from the import map.
Neither other used script tags nor link tags...

|

Victor SFCASTS nonplusultra 1 year ago edited

Hey @nonplusultra ,

Seems you can do it with importmap_script_attributes now, see: https://symfony.com/doc/current/frontend/asset_mapper.html#framework-asset-mapper-importmap-script-attributes

You can run bin/console conf:dump framework asset_mapper to see the example of configuration with data-turbo-track: reload.

Make sure you're updated to the latest AssetMapper version. I hope that helps!

Cheers!

|

Ewald V. 4 years ago

Simply out of curiosity, why isn't the behavior behind the data-turbo-track="reload" attribute something that's done by default? Isn't this something you always want checked? Why is it optional?

|

weaverryan SFCASTS Ewald V. 4 years ago edited

Hey Ewald V.!

That's... actually a great question! There are two parts to this:

A) In Turbo, they need to know which things we consider as "assets" that should be tracked. So, they make us add this attribute. Maybe they could safely "guess" and use all link & script tags instead of forcing us to mark them. I'm not sure... there is likely an edge case where that wouldn't work.

B) In WebpackEncoreBundle, we could ALSO just "turn this on by default". We actually talked about this. I was against it, only because it feels weird to me to activate this data-turbo-track="reload" on every Symfony site by default regardless of whether they're using Turbo or no.

So, the end result is that this is something you need to activate... even though you always need it if you're using Turbo. We did update the recipe to have these lines, however. So you just need to uncomment them: https://github.com/symfony/...

Cheers!

1 |

Ewald V. weaverryan 4 years ago

Clear! Thanks for the detailed answer!

|

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