Transcript from the "Modules Q&A" Lesson
>> Do we generally only import utility functions?
>> Do we generally only import utility functions? Good question, so utility functions are a very handy thing to import. But, no, we might be importing, for example, some data from a module. Maybe some module is actually going through and going to generate or load some data for us like a JSON object, let's say, for our big long name of dog breeds.
[00:00:28] We could even put that in a separate module. We could put our big, big, big, long array of all of these dog breeds in a module that exposes that as a constant, breeds. And we could say import breeds from breeds.js or what have you. So, essentially, we can import values.
[00:01:17] So, basically, we can import whatever we want. We just have to make sure that it is exported by the module that we want to load it from, yeah?
>> There's a question around importing modules on the Internet versus locally.
>> Mm-hm, yeah, so as I mentioned, importing modules when the files are hosted somewhere on the Internet like on anjana.dev, let's say, will work.
[00:01:42] Because of the way the browser decides whether the thing that the page is trying to do is loading something appropriate. So the fact that we're loading two scripts that are both hosted on anjana.dev matters to the browser. This is due to something called CORS, C-O-R-S, Cross Origin Request Scripting.
[00:02:09] And it's a whole big complex topic that you could look up and read more about. But, essentially, when you're loading things locally with those file URLs as opposed to an HTTPs URL, the browser can't be sure about that security of whether you're loading something from somewhere that's trusted or not trusted, or whether it's actually coming from the same, what's called origin.
[00:02:33] So the same sort of URL. And so this is something that just doesn't work. So if you wanted to work with modules locally, and the reason that we didn't do this in our Doggo Fetch project is because there's just a little bit extra work you have to do.
[00:02:46] What you have to do is, essentially, run a local server that pretends to be a website. That's not a website that's out there on a public URL that anybody can get to, but is what we call a local host website. So if you've seen projects, maybe, where they ask you to start a server, and then load a page from local host, that is what's going on there.
[00:03:42] Or there are a bunch of other services or toolkits that do this for us, too. For example, next, if folks have run into that before. Anyway, there's a lot of different ways that we can run a program locally on our computer which pretends to be a website. Runs a, what's called local server that's serving up both of those module files or however many module files we have from the same URL.
[00:04:08] So that we're not loading them from file URLs, we're loading them from an HTTP URL that happens to just be pointed at a local website. So this is a whole can of worms that we can explore. And if you read up about modules, for example, on MDN and their guide about modules, you will see this mentioned.
[00:04:27] That this is due to course security policies that browsers have. So good question.
>> Yeah, I just wanna add to that, she was asking also about React modules and how it's loaded. And generally your NPM installing a bunch of modules to your local node modules folder, and that's where they're actually coming from when you hit import a library.
[00:04:53] That's how that's working.
[00:05:14] Some of which we wrote, and maybe some of which other people wrote that we want to reuse other people's code that's open source. That we want to take advantage of in our programs, so that we don't have to reinvent the wheel all the time. And we can actually import all kinds of different modules.
[00:05:28] Modules that we wrote in files that we have, modules that are being loaded from somewhere else on the Internet, modules that were installed as kind of dependencies of our project. So it gets very very complex, and there's a lot more to be said about it. But, yes, when we're working with really complex sites or frameworks like React, or kind of Meta frameworks like Next, let's say, we end up working with a ton of different modules.
[00:05:57] And we have tools like NPM, which is a way of downloading, and installing, and essentially including those modules in our project so that we can import from them, even if we don't have them kind of as a file that we've written next to our main program file, yeah?
>> So if I have a HTML page and I wanna split it into modules and generate parts of the webpage, what would you recommend to get started?
>> So if you're working locally, you're saying you want to kind of develop a site and split up the code across multiple modules, like we just saw in the module or Doggo Fetch example.
[00:06:45] But we wanna work, we wanna develop on our computer before we put it out on the Internet for the whole world to see. There are a few different options. For example, if you're used to working with another programming language that runs on the backend like Python, for example, you can run a simple Python script that starts up a server that serves all of the files in a certain directory on your local computer, just locally for you.
[00:07:44] So Node can let you use Express to run a server locally. And then there are other frameworks and things like, basically, tooling that allow you to use something like NPM. You might for example be following some tutorial, they'll have instructions on how to install the project. You'll download, maybe, a zip file, or maybe you'll clone a git repository onto your local computer.
[00:08:16] And then it'll give you some kind of command you might run something like a start command, which launches off a bunch of functionality that that developer has already written for you that starts a server locally so that you can develop and tweak the project. So it really depends on different projects.
[00:08:33] There's lots of different ways of doing it. But if you want to get started with that kind of local server running, you're probably gonna wanna look into Node, next, yeah?
>> Yeah, I would probably say that something like 11ty would be a great project to start with. Cuz, essentially, what they're looking for is a CMS, right?
[00:08:57] And being able to load pieces of HTML into the header or whatever. So 11ty is a great place to start cuz it's a static site builder.
>> Yeah, so, for example, yeah, this is a very popular, simple site builder, 11ty, that you could use to, let's say make a blog or something like that.
[00:09:19] And it has a pretty simple workflow for running it. So you can read, it's 1-1-T-Y.dev, 11ty.dev, you can read about it there. There are some other ones that you might run into out there, like one that is starting to get more attention in the web communities, Astro, for example, but that's a little bit more complex.
[00:09:44] And then you might find that if you are working with a framework like React, or what have you, you have some tooling like Create React App is a little starter kit for React that can also do this kind of local site running. And then, another really, once you're getting into much more complex sites, you might find a Next.js comes up.
>> Another option would be Gatsby, and we have a Gatsby course.
>> That's another good option. But, yeah, there's lots of these kind of.
>> Yeah, so Gatsby.js is another kind of system for running this. And I think there's some courses on Frontend Masters about, and there's also, yeah, more generally kind of a Next.js is-
>> We also have [INAUDIBLE].
>> Yeah, exactly, there's something very, this is something that you see a lot in professional settings. A lot of professional teams are working with tools like React and Next.js. They kind of go hand-in-hand. So as you go deeper into your journey, you'll encounter more of these kind of systems.
[00:11:43] So essentially each different project that you work on, or that you work with, might have a different approach for doing this, and for working with modules, and for structuring modules, and for organizing modules in a huge complex code base. Yeah?
[00:12:13] And so you might change some code and then you try to load your browser and the code doesn't change. And so you have to hold the Shift key and hit Refresh-
>> For hard Refresh.
>> Yeah, so remember we said the two hardest problems in computer science are cache and validation, naming things, and off-by-one errors.
[00:12:31] [LAUGH] So caching is a really complex topic that what the browser's trying to do is it's trying to load your site as fast as possible. And so it's going to say, that utilities script, that utilities module, excuse me, that you loaded that one time, I've already seen it before.
[00:12:48] So I'm just gonna remember what happened when I loaded that before. And I'm going to use those functions that it exported to give to you whenever you reload your page. But if then you go in and you edit your utilities file, and change one of the functions, the browser says, well, I already remember the old ones, so you have to manually tell it, hey, hey, hey, don't use the cached version with the Shift+Cmd+R instead of just Cmd+R or Ctrl+R.