WEBVTT

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

00:00:00.956 --> 00:00:03.426 align:middle
Head back to the homepage and
click any of the articles.

00:00:04.336 --> 00:00:08.426 align:middle
In an earlier tutorial, we added this
heart icon that, when you click it,

00:00:08.746 --> 00:00:11.136 align:middle
makes an AJAX request and increases the counter.

00:00:11.806 --> 00:00:15.306 align:middle
Well, part of this is faked on
the backend, but you get the idea.

00:00:16.116 --> 00:00:21.996 align:middle
To make this more clear, let's add a Bootstrap
tooltip: when the user hovers over the heart,

00:00:22.176 --> 00:00:24.456 align:middle
we can say something like "Click to like".

00:00:25.336 --> 00:00:30.596 align:middle
No problem: open up the template:
article/show.html.twig.

00:00:31.006 --> 00:00:36.706 align:middle
And I'll remind you that this page
has its own entry: article_show.js.

00:00:36.706 --> 00:00:41.476 align:middle
Go open that: assets/js/article_show.js.

00:00:42.726 --> 00:00:45.866 align:middle
Ok, let's find the anchor tag in the template...

00:00:47.006 --> 00:00:47.806 align:middle
there it is...

00:00:48.066 --> 00:00:51.136 align:middle
and use multiple lines for sanity.

00:00:52.876 --> 00:00:55.676 align:middle
Now add title="Click to Like".

00:00:57.436 --> 00:01:02.546 align:middle
To make this work, all we need to do
is copy the js-like-article class,

00:01:03.316 --> 00:01:11.046 align:middle
go back to article_show.js and add
$('.js-like-article').tooltip(),

00:01:11.106 --> 00:01:13.336 align:middle
which is a function added by Bootstrap.

00:01:14.026 --> 00:01:15.756 align:middle
Coolio! Let's try it.

00:01:16.146 --> 00:01:17.666 align:middle
Refresh and...

00:01:18.076 --> 00:01:19.136 align:middle
of course.

00:01:19.186 --> 00:01:26.406 align:middle
It doesn't work: ...tooltip is not a
function This may or may not surprise you.

00:01:26.406 --> 00:01:32.536 align:middle
Think about it: at the bottom of the page,
the app.js <script> tags are loaded first.

00:01:34.086 --> 00:01:40.026 align:middle
And, if you remember, inside of app.js,
we import jquery and then bootstrap,

00:01:40.286 --> 00:01:43.346 align:middle
which adds the tooltip() function to jQuery.

00:01:43.936 --> 00:01:50.186 align:middle
So, it's reasonable to think that, inside
article_show.js, when we import jquery,

00:01:50.526 --> 00:01:56.356 align:middle
we will get the same jQuery object that's
already been modified by bootstrap.

00:01:56.776 --> 00:01:59.606 align:middle
And... that's almost true.

00:02:00.376 --> 00:02:07.146 align:middle
When two different files import the same module,
they do get the exact same object in memory.

00:02:07.676 --> 00:02:14.466 align:middle
However, by default, Webpack treats different
entrypoints like totally separate applications.

00:02:14.876 --> 00:02:21.436 align:middle
So if we import jquery from app.js
and also from get_nice_message.js,

00:02:21.876 --> 00:02:27.396 align:middle
which is part of the same entry,
they will get the same jQuery object.

00:02:27.996 --> 00:02:33.716 align:middle
But when we import jquery from article_show.js,
we get a different object in memory.

00:02:34.346 --> 00:02:37.176 align:middle
Each entrypoint has an isolated environment.

00:02:37.876 --> 00:02:40.106 align:middle
It doesn't mean that jQuery is downloaded twice,

00:02:40.426 --> 00:02:44.096 align:middle
it just means that we are
given two different instances.

00:02:44.156 --> 00:02:48.776 align:middle
So the fix is simple: import 'bootstrap'.

00:02:51.506 --> 00:02:52.886 align:middle
Refresh and...

00:02:53.216 --> 00:02:55.046 align:middle
this time, it works.

00:02:55.846 --> 00:03:00.166 align:middle
Understanding that modules are not
shared across entries is good to know.

00:03:00.676 --> 00:03:05.576 align:middle
But this also relates to a feature I
want to talk about: the runtime chunk.

00:03:06.626 --> 00:03:11.086 align:middle
In webpack.config.js, at the
very beginning of the tutorial,

