WEBVTT

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

00:00:01.076 --> 00:00:04.966 align:middle
Here's our mission: to get
rid of all the JavaScript

00:00:04.966 --> 00:00:06.856 align:middle
and CSS stuff from our public/ directory.

00:00:07.506 --> 00:00:09.986 align:middle
Our next target is admin_article_form.js.

00:00:11.086 --> 00:00:15.636 align:middle
This probably won't come as a huge shock,
but this is used in the admin section.

00:00:16.746 --> 00:00:18.216 align:middle
Go to /admin/article.

00:00:20.336 --> 00:00:25.766 align:middle
If you need to log in, use
admin1@thespacebar.com, password engage.

00:00:26.816 --> 00:00:28.856 align:middle
Then click to edit any of the articles.

00:00:29.976 --> 00:00:34.276 align:middle
This page has JavaScript to handle the
Dropzone upload and a few other things.

00:00:34.276 --> 00:00:37.916 align:middle
Open the template:

00:00:39.476 --> 00:00:44.006 align:middle
templates/article_admin/edit.html.twig
and scroll down.

00:00:45.166 --> 00:00:50.146 align:middle
Ok: we have a traditional <script>
tag for admin_article_form.js as well

00:00:50.146 --> 00:00:54.096 align:middle
as two external JavaScript files
that we'll handle in a minute.

00:00:54.846 --> 00:00:57.416 align:middle
This is super similar to what we just did.

00:00:57.416 --> 00:01:02.226 align:middle
First, move admin_article_form.js
into assets/js.

00:01:02.226 --> 00:01:06.036 align:middle
This will be our third entry.

00:01:06.476 --> 00:01:14.316 align:middle
So, in webpack.config.js copy addEntry(),
call this one admin_article_form

00:01:15.076 --> 00:01:17.456 align:middle
and point it to admin_article_form.js.

00:01:19.406 --> 00:01:23.806 align:middle
Finally, inside edit.html.twig, change this

00:01:23.806 --> 00:01:27.796 align:middle
to use {{
encore_entry_script_tags('admin_article_form')

00:01:27.796 --> 00:01:29.006 align:middle
}}.

00:01:29.006 --> 00:01:38.286 align:middle
Now, stop and restart Encore:
yarn watch Perfect!

00:01:38.586 --> 00:01:42.256 align:middle
3 entries and a lot of good code splitting.

00:01:42.256 --> 00:01:48.796 align:middle
But we shouldn't be too surprised that when we
refresh, we get our favorite JavaScript error:

00:01:49.356 --> 00:01:54.596 align:middle
$ is not defined Let's implement
phase 2 of refactoring.

00:01:55.296 --> 00:02:07.036 align:middle
In admin_article_form.js,
import $ from 'jquery' and...

00:02:07.356 --> 00:02:08.816 align:middle
we're good to go!

00:02:09.976 --> 00:02:12.066 align:middle
In addition to moving things out of public/,

00:02:12.386 --> 00:02:15.976 align:middle
I also want to remove all of
these external script tags.

00:02:16.716 --> 00:02:22.226 align:middle
Actually, there's nothing wrong with including
external scripts - and you can definitely argue

00:02:22.226 --> 00:02:26.526 align:middle
that including some things - like
jQuery - could be good for performance.

00:02:27.346 --> 00:02:30.526 align:middle
If you do want to keep a few
script tags for external stuff,

00:02:30.526 --> 00:02:33.896 align:middle
check out Webpack's "externals"
feature to make it work nicely.

00:02:35.106 --> 00:02:39.256 align:middle
The reason I don't like them is that,
in the new way of writing JavaScript,

00:02:39.366 --> 00:02:42.176 align:middle
you never want undefined variables.

00:02:42.926 --> 00:02:46.926 align:middle
If we need a $ variable, we need to import $!

00:02:46.926 --> 00:02:50.576 align:middle
But check it out: we're referencing Dropzone.

00:02:51.306 --> 00:02:52.666 align:middle
Where the heck does that come from?

00:02:53.206 --> 00:02:58.286 align:middle
Answer: it's a global variable
created by this Dropzone script tag!

00:02:59.486 --> 00:03:01.726 align:middle
The same is true for Sortable further down.

00:03:02.376 --> 00:03:05.386 align:middle
I don't want to rely on global
variables anymore.

00:03:06.086 --> 00:03:08.206 align:middle
Trash both of these script tags.

00:03:09.836 --> 00:03:17.596 align:middle
Then, find your terminal, go to your open
tab and run: yarn add dropzone sortablejs --

00:03:17.596 --> 00:03:22.876 align:middle
dev I already looked up those exact
package names to make sure they're right.

00:03:24.376 --> 00:03:31.126 align:middle
Next, inside admin_article_form.js, these
variables will truly be undefined now.

00:03:31.996 --> 00:03:33.226 align:middle
Try it: refresh.

00:03:34.056 --> 00:03:35.686 align:middle
A most excellent error!

00:03:36.076 --> 00:03:39.396 align:middle
Dropzone is undefined It sure is!

