Local Dependencies

[00:00:00]
>> Okay, this next session, we're going to talk about dependencies, which you've already seen some of. But we haven't worked with actual dependencies, right, we've looked at how dyno transpiled code that's yours, and we executed a file that was on the internet. We just executed it directly, but we haven't actually used dependencies which we're going to do now.

[00:00:19]
So you'll remember from our earlier discussions that Deno thinks very differently about dependencies and it's a core premise. But we need to talk about how it's different, so Deno really tries to stay as close to browser conventions as it possibly can everywhere. And how you do JavaScript in a browser file is different than how you do it in in node, so, for instance, like how do you do JavaScript in an HTML file?

[00:00:51]
So if we come back to our exercises here, like let's just create an HTML file, and if we wanted to include a JavaScript file here, how would we do that? Well, we would come down here at the bottom and we would say script, right? And then we'd say SRC, and then we would link to some file and that would be how we would include our JavaScript.

[00:01:13]
That's how browsers use JavaScript, okay, so Deno does exactly the same thing, it thinks about dependencies in exactly the same way. And it suggests that you should include dependencies by their URL, which seems completely bizarre for those of us that have been working with. NPM because we're used to installing dependencies and then adding them.

[00:01:39]
But Deno wants to be like a browser so it asks you to think like a browser here. So we'll be requiring dependencies by their URL, Deno follows the ACMA script standard. For Import Export syntax for modules, which Node up until very recently did not have a module system.

[00:02:01]
And so while you could say for react projects you could do import from this package. And Node you were stuck doing const require now there is a module standard in Node. But it is not the Ekman script scan standard, which is what Deno adheres to. So we talked about caching, we looked at the Deno cache, it's important in the way that Deno handles dependencies.

[00:02:29]
Because it uses the URL reference as the method to include these dependencies in your project. And you wouldn't want to download these every time you ran your program. So what Deno does is, it downloads a dependency the first time you run the program. And until the dependency changes or you force it to update, it just sits there in your cache.

[00:02:49]
And Deno handles these dependencies differently whether or not you're using local, importing from a current file or importing a remote dependency by URL. So we're going to take a look at what that actually looks like, we talked about the Deno info command. Which is just going to give you these different directories, these pads on your local machine.

[00:03:08]
So you can look at that going forward, so local dependencies, so let's talk about this. So let's add a new file here, and let's call it utils.ts, and what we're gonna do here is create a utils constant. Okay, and then we're just gonna export this thing out the end, so I'm just gonna export define utils.

[00:03:38]
Now, you should note that you can't do this, so you can't do export default const utils. The spec won't allow you to do this, you can do this but if you want to actually, sorry, we can't do this export default const. That's not okay, this is okay, that's just part of the specs, if you want to export it as the default export, you actually have to declare it and then export it on a different line.

[00:04:07]
Okay, so let's do something in utils, so, and this actually could be a coding interview question. So, perhaps this will come in handy for you in ways that you didn't know. So one of the things that you can't do in JavaScript, by default, is reverse a string, it doesn't have a method for doing that.

[00:04:23]
And so, again, sometimes this comes up as a coding question, people ask you to reverse a string in JavaScript, and I'll show you an easy way to do it. So let's create a reverse function and that takes in some text, a string will take in text, and then we just want to reverse it.

[00:04:40]
So I'm gonna do text and then we need to give it type string here so that TypeScript knows that we're dealing with a string. And then, so the trick here is that JavaScript strings don't have a reverse method, but arrays do. So if we can get the string into an array, we can reverse it and then make it a string again.

[00:05:01]
So that's basically the answer, so if we split and just pass in an empty string here like this, this makes it an array. And then we can reverse it [LAUGH] like this and then we can just join it right back again with an empty string, and this will do the magic.

[00:05:19]
Okay, so now we wanna use this in our app file, so we do that by just importing it in, so let's do that. We'll remove all this so we're just gonna import and then I'm going to leave this open for a minute and then say from utils.ts. In Node, you don't have to specify a file extension, in Deno, you do, it's not going to be okay with you not doing that.

[00:05:52]
There's a lot of debate about whether or not you should or shouldn't have the file extension, Ryan really felt strongly that you should so you have to have it. And then here we don't actually we can just do import utils because it's the default export. And then down here, we could do, we can just console.log, and then we can reverse a message here.

[00:06:12]
So let's just do console.log and then utils.reverse, and then we'll pass in hello world. A couple things to note here, first of all, you may be familiar with the fact that you can do. This in Node currently or in Baybel, rather in the transportation and you still get the default export but in Deno you don't, it'll actually give you default and then reverse.

[00:06:45]
Okay, so if you export is the default you can't use that star, you need to do it like this, just with the default export. That's just part of the spec, that's how it's supposed to work, just be aware of that because if you're used to doing that import star as that can kind of mess you up.

[00:07:01]
It messed me up, okay, so let's run this, let's run this to make sure it works. Deno run app.ts, check the file and we didn't return, we need to return, it would be helpful if we returned. Let's try it again, there we go, now to reversing our string, all right, I really hope that that helps somebody get a job someday.

[00:07:29]
And I'm hopeful somebody will look back and be like yeah, I watched this class and they reversed the string and now I work at Google, I don't know. All right, so let's take a look at what Deno actually does with this in the cache. To do that, let's see what do we wanna do here, so we talked about utils, we reverse the string.

[00:07:50]
So let's look at the cache, so again, let's go to, I'm going to go to Deno cache. And then we're gonna look inside, go to the gym directory, and then we're going to go to File and then I'm just gonna tab through some of this stuff. File slash, gosh, so cd file and then what do we have, we have home slash home, whack, whack.

[00:08:18]
Dev me, deno exercises exercise, there we are, let's look inside, okay, now we've got these files which all this looks should look somewhat familiar, right? So we had these metadata files that we looked at before, but now we just have ones for utils as well. But notice that we only have one bundle info, which has our ts config in it.

[00:08:39]
So we don't have a bundle info for utils because it's not the entry point. And Deno knows that, but if we look at the utils file, here's our converted JavaScript here. And if we look at this file, it's actually, let's move back over here, get back to the home.

[00:08:56]
It's just importing utils from utils, okay, so it's not doing anything special there to get the files, it looks exactly like what you would expect.