00:03:11.426 --> 00:03:18.166 align:middle
we commented out enableSingleRuntimeChunk() and
replaced it with disableSingleRuntimeChunk().

00:03:18.666 --> 00:03:20.976 align:middle
Now, let's reverse that.

00:03:22.776 --> 00:03:27.796 align:middle
Because we just modified the Webpack
config, come back over, press control + c

00:03:28.046 --> 00:03:36.916 align:middle
and restart it: yarn watch If you watch
closely, you'll see an immediate difference.

00:03:37.576 --> 00:03:42.996 align:middle
Every single entry now includes
a new file called runtime.js,

00:03:43.376 --> 00:03:47.266 align:middle
which means that it's a new
file that needs to be included

00:03:47.266 --> 00:03:51.086 align:middle
as the first script tag before any entry.

00:03:51.846 --> 00:03:56.756 align:middle
Of course, that's not a detail that we need
to worry about because, when we refresh

00:03:56.846 --> 00:04:01.786 align:middle
and view the page source, our Twig
functions took care of rendering everything.

00:04:02.866 --> 00:04:04.936 align:middle
Ok, so... why?

00:04:05.246 --> 00:04:07.846 align:middle
What did this change and why did we care?

00:04:08.486 --> 00:04:09.486 align:middle
There are two things.

00:04:09.576 --> 00:04:17.056 align:middle
First, runtime.js contains Webpack's "runtime"
code: stuff it needs to get its job done.

00:04:17.376 --> 00:04:21.816 align:middle
By enabling the single runtime
chunk you're saying: Hey Webpack!

00:04:22.046 --> 00:04:28.026 align:middle
Instead of adding this code at the beginning of
app.js and at the beginning of article_show.js

00:04:28.136 --> 00:04:35.166 align:middle
and all my other entry files, only add
it once to runtime.js The user now has

00:04:35.166 --> 00:04:39.086 align:middle
to download an extra file, but all
the entry files are a bit smaller.

00:04:39.646 --> 00:04:42.066 align:middle
But, there's more to it than that.

00:04:42.586 --> 00:04:48.256 align:middle
The runtime.js file contains something
called the "manifest", which is a fancy name

00:04:48.256 --> 00:04:53.896 align:middle
that Webpack gives to code that contains
some internal ids that Webpack uses

00:04:53.896 --> 00:04:56.366 align:middle
to identify different parts of your code.

00:04:57.046 --> 00:05:02.616 align:middle
The key this is that those ids
often change between builds.

00:05:03.056 --> 00:05:09.506 align:middle
So, by isolating that code into runtime.js,
it means that our other JavaScript files -

00:05:09.826 --> 00:05:17.106 align:middle
the ones that contain our big code - will change
less often: when those internal ids change,

00:05:17.306 --> 00:05:19.466 align:middle
it will not affect their content.

00:05:20.316 --> 00:05:25.486 align:middle
The tl;dr is that the smaller
runtime.js will change more often,

00:05:25.736 --> 00:05:29.376 align:middle
but our bigger JavaScript
files will change less often.

00:05:29.836 --> 00:05:31.526 align:middle
That's great for caching.

00:05:32.216 --> 00:05:38.506 align:middle
The other thing that enableSingleRuntimeChunk()
changes may or may not be a good thing.

00:05:39.376 --> 00:05:43.936 align:middle
Go back to article_show.js and
comment out import 'bootstrap'.

00:05:45.336 --> 00:05:47.556 align:middle
Now, move over and refresh.

00:05:49.436 --> 00:05:51.196 align:middle
Yea, it works!

00:05:51.816 --> 00:05:58.056 align:middle
When you enable the single runtime chunk,
it has a side effect: modules are shared

00:05:58.196 --> 00:06:04.506 align:middle
across your entry points: they all work
a bit more like one, single application.

00:06:05.106 --> 00:06:09.516 align:middle
That's not necessarily a good or bad
thing: just something to be aware of.

00:06:10.046 --> 00:06:12.996 align:middle
I still do recommend treating each entry file

00:06:12.996 --> 00:06:17.096 align:middle
like its own independent environment,
even if there is some sharing.

00:06:17.096 --> 00:06:21.266 align:middle
Next: it's time to talk about async imports!

00:06:21.816 --> 00:06:24.696 align:middle
Have some code that's only
used in certain situations?

00:06:25.256 --> 00:06:27.886 align:middle
Make your built files smaller by loading it...

00:06:28.176 --> 00:06:30.296 align:middle
effectively, via AJAX.