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

22.

Using a Full HTML Page to Populate a Frame

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!

I want to show one more lazy frame example. But before we do, I'm going to find my terminal and, yes, once again, run:

yarn upgrade @hotwired/turbo

This time I get beta version 8, which is actually the release I was waiting for. This changes how JavaScript is handled inside frames, which will be important for what we're about to do.

But for a minute, I want you to completely forget about frames. Let's pretend that we, being the nerds that we are, want to add a weather page to our site! Sure, we have this weather footer on the bottom of every page, but we also want people to be able to go to /weather and see the weather report front and center.

Creating a Normal Weather Page

Over in src/Controller/, create a new class called WeatherController. Make it extend AbstractController and add a public function weather() with a route above it: @Route('/weather'), name="app_weather". Inside, return $this->render('weather/index.html.twig').

            Copy Code

                        18 lines
            |
            src/Controller/WeatherController.php
        
            <?php
        
            namespace App\Controller;
        
            use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
        
            use Symfony\Component\Routing\Annotation\Route;
        
            class WeatherController extends AbstractController
        
            {
        
                /**
        
                 * @Route("/weather", name="app_weather")
        
                 */
        
                public function weather()
        
                {
        
                    return $this->render('weather/index.html.twig');
        
                }
        
            }

Cool! Let's go make that template! Down in templates/, create a new directory called weather/, and, inside, the new file: index.html.twig. Give this the basic structure {% extends 'base.html.twig' %}, {% block body %}, {% endblock %} and an <h1>.

Now go into base.html.twig and... at the bottom, steal all of the weather stuff: the anchor tag and the script element. In index.html.twig, paste.

            Copy Code

                        19 lines
            |
            templates/weather/index.html.twig
        
            {% extends 'base.html.twig' %}
        
            {% block body %}
        
                <h1>The Weather!</h1>
        
                <a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
        
                <script>
        
                !function (d, s, id) {
        
                    var js, fjs = d.getElementsByTagName(s)[0];
        
                    if (!d.getElementById(id)) {
        
                        js = d.createElement(s);
        
                        js.id = id;
        
                        js.src = 'https://weatherwidget.io/js/widget.min.js';
        
                        fjs.parentNode.insertBefore(js, fjs);
        
                    }
        
                }(document, 'script', 'weatherwidget-io-js');
        
                </script>
        
            {% endblock %}

Done! Oh, but in base.html.twig, let's add a link to this... find the cart link - there it is - copy it, paste, change the route to app_weather and... for the text, I'll use a FontAwesome icon: fas fa-sun.

            Copy Code

                            Show All Lines

                        110 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 29
                            
                                <ul class="navbar-nav">
        
                                    <li class="nav-item">
        
                                        <a class="nav-link" href="{{ path('app_weather') }}">
        
                                            <span class="fas fa-sun"></span>
        
                                        </a>
        
                                    </li>
        
                                    <li class="nav-item">
        
                                        <a class="nav-link" href="{{ path('app_cart') }}">
        
                                            Shopping Cart ({{ count_cart_items() }})
        
                                        </a>
        
                                    </li>
        
                Show Lines

                                                    // ... lines 41 - 110

Let's go check it out! Move over, refresh and... there's our sunshine! When we click the icon, we have a weather page. Amazing!

Though... having two weather widgets on the page does look weird. Let's remove the one in the footer for just this page. In base.html.twig, scroll back down to that area. Surround this in a new {% block weather_widget %} and, on the other side, {% endblock %}.

            Copy Code

                            Show All Lines

                        112 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 88
                            
                    {% block weather_widget %}
        
                    <a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
        
                    <script>
        
                    !function (d, s, id) {
        
                        var js, fjs = d.getElementsByTagName(s)[0];
        
                        if (!d.getElementById(id)) {
        
                            js = d.createElement(s);
        
                            js.id = id;
        
                            js.src = 'https://weatherwidget.io/js/widget.min.js';
        
                            fjs.parentNode.insertBefore(js, fjs);
        
                        }
        
                    }(document, 'script', 'weatherwidget-io-js');
        
                    </script>
        
                    {% endblock %}
        
                Show Lines

                                                    // ... lines 103 - 112

Back in index.html.twig, anywhere, override that block... but make it empty.

            Copy Code

                            Show All Lines

                        21 lines
            |
            templates/weather/index.html.twig
        
                Show Lines

                                                    // ... lines 1 - 18
                            
            {% block weather_widget %}{% endblock %}

Ok, refresh again and... cool!

At this point, we do have some code duplication between index.html.twig, and base.html.twig. We could easily fix that by isolating the weather widget code into its own template... and then using the Twig {{ include() }} function in both templates to bring that in.

