WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.186 --> 00:00:05.446 align:middle
Welcome to the final chapter of
our intro to Symfony 6 tutorial.

00:00:06.026 --> 00:00:08.326 align:middle
If you're watching this, you're crushing it!

00:00:08.326 --> 00:00:12.686 align:middle
And it's time to celebrate by
installing one more package from Symfony.

00:00:13.106 --> 00:00:18.076 align:middle
But before we do, as you know, I
like to commit everything first...

00:00:18.366 --> 00:00:25.076 align:middle
in case the new package installs an interesting
recipe: Ok, let's install the new package:

00:00:25.626 --> 00:00:33.216 align:middle
composer require symfony/ux-turbo
See that "ux" in the package name?

00:00:33.716 --> 00:00:39.056 align:middle
Symfony UX is a set of libraries that add
JavaScript functionality to your app...

00:00:39.656 --> 00:00:41.816 align:middle
often with some PHP code to help.

00:00:42.576 --> 00:00:45.816 align:middle
For example, there's a library
for rendering charts...

00:00:45.936 --> 00:00:49.806 align:middle
and another for using an image
Cropper with the form system.

00:00:50.526 --> 00:00:53.836 align:middle
So, as you can see, this did install a recipe.

00:00:54.246 --> 00:00:58.486 align:middle
OoOOo. Run git status so
we can see what that did.

00:00:59.236 --> 00:01:05.096 align:middle
Most of this is normal, like config/bundles.php
means it enabled the new bundle.

00:01:05.746 --> 00:01:11.716 align:middle
The two interesting changes are
assets/controllers.json and package.json.

00:01:12.936 --> 00:01:15.056 align:middle
Let's check out package.json first.

00:01:16.156 --> 00:01:21.346 align:middle
When you install a UX package, what that
usually means is that you're integrating

00:01:21.346 --> 00:01:23.866 align:middle
with a third-party JavaScript library.

00:01:24.156 --> 00:01:28.796 align:middle
And so, that package's recipe
adds that library to your code.

00:01:28.796 --> 00:01:35.516 align:middle
In this case, the JavaScript library we're
integrating with is called @hotwired/turbo.

00:01:36.366 --> 00:01:43.796 align:middle
Also, the symfony/ux-turbo PHP package
itself comes with some extra JavaScript.

00:01:44.576 --> 00:01:46.876 align:middle
This special line says: Hey Node!

00:01:47.076 --> 00:01:51.626 align:middle
I want to include a package
called @symfony/ux-turbo...

00:01:51.826 --> 00:01:56.416 align:middle
but instead of downloading
that, you can just find its code

00:01:56.416 --> 00:02:00.276 align:middle
in the vendor/symfony/ux-turbo/Resources/assets
directory.

00:02:01.056 --> 00:02:06.166 align:middle
You can literally look at that path:
vendor/symfony/ux-turbo/Resources/assets

00:02:06.576 --> 00:02:08.886 align:middle
to find a mini JavaScript package.

00:02:10.016 --> 00:02:16.346 align:middle
Now, because this updated our package.json
file, we need to re-install our dependencies

00:02:16.546 --> 00:02:18.376 align:middle
to download and get this all set up.

00:02:19.406 --> 00:02:22.716 align:middle
In fact, find your terminal
that's running yarn watch.

00:02:23.386 --> 00:02:24.896 align:middle
We've got an error!

00:02:25.546 --> 00:02:30.786 align:middle
It says the file @symfony/ux-turbo/package.json
cannot be found,

00:02:31.276 --> 00:02:34.386 align:middle
try running yarn install -- force.

00:02:35.226 --> 00:02:35.856 align:middle
Let's do that!

00:02:36.536 --> 00:02:38.386 align:middle
Hit control+C to stop this...

00:02:39.056 --> 00:02:44.086 align:middle
and then run yarn install --
force or npm install -- force.

00:02:45.876 --> 00:02:52.546 align:middle
Then, restart Encore with: yarn watch
The other file the recipe modified

00:02:52.546 --> 00:02:55.126 align:middle
was assets/controllers.json.

00:02:55.916 --> 00:02:59.726 align:middle
Let's go take a look at that:
assets/controllers.json.

00:03:00.586 --> 00:03:04.076 align:middle
This is another thing that's
unique to Symfony UX.

00:03:04.836 --> 00:03:07.796 align:middle
Normally, if we want to add
a stimulus controller,

00:03:08.046 --> 00:03:10.286 align:middle
we put it into the controllers/ directory.

00:03:10.936 --> 00:03:16.946 align:middle
But sometimes, we might install
a PHP package and that may want

00:03:16.946 --> 00:03:20.586 align:middle
to add its own Stimulus controller into our app.

00:03:21.516 --> 00:03:24.616 align:middle
This syntax basically says: Hey Stimulus!

00:03:24.836 --> 00:03:30.956 align:middle
Go load this Stimulus controller from
that new @symfony/ux-turbo package.

00:03:31.726 --> 00:03:35.816 align:middle
Now this particular Stimulus
controller is a little weird.

