Introduction to Node.js Browser JavaScript vs Node.js

Transcript from the "Browser JavaScript vs Node.js" Lesson

[00:00:00]
>> Speaker 1: So now back to Browser versus Node. Like I said, they're both JavaScript. Chrome uses V8, Node uses V8, but there are some differences as far as, like, the technologies, what can be done, and like the mindset of how you think about things. So let's talk about that mindset.

[00:00:17] So for Browsers, yeah, it's for building interactive apps for the web, right? Visual things that people see and click on and interact with, they're visual things. Node is not for that, there's no visual graphics. There's no visual thing here, you have terminal, that's it. I mean [LAUGH], you could build visual apps in a terminal if you want to, people do it all the time.

[00:00:40] But, and actually you're gonna build one today, but no, it's not like a web app. This is some background scripting that you're gonna build so it's not something visual with a DOM. So that's just a mindset. Although they're both JavaScript, you're not building something with a DOM that's interactive that people can click on, you're building pure logic.

[00:01:00] You can think of Node as literally just pure logic. There is no UI, there is no CSS. There is no animations, it's just pure logic. If you were to write a React app and you have like all this code and like for state management, take all that, that's what's node

[00:01:13] It's just the logic part. It's just pure logic. Any questions on that difference? So that's just like a mindset difference.
>> Speaker 1: Cool, okay. The Browser has a DOM, right? A Document Object Model, that's like a combination of like the HTML, the CSS, and the JavaScript, and how the browser renders in it, that's a DOM.

[00:01:37] The Nodejs doesn't have a DOM. Like I said, there's no GUI, there's no such thing as a DOM. But you can virtualize it. And what that means is you can fake the DOM, which if you've ever done anything with React, or Angular, or View, or anything server side, that's kind of what they do, they virtualize it.

[00:01:53] I mean literally React is built on something called a virtual DOM, that's literally what it is. So it's faking the DOM out because you don't really need to DOM to work with the DOM, you just need a fake DOM, it's very complicated. So yeah, you can virtualize it, but there is now DOM in the browser.

[00:02:09] You can't do document.querySelector and expect. I mean what would you expect to get of you did that in Node? I wouldn't even know what you would expect to get. Because there is nothing to crawl, there literally nothing there. So there is no DOM. So that's another way of thinking.

[00:02:23] So that includes all the DOM APIs. So anything that you would ever do on a DOM, as far as selecting documents or working with fields and anything DOM related, forget about it. It just doesn't exist in Node. You will get an error like, I have no idea what you're talking about, so.

[00:02:41] That's that. Any questions on the DOM?
>> Speaker 1: All right, I know it's hard to think of a JavaScript without a DOM. But where do my click handlers go? [LAUGH] You don't have any anymore. They're gone. They're replaced with database queries now. Cool, the window. There is no window in Node, but it does have a sense of a global object, that's actually called Global, that's the name of it, that you can attach things to.

[00:03:08] That doesn't mean you should attach things to it, just like you should never attach things to the window. If you do attach things to the window now, I want you to make a promise to yourself from today going forward, that you will never attach things to the window ever again, just don't do it.

[00:03:24] If you want to know why, I can tell you why. Does anybody want to know why? Okay, so the reason you don't want to attach things to the window is, one, it's just sloppy code. It really is a sloppy code, and the thing about attaching things to the window, it enables you to write really bad code.

[00:03:40] Because if you attach things to a window and you have multiple JavaScript files, as you are gonna see in the exercise that you had to fix, you have to put the files in like a certain order to take advantage of what attached to the window first. So that's bad.

[00:03:53] Two, it's like security risk. Your whole application is just sitting on window. Like, I can do whatever I want now. Just make it easy for me to just do whatever I want and I'll do it. And yeah, it's all in the window, it's all shared state. Other thing is that it's on the window where everything else is there.

[00:04:07] Everything that the browser attaches and put on the window, you put there. So you might have some collisions. You might overwrite something that was there and not know it, or the browser might overwrite something that you put and you might not know it. You're gonna have some side effects.

[00:04:18] Whenever you mutate any object, especially the global object, so just don't do it. And then, four, you can do modules in the browser now. That's very advanced, but you can. You can do modules in the browser, and we're gonna talk about that in a little bit. So there's really no reason to ever use the window ever.

[00:04:35] Actually, you know what? The only time I can think about using a window.
>> Speaker 1: Is if you like did a script tag for some third party resource, like Google Analytics, or segment, or something like that where they have to attach to the window. That is it. You're doing some marketing website, that's it.

[00:04:52] Because that's their code. That's not your code. So you don't really care if it's attached to the window. But you just never put your code on the window. If their code's inside your other window, that's fine. You can't help it. You just copy-pasted the script they told you to do and you did it.

[00:05:03] But do not put your stuff on the window. That's like the only thing I can think of. But even then, if you're building a web application today that's being bundled, you would still probably not put that on the window, you would encapsulate that in some type of library and dynamically load it up.

[00:05:17] All different types of stuff. We just wouldn't just like here, just here, put that there, right? You just wouldn't do that.
>> Speaker 1: Okay, fragmentation in a browser is real. There's literally a website called Can I Use. Anybody ever been to Can I Use, right? I look at it like ten times a day.

[00:05:33] Can I use this? Can I use this, right? If you don't know what it is I'll show you. Can I use?
>> Speaker 1: Put myself on the spot, showing my search history here. So yeah can I use, let's space it like, can I use flexbox here? Right, and Can I Use will show what browser support that feature, right?