Creating the Lazy Turbo Frame

But like we did with the featured product sidebar, I want you to pretend that it takes a lot of work to generate this HTML... maybe we make some database calls or API calls to generate it. And so, if we could convert the weather widget that's on the footer of every page into a lazy turbo frame, well, that would make every page load faster!

When we created a lazy turbo frame for the featured product sidebar, we started by making a route and a controller that rendered just that part of the page: just the featured product itself - without the layout. But this time, we're not going to do that.

Why not? Because we already have a page that contains the HTML we need! The weather page! Sure, it contains a lot of extra stuff that we don't want... like the HTML layout and the <h1> tag... but the turbo-frame system can ignore all that. Yup, we can jump straight to adding the turbo frame with zero extra work.

In base.html.twig, remove all the duplicated code and instead say, <turbo-frame id="">, how about, weather_widget. Then, because we want this to be a lazy frame, add src="" and point this at the full HTML page that we want to target: the weather page.

            Copy Code

                            Show All Lines

                        101 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 87
                            
                    {% block weather_widget %}
        
                        <turbo-frame id="weather_widget" src="{{ path('app_weather') }}"></turbo-frame>
        
                    {% endblock %}
        
                Show Lines

                                                    // ... lines 93 - 101

If we try this... I'll go to the homepage... it's not going to work. In the console, we see a familiar error!

Response has no matching <turbo-frame id="weather_widget"> element.

Of course! We need to tell the Turbo frame system which part of the weather page to use for this frame. Over in index.html.twig - the template for the full weather page - wrap the entire weather section in a <turbo-frame> that has id="weather_widget". I'll put the closing tag down here... and indent.

            Copy Code

                            Show All Lines

                        23 lines
            |
            templates/weather/index.html.twig
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            {% block body %}
        
                <h1>The Weather!</h1>
        
                <turbo-frame id="weather_widget">
        
                    <a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
        
                    <script>
        
                    !function (d, s, id) {
        
                        var js, fjs = d.getElementsByTagName(s)[0];
        
                        if (!d.getElementById(id)) {
        
                            js = d.createElement(s);
        
                            js.id = id;
        
                            js.src = 'https://weatherwidget.io/js/widget.min.js';
        
                            fjs.parentNode.insertBefore(js, fjs);
        
                        }
        
                    }(document, 'script', 'weatherwidget-io-js');
        
                    </script>
        
                </turbo-frame>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 21 - 23

Testing time! Refresh again and... it works! That's amazing! We're now able to reuse just parts of existing pages simply by wrapping those parts inside a <turbo-frame>. If you look at the network tools... and find the Ajax call for the weather page, there's no magic here: the Ajax call for the frame did return the full HTML.

And this is really how frames are meant to be used. You have an existing page like the weather page, and then you're able to reuse parts of that page inside a frame instead of needing to build an extra endpoint that returns only the part you want.

Truly Lazy Frames: Load only when Visible

Ok, ready to be more amazed? Check out the homepage: this is a long page. Don't you think it's kind of a wasteful to load the weather widget in the footer... even if the user never scrolls down that far? It is wasteful! And we can fix that!

In base.html.twig, on the turbo-frame, add a new attribute: loading="lazy",

            Copy Code

                            Show All Lines

                        101 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 87
                            
                    {% block weather_widget %}
        
                        <turbo-frame id="weather_widget" src="{{ path('app_weather') }}" loading="lazy"></turbo-frame>
        
                    {% endblock %}
        
                Show Lines

                                                    // ... lines 93 - 101

Let's see what that did. Scroll to the top of the homepage, refresh and make sure you're looking at the Ajax calls in the network tools. Notice that Turbo has not, yet, made an Ajax request for the weather page. But keep an eye on this. If we scroll down... there it is! Yup, when you add loading="lazy", the request isn't made until the frame becomes visible. That's super cool.

But... there's a lingering bug in our code. It's more about the JavaScript for the weather widget than about the turbo-frame we created. Let's find out what the bug is next and create a Stimulus controller that will make the weather JavaScript finally, fully functional, no matter how we load it.

4 Comments

Sort By

Alcides 2 years ago

Hi Ryan. As far as I understood turbo frame is not SEO friendly right? By the way great Stimulus and Turbo tutorials.

| Reply |

weaverryan SFCASTS Alcides 2 years ago edited

Hey Alcides!

Thanks for the nice words - I appreciate it! ❤️

As far as I understood turbo frame is not SEO friendly right?