00:03:39.506 --> 00:03:46.716 align:middle
Fix that with import Dropzone from 'dropzone'
and also import Sortable from 'sortablejs'.

00:03:49.946 --> 00:03:51.366 align:middle
Now it works.

00:03:52.086 --> 00:03:54.796 align:middle
But there's one more thing
hiding in our edit template:

00:03:55.506 --> 00:03:58.826 align:middle
we have a CDN link to the Dropzone CSS!

00:03:59.476 --> 00:04:01.126 align:middle
We don't need that either.

00:04:01.976 --> 00:04:08.966 align:middle
Instead, in admin_article_form.js, we can import
the CSS from the dropzone package directly.

00:04:09.586 --> 00:04:12.146 align:middle
Hold command or control and
click to open dropzone.

00:04:13.496 --> 00:04:16.646 align:middle
I'll double-click the dropzone
directory to take us there.

00:04:18.536 --> 00:04:19.746 align:middle
Inside dist...

00:04:19.946 --> 00:04:22.106 align:middle
there it is: dropzone.css.

00:04:23.006 --> 00:04:25.636 align:middle
That's the path we want to import.

00:04:26.326 --> 00:04:31.636 align:middle
How? With import 'dropzone/dist/dropzone.css'.

00:04:33.076 --> 00:04:36.966 align:middle
Most of the time, we're lazy and we
say import then the package name.

00:04:37.416 --> 00:04:44.366 align:middle
But it's totally legal to import the
package name / a specific file path.

00:04:44.366 --> 00:04:47.856 align:middle
As soon as we do that, go
check out the Encore watch tab.

00:04:48.846 --> 00:04:52.606 align:middle
Wow! The code splitting is getting crazy!

00:04:53.176 --> 00:04:58.726 align:middle
Hiding inside there is one CSS file:
vendors~admin_article_form.css.

00:04:58.726 --> 00:05:07.796 align:middle
Flip back to the edit template and add {{
encore_entry_link_tags('admin_article_form') }}.

00:05:09.736 --> 00:05:12.146 align:middle
Try it! Find your browser and refresh!

00:05:13.806 --> 00:05:17.346 align:middle
Ok, it looks like the Dropzone
CSS is still working.

00:05:17.436 --> 00:05:18.696 align:middle
I think we're good!

00:05:19.476 --> 00:05:23.526 align:middle
This same JavaScript & CSS code
is needed on one other page.

00:05:24.786 --> 00:05:27.746 align:middle
Go back to /admin/article and click create.

00:05:29.736 --> 00:05:31.956 align:middle
Oof, we still have some problems here.

00:05:34.806 --> 00:05:41.206 align:middle
I'll close up node_modules/ and open
templates/article_admin/new.html.twig.

00:05:41.966 --> 00:05:47.826 align:middle
Ah, cool. Replace the admin_article_form.js
script with our helper Twig function.

00:05:49.436 --> 00:05:52.926 align:middle
Under stylesheets, the new
page doesn't use Dropzone,

00:05:53.056 --> 00:05:55.946 align:middle
so it didn't have that same link tag here.

00:05:56.956 --> 00:06:00.416 align:middle
Add {{
encore_entry_link_tags('admin_article_form') }}

00:06:00.416 --> 00:06:05.366 align:middle
anyways so that this page has
all the JS and CSS it needs.

00:06:06.726 --> 00:06:09.026 align:middle
But this does highlight one...

00:06:09.026 --> 00:06:09.576 align:middle
let's say...

00:06:09.576 --> 00:06:11.436 align:middle
"not ideal" thing.

00:06:12.086 --> 00:06:14.316 align:middle
Some of the JavaScript on the edit page -

00:06:14.406 --> 00:06:18.066 align:middle
like the Dropzone & Sortable
stuff - isn't needed here...

00:06:18.956 --> 00:06:23.186 align:middle
but it's part of admin_article_form.js anyways.

00:06:23.786 --> 00:06:26.036 align:middle
And actually, the reverse is true!

00:06:26.756 --> 00:06:28.396 align:middle
That autocomplete stuff?

00:06:28.396 --> 00:06:32.396 align:middle
That's needed on the "new"
page, but not the edit page.

00:06:32.796 --> 00:06:38.686 align:middle
At the end of the tutorial, we'll talk about
async imports, which is one really nice way

00:06:38.686 --> 00:06:44.276 align:middle
to help avoid packaging code all the time
that is only needed some of the time.

00:06:45.276 --> 00:06:47.356 align:middle
Anyways, if we refresh now...

00:06:47.706 --> 00:06:50.286 align:middle
the page is still totally broken!

00:06:50.846 --> 00:06:55.516 align:middle
Apparently this "autocomplete" library we're
importing is trying to reference jQuery.

00:06:56.406 --> 00:06:57.846 align:middle
Let's fix that next...

00:06:57.846 --> 00:06:59.146 align:middle
which will involve a...

00:06:59.146 --> 00:07:02.326 align:middle
sort of "magical" feature of Webpack and Encore.