WEBVTT

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

00:00:02.596 --> 00:00:06.556 align:middle
Go back to /admin/article and
click to edit one of the articles.

00:00:08.116 --> 00:00:10.906 align:middle
View the source and search for .js.

00:00:12.206 --> 00:00:16.706 align:middle
Okay, we have several JavaScript files,
because Webpack is splitting them.

00:00:17.266 --> 00:00:20.256 align:middle
Click to look at build/admin_article_form.js,

00:00:20.256 --> 00:00:25.586 align:middle
which will probably contain all the
non-vendor code from that entrypoint.

00:00:26.506 --> 00:00:31.216 align:middle
The top of the file contains some Webpack
boootstrap stuff, then our code is below,

00:00:31.396 --> 00:00:34.646 align:middle
still mixed in with some
things that makes Webpack work.

00:00:35.456 --> 00:00:40.156 align:middle
Now, check this out: in the
original admin_article_form.js file,

00:00:40.526 --> 00:00:44.376 align:middle
we created a class called ReferenceList...

00:00:44.376 --> 00:00:49.616 align:middle
and we also use the const
keyword for const $autoComplete.

00:00:50.666 --> 00:00:54.106 align:middle
Back in the compiled file,
search for $autoComplete.

00:00:55.196 --> 00:01:00.626 align:middle
Woh! It's not const $autoComplete,
it's var $autoComplete!

00:01:01.146 --> 00:01:03.256 align:middle
And if you search for ReferenceList...

00:01:03.986 --> 00:01:05.576 align:middle
and get down to the class...

00:01:05.996 --> 00:01:08.106 align:middle
there's no class syntax!

00:01:08.426 --> 00:01:11.546 align:middle
It's wrapped in some sort
of a "pure" function thingy.

00:01:12.166 --> 00:01:15.476 align:middle
Surprise! Something is rewriting our code!

00:01:15.986 --> 00:01:17.966 align:middle
But, who? And, why?

00:01:18.616 --> 00:01:24.986 align:middle
The who is Babel: an amazing library that
has the superpower of reading your JavaScript

00:01:25.226 --> 00:01:30.246 align:middle
and rewriting it to older JavaScript
that's compatible with older browsers.

00:01:30.246 --> 00:01:32.656 align:middle
And this is seriously important!

00:01:32.786 --> 00:01:38.826 align:middle
Because if JavaScript comes out with a new
feature, we do not want to wait 10 years

00:01:38.946 --> 00:01:40.826 align:middle
for all of the browsers to support it!

00:01:41.176 --> 00:01:45.056 align:middle
Babel solves this: you can use
brand new language features

00:01:45.446 --> 00:01:48.756 align:middle
and it compiles it to boring, traditional code.

00:01:49.476 --> 00:01:50.746 align:middle
But... wait.

00:01:51.296 --> 00:01:55.476 align:middle
How is Babel deciding which
browsers our site needs to support?

00:01:55.476 --> 00:01:58.706 align:middle
Different sites need to support
different browsers...

00:01:58.786 --> 00:02:02.146 align:middle
and so, in theory, Babel should be able

00:02:02.146 --> 00:02:05.666 align:middle
to rewrite the code differently
for different sites.

00:02:05.666 --> 00:02:09.316 align:middle
For example, if you need to
support super old browsers,

00:02:09.616 --> 00:02:12.526 align:middle
you probably need to rewrite const to var.

00:02:12.906 --> 00:02:15.716 align:middle
But if all of your users are awesome...

00:02:15.806 --> 00:02:17.826 align:middle
like our SymfonyCasts users...

00:02:17.996 --> 00:02:22.216 align:middle
and all use new browsers, then
you don't need to rewrite this.

00:02:22.966 --> 00:02:27.806 align:middle
In general, converting new code to
old code makes your JavaScript larger,

00:02:27.936 --> 00:02:30.536 align:middle
so avoiding unnecessary changes is a good thing.

00:02:31.326 --> 00:02:35.116 align:middle
Let's answer the question of "how"
we can control Babel by talking

00:02:35.116 --> 00:02:38.516 align:middle
about something completely different: CSS.

00:02:39.916 --> 00:02:42.206 align:middle
Babel does not rewrite CSS.