[00:05:54] And that's because there's so much fragmentation in browsers. Different version of a browser, different browsers, different machines that these browsers, they all support different things. And then not only will they support those same things, it's like yeah, I kind of support it, partial support, not really, not like everybody else, but kind of.

[00:06:11] So yeah, good luck checking for that. So this is like my gosh, this is ridiculous, right? And they're getting a little better about it but there's just so much fragmentation when it comes to just JavaScript in the browser, right? And I type into flexbox I see what it says but like there's JavaScript things that might not work either like module.

[00:06:29] Look it, look at all that red. So yeah, you wanna use modules and your customers are using Samsung Internet version four, they can't use it. You just killed them. Yeah, I don't know how to jump from four to seven.
>> Speaker 2: Php.
>> Speaker 1: [LAUGH] Yeah, yeah, yeah exactly so.

[00:06:46] It's very fragmented. The thing about Node though, I'm just gonna keep it like this, and no do full screen. The thing about Node is that its version, as you found out, you install whatever version you want. And it's guaranteed to work in that version, right? You can switch versions whenever you want.

[00:07:03] You can't go into the browser and like, I wanna use version six of JavaScript. You can't do that in a browser. It doesn't work that way. You can't choose a version of JavaScript you want in a browser. The browser chooses it for you. And then the platforms, the customers that use your app choose the browser.

[00:07:19] So therefore, the customers choose what version of JavaScript your app is gonna run in. Whereas in Node, you choose what version your app is gonna run in, right? You say, I'm gonna use this version versus letting your customers decide and letting their outdated technology or their new technology, right?

[00:07:32] If Apple comes out with a new iPhone that's got this new thing in JavaScript, and they punish anybody who doesn't use it, now your app sucks and it's slow. Or like the notch cut out, right? And now people are like, got all this crazy CSS to handle the notch, right?

[00:07:47] Stuff like that, that just comes out and kill you, where as you don't have to worry about that in Node. If a new version of Node comes out, doesn't matter. You didn't upgrade to it so your app still runs on the same version. You're totally fine. You can upgrade whenever you're ready versus being forced to.

[00:08:00] So no fragmentation. That's pretty awesome when you think about it. Like I said, the browser does have support for modules. They're optional. And they use ES6 as their flavor of modules, and we'll talk about different types of modules. But yeah, they're optional modules, they're super-advanced. They really just came to browsers this year.

[00:08:19] Highly recommend looking into them and checking them out. But Nodejs has required modules. There's no optional, you have to use modules, there's no way around it. Unless you write all your code in one file. I promise you no one is ever going to work with you if you do that.

[00:08:34] You're never going to get a job if you write all of your code and your whole API in one file. I can promise you it's just not going to work. You might not make it. They use something called common JS For their module syntax. And we'll talk about CommonJS in a little bit, but by default it uses CommonJS.

[00:08:56] But you can use different tools to support different types of module syntax like ES6 or, I don't know why you would, but AMD or anything like that. But by default, Nodejs uses CommonJS built into it. Again, we'll talk about CommonJS and what does that mean. The differences and stuff like that.

[00:09:13] And they are required. In the browser, you can't access the file system yet. I think they're gonna enable that some part soon with Web Workers and stuff like that. But right now, you cannot access the file system because, imagine how big of a security risk that would be if I could access the file system from a web app that I put on your machine.

[00:09:30] Aw man, I could do whatever I want. I can go steal your Lastpass vault and figure it out somewhere else. So yeah, you cannot access the files inside of the browser, that's a security problem. But in Node you can, that's one of the biggest benefits. I can access the file system!

[00:09:44] I can do whatever I want here. So this enables you to do pretty powerful things like CLIs and amazing stuff. That part is pretty beautiful and they're both async. So if you are worried about your asynchronous knowledge in the browser with JavaScript, then you're gonna have the same version in Node cuz it's the same thing.

[00:10:08] In fact, it's even more in Node because you're gonna find out it's like async is a bigger deal in Node. Because one, you're probably gonna do more async things with hooking into databases and making more http calls. But also because of how your application is working, right? And we'll talk about that later.

[00:10:26] It's not making sense right now, but we'll get there. But async is definitely a bigger deal in Node than it is the browser. But it works exactly the same way.
>> Speaker 1: And like I said, no browser-based APIs. Not only are there no DOM APIs, there's no browser-based APIs.

[00:10:39] There's no window.location, there's no navigation, there's no GPS, there's none of that. All that stuff's gone, everything that is based on the browser is gone. You can forget about it, it does not exist here in Node to begin with, it's just gone. So the only stuff that really works are just things that are native to JavaScript.

[00:10:58] So how do you know what's native to JavaScript or how do you know what's native to the browser? You kinda really don't. You just really gotta look at documentation. Most of the browser stuff is based on things that are attached to the browser like the window, right? The window object is really based.

[00:11:11] It's not a JavaScript thing. That's a browser thing that gives JavaScript. So pretty much everything like attached to the window will most likely be browser based. Whereas you might have things like the array class, or the object class, or the string class. Those are JavaScript names, so those are still gonna be here.

[00:11:27] But you're not gonna have browser things, so you won't have window.fetch here, that doesn't exist here. Because there's no window, and there's no fetch, because that's a browser thing. Although you can install it and it will work just fine, it doesn't exist by default. So it's just regular JavaScript here, just pure JavaScript, no browser stuff.

[00:11:48] Any questions on that?
>> Speaker 1: And trust me, there's not gonna be a soft things where it's like, I'm not sure if this exists. I'm like, no, Node will just break. [LAUGH] It will tell you this does not exist. It just doesn't work. So you won't have to figure it out, like I don't know if this is a thing.

[00:12:07] No, you'll know immediately. They'll tell you.