Webpack 2 Deep Dive Webpack 2 Deep Dive

Audience Questions and Aphrodite

Check out a free preview of the full Webpack 2 Deep Dive course:
The "Audience Questions and Aphrodite" Lesson is part of the full, Webpack 2 Deep Dive course featured in this preview video. Here's what you'd learn in this lesson:

Kent spends a few minutes answering some final audience questions about how the file-level caching works in tandem with Service Workers. He also explains why he uses the Aphrodite library for working with CSS in JavaScript.

Get Unlimited Access Now

Transcript from the "Audience Questions and Aphrodite" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kent C Dodds: So Billy's asking about hash as a service worker. Those hashes are invalidated every time that, or are updated every time you rerun the build. So you run the build, the hashes get updated. The service worker gets updated as well and then when it gets loaded into the browser, that script is going to take this service record cache and remove anything that isn't in that list of assets in the service worker.

[00:00:37] And so, basically it just takes care of everything and then preloads all the new assets that it didn't have before and it loads those into the cache. So it'll work offline. And then Alberto asks, what's the advantage of creating a pre-deploy task instead of calling build and deploy.

[00:00:57] So you could totally do that. I like how npm scripts kind of compose together. It makes sense in my mind but yeah. I don't really see anything wrong with just doing like. You could totally just do, oops, npm run, build and deploy. Either way works. And then Danielle is asking, Kent, you mentioned you're using an alternative solution to DLLs/prefetch.

[00:01:29] Can you tell a little bit more? That different solution is the offline mode, so I don't need to prefetch modules. The idea behind the prevention module is you're on the login page, go fetch the rest of this stuff. This offline plugin is doing that for me. Because I get to the login screen, I get all the stuff that I need, and while I'm filling in the form, it's pre-fetching all my stuff.

[00:01:52] So I don't need the pre-fetch plugin when I'm using offline plugin. Although, if you do want to support browsers that don't support service worker, and you you don't want to use app cache, then the prefetch plugin could be useful in that scenario. But I don't have an example of that, sorry.

[00:02:14] So Scott is asking, what are the main reasons you have stopped using SAS in favor of actual CSS? So actually to be totally clear I don't actually use actual CSS, I don't use CSS files anymore. So this is just my opportunity to tell you about something that I love.

[00:02:32] It's Aphrodite, and no it's not a woman, I am married. No, it is a library for CSS and JS. And the cool thing about it is, so you're doing the CSS and JS that the React developers have come to love, and some other communities are starting to get into.

[00:02:53] But the cool thing about it is that it doesn't have the drawbacks of in line styles. Some of the drawbacks of in line styles, and by in line styling I mean a style you just put right here, foo is bar, whatever. Some of the drawbacks are if you have a long list and you put an inline style on every element in that list or even worse, a grid and inline styles in every cell of that grid and elements inside those cells, that's a performance drain big time.

[00:03:19] So that's yeah, that's one area where it's really bad. Also to support stuff like hover States or pseudo States and pseudo elements in media queries requires JavaScript tax and dependencies on frameworks like React. So like Radium is a really popular solution for CSS and JS. But it's dependent on React because it has to hook into React lifecycle hooks to support pseudo elements, pseudo states and media queries.

[00:03:45] So Aphrodite takes your JavaScript object and generates actual CSS with it and it sticks it into a style tag that it creates. And this happens dynamically if performance becomes an issue with that dynamic in this, then you can do server rendering and it's lightning fast. Javascriptair.com, most of it is using Aphrodite because it works with server rendering really well.

[00:04:12] So there are lots of different things about CSS and JS that I could talk about. One of my favorite parts about it is the explicit dependency aspect of it. I just I really like that, CSS modules is cool but it ties you down to a bundler. Javascriptair.com doesn't use a bundler at all.

[00:04:35] It's all just statically generated it, doesn't have a need for webpack cuz it's, you're not actually bundling assets, you're just generating HTML. And so I don't have to use webpack to get the value of explicit dependencies. The other thing is doing CSS and JS allows you to use an actual language like a real language that's turning complete, rather than something like CSS or SAS or Stylus that gives the appearance of language but is not actually have all of the full features that you could get in JavaScript.

[00:05:11] So, and then most people, when they think about this, their mind is racing like, well, what about variables and what about like sharing mixins and stuff like that? And I normally just say, stop and hold on for a second. It's just JavaScript, so variables, JavaScript has got them and mixins.

[00:05:30] Those are functions, and sharing things from one file to another. Those are modules and so, once you start to think about it, it becomes really awesome. And I seriously diverted from the topic of webpack but this is something that I really love. So thanks for bearing with me.

[00:05:48] [LAUGH] So any other questions? We're pretty much, actually, looks like Oscar has a question. This service worker is minified, how do I get unminified to read it? I'm just guessing here, but I'm fairly certain that if you run the build without the dash-P flag, then it's not gonna minify anything.

[00:06:16] And I expect that you should be able to, or just nmp start. And we'll go to local host. And if we pop open Sources, Service. Actually, well, hold on. Just kidding, it looks like it's minified in here as well. So maybe you could go to the source code and look at what the service worker looks like there.

[00:06:49] Hold on a second, that looks incorrect. Actually, sorry one other thing that you need to do in here is fix the source maps in your webpack config,
>> Kent C Dodds: To use eval instead,
>> Kent C Dodds: And then we, oops, run the build and I would expect that it would be unminified and if it's not, then you can go ask an issues on that project.

[00:07:26] So if you go to a service worker. Yes, still minified. Sorry, I guess I just really care about minifying your stuff.