Transcript from the "Problems with Script Loading" Lesson
[00:01:07] And this is great, this is how we leverage when were using Webpack today. And the second way is actually this write your job description to HTML, JS and HTML that new thing, have you heard of it? No [LAUGH] It's been around forever but you can do this. But I mean, when you break it down, so those are the only two ways.
[00:01:33] What is a problem for these things? It doesn't scale, whatsoever. I mean, you're either gonna have too many scripts that you're trying to load from script tags in the HTML. And each browser actually has bottlenecks. This creates a bottleneck. There's only a certain amount of concurrent requests that can fetch data at a single time.
[00:02:24] We're talking 3,000. Companies like Airbnb and Microsoft's Outlook web app, they're talking 30,000 modules to build their application. And so it's just wild. There is no way that you can have a performance experience by trying to load individual scripts. I could beat that horse dead for days. But then, you're like, well, Sean, I'll just write one big one, right.
[00:03:37] Everything is global in its scope, but you can also have things like first class functions and so everything is global. Your functions, your objects, and so there's a lot of issues with just scope and variable conflicts. But this, we solve things in the web ecosystem. So what do we do?
[00:03:59] Who knows what an IIFE is, IIFE? Cool, that's a good start. So an IIFE stands for Immediately Invoked Function Expression. Now what does this mean? So take this code example here. Now, essentially what's happening, is that we have this function that's defined, but it's wrapped in parentheses and then, you'll see at the end it's called.
[00:04:27] And so, what this does is that when you have an IFFE, it's treated as an expression and instantly executed. But it also allows us to provide data from an outside scope and then, return scoped information. So in this case, if you were to write this code in like your node terminal or whatever in dev tools, you're gonna see that whatever actually returns properties on some, just like if it was a module or some sort of object.
[00:04:57] And that was the kinda goal here, right? We want to be able to weigh to encapsulate and that's what IFFES do. So if you took this and you removed the IFFE pieces, you would notice that, if you ran this code, you had a variable declared at the top.
[00:05:14] So outer scope is equal to one, and let's just pretend the IFFES not there. Well, then you would define outer scope inside of the function, which gives its own function scope but then, that actually knocks out the value in the outerScope. So if I run console.log(outerScope), I would find out that it returns 1.
[00:06:29] But this let's us concatenate. Now, we can take and write a hundred files and we can squish them together without concerns that we're gonna knock out a bunch of variables and scopes, and I put a star there cuz there's always caveats. However, and this really led to the explosion of these toolings.
[00:07:18] Boy, it was frustrating. Really frustrating but some people love it. And really, all the purpose is is just to concatenate the files together. And that's what Grunt and Gulp and Broccoli, like all these things. That's where these tools started cropping up. It's trying to solve problems. However, there's still problems with this.
[00:07:37] What you're gonna notice that, anytime you want to change one file, you have to rebuild the whole thing. We're just concatenating all of these module. They are not modules but these scripts together. And then, more importantly, when you concat, let's say, who uses Lodash here or Moment JS?
[00:08:22] When you are in script there is no way. You essentially fear only using one function from Lodash or one data utility from Moment JS. You're literally adding the entire library and just crushing it together, that turns out that. Immediately both function expressions are kinda slow. So what happened, no one lost the news.
[00:08:48] One of my coworkers and author of Couch DB or Couch TV, I can't remember. He did a study and found out that bundlers, this was specific to bundlers early on, we're creating lots of IFFE in using a similar pattern, or people were writing in IIFE's and concatenating together.
[00:09:34] Your shipping all that code down the pipeline, even if your app maybe only uses 10% of it to load and get your initial experience. You can just kinda see there's a lot of problems here. We're just showing scripts together.