00:02:42.656 --> 00:02:45.896 align:middle
But, if you think about it,
it would sorta make sense.

00:02:46.046 --> 00:02:51.346 align:middle
For example, if you're using a border-radius
and need to support older browsers,

00:02:51.596 --> 00:02:56.256 align:middle
you need to add some vendor
prefixes, like -webkit-border-radius.

00:02:57.036 --> 00:03:00.946 align:middle
You can see one we added manually
down here: we have box-shadow,

00:03:01.056 --> 00:03:06.356 align:middle
but we also have -webkit-box-shadow to
make it work in some older browsers...

00:03:06.416 --> 00:03:12.416 align:middle
which we might not even need, depending on
what browsers we decide we need to support.

00:03:13.176 --> 00:03:18.286 align:middle
Anyways, forgetting about Webpack and
Babel for a minute, in the CSS world,

00:03:18.496 --> 00:03:22.106 align:middle
you do not need to add these
vendor prefixes by hand.

00:03:22.926 --> 00:03:27.876 align:middle
Nope! There's a wonderful library that
can do it for you called autoprefixer.

00:03:28.566 --> 00:03:35.146 align:middle
You write code correctly - like using box-shadow
- tell it which browsers you need to support,

00:03:35.146 --> 00:03:37.956 align:middle
and it adds the vendor prefixes for you.

00:03:38.506 --> 00:03:40.676 align:middle
Because that sounds amazing...

00:03:40.956 --> 00:03:42.026 align:middle
let's add it!

00:03:42.716 --> 00:03:45.946 align:middle
In webpack.config.js, anywhere, but how

00:03:45.946 --> 00:03:51.266 align:middle
about below .enableSassLoader(),
add .enablePostCssLoader().

00:03:51.836 --> 00:03:57.576 align:middle
PostCSS is a library that allows you to run
things at the "end" of your CSS being processed.

00:03:57.776 --> 00:04:00.806 align:middle
And it's the easiest way
to integrate autoprefixer.

00:04:02.006 --> 00:04:11.046 align:middle
Next, because we just changed our
webpack.config.js file, go restart Encore: Hey!

00:04:11.226 --> 00:04:12.226 align:middle
This is familiar!

00:04:12.736 --> 00:04:16.756 align:middle
Just like when we enabled Sass, this
requires us to install a few things.

00:04:17.576 --> 00:04:21.266 align:middle
Copy the command, go to your
open terminal and run that!

00:04:25.156 --> 00:04:32.446 align:middle
Ok, let's try Encore again: Hmm, another error!

00:04:33.226 --> 00:04:39.896 align:middle
This is kinda cool: to use PostCSS, you
need to create a postcss.config.js file.

00:04:40.416 --> 00:04:45.656 align:middle
Encore walks you through that process and
sets it up to use autoprefixer to start.

00:04:46.526 --> 00:04:55.556 align:middle
Copy that, go to the root of your project,
create the postcss.config.js file and paste.

00:04:57.726 --> 00:05:05.066 align:middle
Ok, hit Control + C and try that again: Sheesh!

00:05:05.286 --> 00:05:06.546 align:middle
One last error.

00:05:07.276 --> 00:05:10.846 align:middle
PostCSS is probably the most
involved thing to get running.

00:05:11.496 --> 00:05:15.456 align:middle
This error isn't as obvious:
loading PostCSS plugin failed:

00:05:15.696 --> 00:05:21.116 align:middle
Cannot find module autoprefixer We
know what that word "module" means!

00:05:21.596 --> 00:05:23.476 align:middle
It's trying to find that library.

00:05:24.166 --> 00:05:29.456 align:middle
We told PostCSS to use autoprefixer, but
that doesn't exist in our project yet.

00:05:30.476 --> 00:05:39.786 align:middle
Run: yarn add autoprefixer
-- dev And now try Encore.

00:05:40.296 --> 00:05:45.276 align:middle
yarn watch No errors!

00:05:45.546 --> 00:05:47.766 align:middle
So... it's probably working?

00:05:48.436 --> 00:05:56.016 align:middle
Let's see it in action next and learn
how we can tell PostCSS and Babel exactly

00:05:56.016 --> 00:05:58.096 align:middle
which browsers we need to support.