Browser vs Node.js

[00:00:00]
>> So the next thing we want to talk about is actually let's dive right into some of those differences we talked about alert, but browser versus node. So I think the biggest thing here is just like the global space and like what is in the global, right? So if I'm in the browser and I go in here and I type in window, Right, there's a window here.

[00:00:21]
Literally everything's attached to the window, right? So, I don't even have to include it. If I say alert, it's implied that the thing to the left of the alert is actually window.alert. I don't know if you knew that, but everything is attached to an object. And [LAUGH] if you don't mention that object, it's assumed that it's a global, it's on the window.

[00:00:42]
So alert here would actually do something because we're in the browser, right? That's a global window.alert, same thing. But we can't do a window in JavaScript, right? If I try to log this, let's see what happens. Maybe they're smart now, they mock this out, but let's see. You see I get an error, window is not defined.

[00:01:06]
So there's no such thing as window in Node.js. The alternative to that would be something called literally global, if I can type. So if you type in global, then we get this thing, which is the equivalent of Node.js's window object. We almost never use global, it's just like you would almost never use window.

[00:01:28]
It's just there, it's implied, but that's the equivalent there. And you can see some familiar faces in here, right? Clear intervals, set intervals, set timeout. A lot of these things are the same thing that exist in the browser. So, it's different, but not so different. Even fetch now, they have fetch that's seems to be built in here, which is, actually, I didn't know that, that's new, I want to try that out.

[00:01:51]
[LAUGH] So, a lot of those things like that. The other thing is now that browsers have modules there's a slight difference on how you interact with modules and create modules in the browser and Node.js. So we're going to talk about modules yet and we will, but I'm bringing this up now just because you've used modules in the browser before, which I don't think a lot of people do directly.

[00:02:16]
I think, for the most part, you probably don't. You probably don't do things like this in the browser, but the tools you use do. So if you use something like Vite or Rollup or any other build tool, they'll probably do something like this for you so you don't have to.

[00:02:33]
But you can do modules in the browser now, and this is how you would declare a module. You have a script tag, type module, You point to a JavaScript file, and it's technically a module. Well, you can do the same thing in Node.js as well, except there's no DOM, so there's no script tag.

[00:02:51]
So you just actually import and export your modules in code. And we gonna talk about those in a minute. But they both have support for modules and depending on what build system you have, you can use them on both environments, right? So if you wrote JavaScript in such a way that it was aware of what environment it was in, then therefore that JavaScript can run in both environments.

[00:03:14]
So, and that's really simple, you can check to see if a window exists or no, you can handle that error, you can stub things out. So this is where you get to like universal JavaScript that works in both environments which if you ever use something like Next.js, that happens in the same file multiple times.

[00:03:33]
There's so many different environments in there, it's ridiculous. And those are just two environments, and JavaScript works also in React Native or other different places, and then those provide different globals as well. So, there's a lot going on there with modules, but we'll dive into it a little more.

[00:03:50]
And then the big one here is just the DOM, right? All this cool stuff, you can forget about it. You're never gonna do this a Node because like, I mean, what do you think would happen if I typed this in Node? What would you expect to happen? There's no visual output, there is no webpage, so I don't really know what that would do.

[00:04:08]
I can't go reference some element called element ID because there is no HTML, there is no DOM, so couldn't do it. It does get a little confusing because you can do HTML on a server which we will be doing today but even then that HTML doesn't get, executed until it's on the browser.

[00:04:26]
So, yeah, there's no DOM stuff here. But the difference is with Node, you can create what's called a server, right. If you don't know what a server is, we'll talk about that as well, but it's basically like a computer that's remote somewhere that responds to requests and can send back files, data, information.

[00:04:48]
Whereas JavaScript on the browser is probably gonna be a client that is the thing that's sending requests to the server and not the server itself. So, that's the equivalent of that. We talk about console and how that's pretty much the same. There's a lot of more differences in here, these are just some of the ones that I wanted to go through cuz these are the ones you'll probably use the most or the ones I think are most confusing.

[00:05:11]
When you get started, just trying to think about, I've been writing JavaScript in a browser for so long to interact with elements, so what do I do with JavaScript now if I'm not interacting with elements? You can do a lot, and we're gonna go over that. Don't worry about this server example, you're gonna be writing one of these really soon.

[00:05:27]
So if this looks crazy, don't worry about it, it won't look crazy by the end of today. Let's talk about the Node REPL. So, what is a REPL? REPL stands for Read, Evaluate, Print, Loop. It's basically a way for you to write inline JavaScript. I mean, you've used a REPL before if you've opened up the terminal and you wrote JavaScript here, that's a REPL, basically.

[00:05:49]
So we get the same thing in Node as if we go into our terminal and just like when we executed that file where we set Node and we did index. Instead of doing that, we could just type node with no arguments, and now we're inside of a REPL where we can write JavaScript.

[00:06:04]
So now I can do things, I'm actually writing JavaScript here, you can see I get auto complete and this is just JavaScript. So this is the Node REPL where you can just, it's literally the equivalent to open up the console in the browser and writing some arbitrary JavaScript.

[00:06:21]
Obviously not ideal, you would never come in here and build an application because, one, where's it going? It's not saving anywhere. So it's just some place to go to to try some things out. I almost never use it, [LAUGH] but it's here, if you need to, actually you know what, I will come here sometimes for a calculator [LAUGH].

[00:06:41]
I'll do math in here, cuz it's just quicker to do math in here sometimes than open up the calculator app, that's like the only time I use this. Otherwise, almost never use it. But it's here for you to explore and try things, maybe copy some code and paste it safely, see what happens.

[00:06:58]
But that's the REPL. To get out of it, at least on a Mac, you can hit Ctrl+C, then it'll bring up this message, if you want to exit, press Ctrl+C again or Ctrl+D, or just type exit, like .exit, and it'll go away. But typically, I'll just hit Ctrl+C twice for it to go away, don't use it [LAUGH].

[00:07:21]
It's just there because it can be, but you'll never use a REPL like that. Not to be confused with the website called REPL which is really cool, but yeah, you will never use it. And I talk about some of those reasons here, but basically it's not a file, you can't save it, you can't version it, it's just to try some things out.

[00:07:40]
Just like you would never build an app in a console, you would never build an app in the REPL.