WEBVTT

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

00:00:01.066 --> 00:00:06.876 align:middle
With our new-found super-power to require
files, we can really start to clean things up!

00:00:06.876 --> 00:00:11.786 align:middle
First, remove the self-executing
function that's around everything.

00:00:12.876 --> 00:00:18.316 align:middle
We originally added this because it
gave our code a little bit of isolation.

00:00:19.086 --> 00:00:24.976 align:middle
It helped us to, for example, avoid
accidentally overriding global variables.

00:00:25.346 --> 00:00:32.796 align:middle
But... now that RepLogApp is being
processed by Webpack, it is itself a module!

00:00:33.096 --> 00:00:38.026 align:middle
And Webpack automatically wraps it -
behind the scenes - so that it's isolated.

00:00:39.276 --> 00:00:44.446 align:middle
Basically, we don't need to worry about
silly things like self-executing functions.

00:00:45.766 --> 00:00:49.576 align:middle
Next, look in the template: index.html.twig.

00:00:50.486 --> 00:00:53.466 align:middle
We include the rep_log.js file...

00:00:53.916 --> 00:00:58.426 align:middle
but we also have a little bit of
JavaScript that is responsible

00:00:58.536 --> 00:01:01.956 align:middle
for using that object and initializing it.

00:01:02.646 --> 00:01:03.476 align:middle
This is....

00:01:03.686 --> 00:01:09.626 align:middle
kind of a bummer: it relies on the
RepLogApp variable to be global...

00:01:10.046 --> 00:01:15.806 align:middle
and that only works because, at the bottom,
we're purposely creating a global variable

00:01:15.806 --> 00:01:19.826 align:middle
with window.RepLogApp = RepLogApp.

00:01:20.686 --> 00:01:25.696 align:middle
Also, to fully Webpackify our
app, we will eventually want

00:01:25.696 --> 00:01:28.916 align:middle
to remove all JavaScript from our templates.

00:01:29.676 --> 00:01:32.956 align:middle
Yep, you'll just include the one JS file and...

00:01:33.186 --> 00:01:33.686 align:middle
that's it!

00:01:34.236 --> 00:01:37.836 align:middle
And this brings us to an
important point about organization.

00:01:38.586 --> 00:01:45.316 align:middle
Usually, the entry file - so the file
that we list in webpack.config.js -

00:01:45.786 --> 00:01:51.496 align:middle
should contain a small amount of
logic that calls out to other modules.

00:01:52.026 --> 00:01:58.326 align:middle
It's kind of like a controller in Symfony:
it's supposed to have just a few lines of code

00:01:58.686 --> 00:02:01.196 align:middle
that call out to other parts of our app.

00:02:01.996 --> 00:02:06.366 align:middle
Actually, the code in index.html.twig
is a pretty good example

00:02:06.366 --> 00:02:08.566 align:middle
of what I'd expect in an entry file.

00:02:09.196 --> 00:02:16.306 align:middle
Let me show you what I mean: in the js/
directory, create a new file: called rep_log.js.

00:02:17.806 --> 00:02:24.896 align:middle
Next, open webpack.config.js: let's
use this as the entry file instead.

00:02:25.916 --> 00:02:30.126 align:middle
And since I just made a change, find
your terminal and restart Encore:

00:02:33.536 --> 00:02:40.976 align:middle
Copy the code from index.html.twig,
remove it, and paste it here.

00:02:41.816 --> 00:02:47.076 align:middle
Perfect! And now that we are
responsible JavaScript developers...

00:02:47.076 --> 00:02:48.526 align:middle
finally...

00:02:48.956 --> 00:02:51.176 align:middle
we need to require any dependencies.

00:02:51.646 --> 00:02:57.606 align:middle
Oh, but first, add 'use strict'; on
top - that's optional, but I like it.

00:02:58.676 --> 00:03:09.246 align:middle
Now add const $ = require('jquery') and, to
get RepLogApp, const RepLogApp = require('.

00:03:09.556 --> 00:03:11.076 align:middle
/RepLogApp');.

00:03:13.206 --> 00:03:13.796 align:middle
I love it!

00:03:14.386 --> 00:03:15.226 align:middle
Does it work?

00:03:16.086 --> 00:03:17.376 align:middle
Move of and...

00:03:17.826 --> 00:03:19.886 align:middle
refresh! Bah!

00:03:20.946 --> 00:03:24.396 align:middle
RepLogApp is not a constructor Ooof.

00:03:25.046 --> 00:03:28.096 align:middle
This is a technical way of saying: Hey!

00:03:28.386 --> 00:03:31.126 align:middle
You're using RepLogApp like a class...

00:03:31.346 --> 00:03:32.366 align:middle
but it's not!

00:03:33.266 --> 00:03:36.526 align:middle
Open RepLogApp.js, and scroll to the bottom.

00:03:37.346 --> 00:03:42.416 align:middle
Aha! We forgot to export
a value from this module.

00:03:43.406 --> 00:03:49.006 align:middle
Replace the global variable
with module.exports = RepLogApp.

00:03:50.336 --> 00:03:50.926 align:middle
Try it again!

00:03:52.196 --> 00:03:58.366 align:middle
It works! You can start to see the
pattern: create a small entry file

00:03:58.726 --> 00:04:03.726 align:middle
and organize everything else into
reusable classes or functions.

00:04:04.996 --> 00:04:08.286 align:middle
Let's take this a step further
and organize into directories.

00:04:09.216 --> 00:04:12.026 align:middle
Create a new directory in
js/ called Components/.

00:04:13.676 --> 00:04:18.766 align:middle
Let's move our re-usable stuff
here: RepLogApp and RepLogHelper.

00:04:22.246 --> 00:04:23.456 align:middle
Build failure!

00:04:23.846 --> 00:04:24.986 align:middle
Of course!

00:04:29.136 --> 00:04:33.466 align:middle
In rep_log.js, update the path: .

00:04:33.466 --> 00:04:35.776 align:middle
/Components/RepLogApp.

00:04:38.036 --> 00:04:39.816 align:middle
Build successful!

00:04:40.766 --> 00:04:42.256 align:middle
Make sure it still works...

00:04:43.626 --> 00:04:46.136 align:middle
it does! Next!

00:04:46.476 --> 00:04:48.146 align:middle
This is great!

00:04:48.446 --> 00:04:53.196 align:middle
But can Encore handle apps
that are not single-page apps?

00:04:53.596 --> 00:04:57.916 align:middle
Like, what if I need a different
JavaScript file for my login page?

00:04:58.676 --> 00:05:00.026 align:middle
Encore has you covered.