Code Setup

[00:00:00]
>> Okay, so this course has been tested on MacOS and Windows and if it works on Mac, it's gonna work on Linux. So both should work pretty well for you. In particular, you could probably get by on 4Gigs of RAM on this course. I'm not inviting you to try it, it might be miserable, but I think everything would work.

[00:00:20]
If you're at 8, you're golden. Some prerequisites, you definitely do need to install Node.js, there's a bunch of ways to set that up. I use ndm personally. For the version of Node that I'm on for this course, let me just check. I'm on 14.17. If you're 12 or above, you should be good.

[00:00:45]
Honestly, if you're, well, let's stick to 14. I will be using Visual Studio Code. I used to be the product manager for Visual Studio Code. But you don't have to. Nothing in here will be specific to that. People always ask me what my font is, it's Dank Mono.

[00:01:07]
I left some instructions there. Cascadia Code is another one that I use a lot. I'm using Dark+, I use ITem2 or the Terminal and VS Code Icons. So, yeah, I left all that stuff here. It's usually the first thing after I finish this course, people tweet me and it's like Brian, what were you using?

[00:01:26]
So that's how I just get ahead of it and leave that here. Okay, so important here, come here to this repo which is on my GitHub and it's called realtime-exercises. So what I want you to do here is I would like you to fork it, you don't have to fork it, you can actually just clone it if you want to.

[00:01:47]
However, I'm gonna tell you that I think it's better if you fork it, because then you can do all your exercises and you can push them back up to GitHub. And then you can refer back to it later. It's just good to keep a copy of these things.

[00:02:00]
So at that point I would fork it and then you can clone it here. If you're not familiar with Git, just go ahead and do it with GitHub Desktop, that makes things a lot easier or you can download a zip, honestly that's fine too. And then you'll end up with this project which you see here.

[00:02:20]
So, a couple of things here. We have three project folders here kinda separated by technology that we're gonna be doing. The first one we'll be doing is pulling. So you can see here each one of them has exercise and then one to three other folders of code, right?

[00:02:39]
These are actually all complete projects. So if you go into the no-pause one, you can see here, it's actually the complete code here. So the reason why I've done this is so that if you get lost or if you wanna see what I did versus what you did, you can always go look at these kind of complete projects.

[00:02:55]
We'll be starting at where it says exercise. And you can see here there's still a bunch of code in here. I wrote kind of the framework here. And then I said, write code here, write code here, right? So we're kinda just be filling in the blanks. We're gonna be focusing just on the real time portion of this.

[00:03:14]
So I just kinda did a bunch of the other stuff so that we don't have to worry about it, right? We shouldn't be writing CSS in a course about real time or maybe, I don't know, you might have better ideas than I do. But today, we're not gonna be writing any CSS, I'll put it that way.

[00:03:33]
Every time that you go into one of these project directories, a lot of them do have a few dependencies here, here, right? So all you're gonna do is say npm install to install all of those dependencies. And then all of them have npm run start, which will just start the server.

[00:03:50]
And then npm run dev, which will actually start the development service that every time that you save a file, it'll automatically restart the folder for you. So today, I won't be using start at all. I'll just be using npm run dev. I think that's everything you need to know about the project.

[00:04:12]
Part of the course is done with Express. I chose Express just because it's the most popular one. And then part of the course is just done with directly using the HTTP module from Node.js. Because we wanted to get lower level than Express allowed us to. There's no correct server side framework.

[00:04:31]
If you wanna do this with Fastify or one of the other ones, I'm totally fine with that. When I had a choice here between doing what is right, and doing what's easy to teach or easy to understand, I chose the latter, right? So there is some things I am doing here that is just wildly inefficient, but it was simple.

[00:04:49]
And so, what I'm trying to say here is that some of the code here, I would not ship to production, but it's gonna be a really useful teaching tool. So it's okay for you to look at that and say, I wonder why Brian wrote it this way. Cuz it's bad, right?

[00:05:03]
I understand that. [LAUGH] You can tweet it at me, but I'll just tell you that I know that. A good example as here in polling-chat, this render function here is about the dumbest thing I've ever written. And I've written some pretty dumb stuff but it really just calls a map function and then it just resets the innerHTML every single time.

[00:05:22]
I rewrote dumb React, basically, is what I did here. All right, so don't ship that code, that's honestly the sum of the story there. On all of the front ends here, I didn't put any build step just to, again, to keep it very simple. You're welcome. No one has to fight with Webpack today.

[00:05:45]
[LAUGH] Some of these things though, you can see I'm loading some stuff off of the CDN. So some of these pages, actually I think all of them, you do have to be connected to the Internet to do just so that they can load all their assets off of CDN.

[00:06:02]
So that was another choice that we made there. We're doing a chat client today, it's called Chat With Me, cuz I am very good at branding. So all of the messages are being stored in memory. So if you save a file which resets the server, you'll drop all the messages that you had, that's fine.

[00:06:26]
That's to be expected. Again, I didn't want you to fight a database today, or even write to file, but that's what you would do, right? That's actually kinda a stretch goal, if you wanted to do that after this course, is you could go write this to a database.

[00:06:37]
There's another database course in Frontend Masters that someone wrote that I think's pretty good. You could take that one and that would definitely help you out as well.
>> I just wanted to ask, just overall around WebSockets, if there's any sort of best practices when it comes to deployment and security, there will be with some point.

[00:06:59]
>> Yeah, it's a great question. We'll definitely talk more about it when we get to the WebSocket section. So I'll kinda give you two answers. In general, it's still done over HTTP to some extent, so it's the same things that you'd be worried about for just normal HTTP requests.

[00:07:18]
The one thing that's gonna be a little bit different is your servers have to hold on to some state. So it can be difficult because you'll have different states talking to different clients and you kinda wanna unify that communication, right? So if I have three servers that are all connected to ten clients, if one user writes to one server, I'd then have to inform the other servers which then have to broadcast their clients, right?

[00:07:41]
That's just one of the considerations, is how do I sink that across various different sharded servers? It's not actually something we're gonna really talk about too much today. But there's a myriad of ways of doing it, including just having something like Redis kind of handle all that stuff for you.

[00:07:57]
So yeah, there's lots of techniques out there for that.