WEBVTT

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

00:00:01.086 --> 00:00:05.566 align:middle
When you use Webpack, the hardest thing
is that you need to start thinking

00:00:05.566 --> 00:00:07.826 align:middle
about your JavaScript differently.

00:00:08.516 --> 00:00:13.216 align:middle
You need to stop thinking about
global variables, and start thinking

00:00:13.216 --> 00:00:15.396 align:middle
about how you can code correctly.

00:00:16.066 --> 00:00:21.516 align:middle
It's not as easy as it sounds: we've been
using global variables in JavaScript...

00:00:21.876 --> 00:00:23.526 align:middle
well... forever!

00:00:23.656 --> 00:00:30.216 align:middle
For example, in RepLogApp.js, we
created this self-executing function

00:00:30.416 --> 00:00:33.196 align:middle
to give our code a little bit of isolation.

00:00:34.176 --> 00:00:35.896 align:middle
That part isn't too important.

00:00:36.536 --> 00:00:42.896 align:middle
But at the bottom, we are relying on
there to be a global jQuery variable.

00:00:43.426 --> 00:00:47.836 align:middle
It just must exist, or else
everything will explode!

00:00:49.146 --> 00:00:52.666 align:middle
On top, this becomes a $
variable in the function.

00:00:53.746 --> 00:00:56.826 align:middle
Open the base layout file - base.html.twig.

00:00:58.036 --> 00:01:02.686 align:middle
The only reason our code works
is that, at the bottom, yep!

00:01:03.146 --> 00:01:08.826 align:middle
We have a script tag for jQuery,
which adds a global jQuery variable.

00:01:09.316 --> 00:01:15.546 align:middle
And this is the process we've used for
years: add a script tag for a JS library,

00:01:15.856 --> 00:01:19.256 align:middle
then reference its global
variable everywhere else.

00:01:19.846 --> 00:01:21.436 align:middle
I hate this!

00:01:22.086 --> 00:01:28.146 align:middle
In RepLogApp.js, I just have to hope
that jQuery was included correctly.

00:01:29.116 --> 00:01:32.026 align:middle
That's madness, and it needs to stop.

00:01:32.626 --> 00:01:40.386 align:middle
So, from now on, we have a new philosophy:
if we need a variable in a file - like $ -

00:01:40.976 --> 00:01:47.226 align:middle
then we need to require it in the
same way that we are requiring Helper.

00:01:48.346 --> 00:01:53.046 align:middle
The only difference is that
jQuery is a third-party library.

00:01:53.706 --> 00:01:59.456 align:middle
Well... in PHP, we would use Composer
to install third-party libraries.

00:01:59.966 --> 00:02:01.556 align:middle
And... yea!

00:02:01.556 --> 00:02:06.056 align:middle
In JavaScript, we can use
yarn to do the same thing!

00:02:06.916 --> 00:02:11.226 align:middle
Check this out: open a third
terminal tab - we're getting greedy!

00:02:13.106 --> 00:02:17.706 align:middle
Then run: yarn add jquery -- dev Yep!

00:02:18.066 --> 00:02:21.846 align:middle
We can use yarn to download front-end libraries!

00:02:22.416 --> 00:02:29.766 align:middle
Oh, and you can search for package
names on npmjs.com or npms.io.

00:02:31.136 --> 00:02:36.326 align:middle
This downloads jquery into the node_modules/
directory and adds it to package.json.

00:02:37.306 --> 00:02:40.596 align:middle
So... how do we require it?

00:02:40.656 --> 00:02:46.486 align:middle
Oh, it's awesome: const $ = require('jquery').

00:02:47.506 --> 00:02:48.126 align:middle
That's it!

00:02:48.706 --> 00:02:53.686 align:middle
When a require path does not start
with a ., Webpack knows to look

00:02:53.686 --> 00:02:57.626 align:middle
for a package in node_modules/ with that name.

00:02:58.206 --> 00:03:06.096 align:middle
And now that we are properly importing the
$ variable - yay us - remove $ and jQuery

00:03:06.196 --> 00:03:07.726 align:middle
from the self-executing function.

00:03:08.636 --> 00:03:17.476 align:middle
Yep, when we use the $ variable below, it is no
longer dependent on any global jQuery variable!

00:03:18.176 --> 00:03:20.356 align:middle
Responsible coding for the win!

00:03:21.516 --> 00:03:22.616 align:middle
But... does it work?

00:03:23.256 --> 00:03:26.396 align:middle
Try it! Go back to our site and refresh!

00:03:27.516 --> 00:03:35.296 align:middle
It does! That's because, back on the
terminal, if you run: ls -la public/build ...

00:03:36.276 --> 00:03:45.366 align:middle
yep! Our rep_log.js file now has jQuery inside
of it - you know because it's now 300kb!

00:03:45.416 --> 00:03:50.126 align:middle
Don't worry, we'll talk about
optimizations later.

00:03:50.826 --> 00:03:56.726 align:middle
But the point is this: all we need to
do is require the libraries we need,

00:03:57.176 --> 00:03:59.456 align:middle
and Webpack takes care of the rest!

00:04:00.346 --> 00:04:02.826 align:middle
Let's require one more outside package.

00:04:03.346 --> 00:04:05.556 align:middle
Search for "swal".

00:04:06.256 --> 00:04:11.726 align:middle
We're using a really cool library called
SweetAlert to bring up the delete dialog.

00:04:12.466 --> 00:04:17.166 align:middle
But... the only reason this
works is that, in the template,

00:04:17.646 --> 00:04:20.106 align:middle
we're including a script tag for it.

00:04:20.846 --> 00:04:27.076 align:middle
Boo! Let's refactor this to
require that library properly.

00:04:27.076 --> 00:04:31.906 align:middle
If you search for this package, you'll
find out that it's called sweetalert2.

00:04:31.906 --> 00:04:42.456 align:middle
Let's install it: yarn add sweetalert2 -- dev
This time, delete the script tag entirely.

00:04:43.116 --> 00:04:45.426 align:middle
We can't remove the jQuery script tag

00:04:45.426 --> 00:04:49.356 align:middle
yet because we're still using the
global variable in a few places.

00:04:49.746 --> 00:04:51.306 align:middle
But, we'll fix that soon.

00:04:52.006 --> 00:04:57.996 align:middle
Then, in RepLogApp.js, remove the
argument from the self-executing function:

00:04:58.706 --> 00:05:02.676 align:middle
that global variable doesn't even exist anymore!

00:05:04.036 --> 00:05:05.236 align:middle
To prove it, refresh!

00:05:07.776 --> 00:05:18.526 align:middle
Awesome! swal is not defined To get it back,
add const swal = require('sweetalert2');

00:05:20.006 --> 00:05:27.406 align:middle
As soon as we save this, Webpack
recompiles, we refresh and...

00:05:29.046 --> 00:05:31.456 align:middle
it works! Yes!

00:05:32.146 --> 00:05:38.226 align:middle
We can use any outside library by running
one command and adding one require line.

00:05:38.876 --> 00:05:44.976 align:middle
Let's use our new unstoppable skills to
refactor our code into re-usable components.