00:03:36.506 --> 00:03:39.536 align:middle
It's not one that we're going
to use directly inside

00:03:39.536 --> 00:03:42.716 align:middle
of the stimulus_controller() Twig function.

00:03:43.446 --> 00:03:45.846 align:middle
This is, kind of a, fake controller.

00:03:46.646 --> 00:03:47.656 align:middle
What does it do?

00:03:48.306 --> 00:03:53.156 align:middle
Just by it being loaded, it's going
to activate the Turbo library.

00:03:53.996 --> 00:03:55.906 align:middle
So I keep talking about Turbo.

00:03:56.216 --> 00:03:57.926 align:middle
What is Turbo?

00:03:58.496 --> 00:04:01.016 align:middle
Well, by running that composer
require command...

00:04:01.256 --> 00:04:07.516 align:middle
then reinstalling yarn, the Turbo JavaScript
is now active and running on our site.

00:04:08.356 --> 00:04:09.746 align:middle
What does it do?

00:04:10.306 --> 00:04:17.776 align:middle
It's simple: it turns every link click and
form submit on our site into an Ajax call.

00:04:18.486 --> 00:04:21.466 align:middle
And that makes our site feel lightning fast.

00:04:22.176 --> 00:04:22.686 align:middle
Check it out.

00:04:23.196 --> 00:04:25.226 align:middle
Do one last full refresh.

00:04:26.086 --> 00:04:27.106 align:middle
And then watch...

00:04:27.806 --> 00:04:32.026 align:middle
if I click Browse, there
was no full page refresh!

00:04:32.886 --> 00:04:35.686 align:middle
If I click these icons, no refresh!

00:04:36.346 --> 00:04:40.766 align:middle
Turbo intercepts those clicks,
makes an Ajax call to the URL,

00:04:41.006 --> 00:04:43.916 align:middle
and then puts that HTML onto our site.

00:04:44.846 --> 00:04:52.676 align:middle
This is huge because, for free, our app suddenly
looks and feels like a single page app...

00:04:52.916 --> 00:04:54.766 align:middle
without us doing anything!

00:04:55.566 --> 00:05:00.316 align:middle
Now, one other cool thing you'll notice is
that even though full page reloads are gone,

00:05:00.816 --> 00:05:04.796 align:middle
these Ajax calls do show up
on the web debug toolbar.

00:05:05.366 --> 00:05:09.906 align:middle
And you can click to go see the profiler
for that Ajax call really easily.

00:05:10.976 --> 00:05:18.166 align:middle
This Ajax part of the web debug toolbar is even
more useful with Ajax calls for an API endpoint.

00:05:19.106 --> 00:05:20.856 align:middle
If we hit the play icon...

00:05:21.416 --> 00:05:23.316 align:middle
that 7 just went up to 8...

00:05:23.986 --> 00:05:27.476 align:middle
and here's the profiler for that API request!

00:05:28.206 --> 00:05:30.106 align:middle
I'll open that link in a new window.

00:05:31.166 --> 00:05:35.856 align:middle
That's a super easy way to get to
the profiler for any Ajax request.

00:05:36.756 --> 00:05:38.796 align:middle
So Turbo is amazing...

00:05:39.176 --> 00:05:40.936 align:middle
and it can do more.

00:05:41.646 --> 00:05:44.636 align:middle
There are some things you need to
know about it before shipping it

00:05:44.636 --> 00:05:47.866 align:middle
to production, and if you're interested, yup!

00:05:48.196 --> 00:05:50.586 align:middle
We have a full tutorial about Turbo.

00:05:51.206 --> 00:05:55.426 align:middle
I wanted to mention it in this
tutorial because Turbo is easiest

00:05:55.596 --> 00:05:57.726 align:middle
if you add it to your app early on.

00:05:58.576 --> 00:06:00.726 align:middle
All right, congratulations!

00:06:00.936 --> 00:06:04.476 align:middle
The first Symfony 6 tutorial is in the books!

00:06:04.846 --> 00:06:06.046 align:middle
Pat yourself on the back...

00:06:06.506 --> 00:06:10.076 align:middle
or better, find a friend and
give them a crisp high five.

00:06:10.906 --> 00:06:12.326 align:middle
And keep going!

00:06:12.986 --> 00:06:16.326 align:middle
Join us for the next tutorial in
this series, which will take you

00:06:16.326 --> 00:06:21.446 align:middle
from a budding Symfony developer to someone
who really understands what's going on.

00:06:22.176 --> 00:06:27.546 align:middle
How services work, the point of all of these
configuration files, Symfony environments,

00:06:27.696 --> 00:06:30.326 align:middle
environmental variables, and a lot more.

00:06:30.876 --> 00:06:34.986 align:middle
Basically everything you'll need to
do whatever you want with Symfony.

00:06:35.526 --> 00:06:38.876 align:middle
And if you have any questions
or ideas, we are here for you

00:06:38.876 --> 00:06:41.296 align:middle
down in the comments section below the video.

00:06:42.416 --> 00:06:44.126 align:middle
Alright friends, see you next time!