Well.... yes and no. It IS true that, even if a search engine crawler supported JavaScript, if they click a link inside a Turbo frame, the URL in the address bar wouldn't change... so I imagine that they wouldn't do any indexing on that. In other words, they would effectively ignore that link.

However, one of the beautiful things about turbo frames is that the links are REAL links, where the href="" points to a real page. For example, suppose you have a sidebar with a <a href="/news">News</a>. If you think about it, you don't need the crawler to properly click your turbo frame link and have it load in the frame... because this is a REAL link. So it WILL find the "/news" page and index that as its OWN page.

I hope this makes sense :). Ultimately, you build real pages first (e.g. /news) which of course ARE indexable. Then, Turbo Frames are a way to "spice up" your site by making the content on those real pages visible elsewhere on your site.

Cheers!

| Reply |

Alcides weaverryan 2 years ago

Thanks for your very nice response.

Good point and I agree with you that crawler will follow the links since they are real links.

But what I had in mind is that since frame's tag is a custom html's tag and the content inside it is load via ajax even in the first page load I wonder if crawlers will be available to index that content.

Cheers

| Reply |

weaverryan SFCASTS Alcides 2 years ago edited

Hey Alcides!

Sorry for the slow reply!

> But what I had in mind is that since frame's tag is a custom html's tag and the content inside it is load via ajax even in the first page load I wonder if crawlers will be available to index that content.

Ah! The custom tag is no problem - any HTML tags are legal, I'm pretty much positive that crawlers won't care about this. About the AJAX call, it's possible crawler's will have issues with it... though I think they're pretty good these days. If your content is important enough, just avoid the lazy-loading part of a frame: load the HTML into the frame on page load, instead of using the src= attribute. So, you'll need to make the best choice based on how important that content is and how worried you are that it may not get parsed if you load it lazily :).

Cheers!

| Reply |

Symfony 5.2 Turbo 1.2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "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

Using a Full HTML Page to Populate a Frame

Share this awesome video!

Keep on Learning!

Creating a Normal Weather Page

Creating the Lazy Turbo Frame

Truly Lazy Frames: Load only when Visible

4 Comments

Delete comment?

What PHP libraries does this tutorial use?

What JavaScript libraries does this tutorial use?

	<?php

	namespace App\Controller;

	use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
	use Symfony\Component\Routing\Annotation\Route;

	class WeatherController extends AbstractController
	{
	/**
	* @Route("/weather", name="app_weather")
	*/
	public function weather()
	{
	return $this->render('weather/index.html.twig');
	}
	}

	{% extends 'base.html.twig' %}

	{% block body %}
	<h1>The Weather!</h1>

	<a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
	<script>
	!function (d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (!d.getElementById(id)) {
	js = d.createElement(s);
	js.id = id;
	js.src = 'https://weatherwidget.io/js/widget.min.js';
	fjs.parentNode.insertBefore(js, fjs);
	}
	}(document, 'script', 'weatherwidget-io-js');
	</script>
	{% endblock %}

Show Lines	// ... lines 1 - 29
	<ul class="navbar-nav">
	<li class="nav-item">
	<a class="nav-link" href="{{ path('app_weather') }}">
	<span class="fas fa-sun"></span>
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="{{ path('app_cart') }}">
	Shopping Cart ({{ count_cart_items() }})
	</a>
	</li>
Show Lines	// ... lines 41 - 110

Show Lines	// ... lines 1 - 88
	{% block weather_widget %}
	<a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
	<script>
	!function (d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (!d.getElementById(id)) {
	js = d.createElement(s);
	js.id = id;
	js.src = 'https://weatherwidget.io/js/widget.min.js';
	fjs.parentNode.insertBefore(js, fjs);
	}
	}(document, 'script', 'weatherwidget-io-js');
	</script>
	{% endblock %}
Show Lines	// ... lines 103 - 112

Show Lines	// ... lines 1 - 18

	{% block weather_widget %}{% endblock %}

Show Lines	// ... lines 1 - 87

	{% block weather_widget %}
	<turbo-frame id="weather_widget" src="{{ path('app_weather') }}"></turbo-frame>
	{% endblock %}

Show Lines	// ... lines 93 - 101

Show Lines	// ... lines 1 - 2
	{% block body %}
	<h1>The Weather!</h1>

	<turbo-frame id="weather_widget">
	<a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
	<script>
	!function (d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (!d.getElementById(id)) {
	js = d.createElement(s);
	js.id = id;
	js.src = 'https://weatherwidget.io/js/widget.min.js';
	fjs.parentNode.insertBefore(js, fjs);
	}
	}(document, 'script', 'weatherwidget-io-js');
	</script>
	</turbo-frame>
	{% endblock %}
Show Lines	// ... lines 21 - 23