JSON

[00:00:00]
>> Let's talk about talking to servers. So everything that we're doing so far, the calculator project is a really good example, it all happens in the browser, right? It's not reaching out to any servers. Once all the HTML, CSS, and JavaScript is on your computer, it's just there.

[00:00:15]
So for something like a calculator, you don't need to talk to a server, right? You can do a math inside of a browser. But let's say you have a social network. Well you need the social part of it, right? Which means the data has to leave the person's browser and be stored somewhere, right?

[00:00:33]
So you have some sort of backend, whether that's something that you wrote in Node.js, or PHP, or something like that. Whether that's just calling out to a CMS, or some sort of managed service, or you could do something like lambdas, where it's all serverless. Doesn't matter, stuff has to leave your browser, and then it has to come back.

[00:00:54]
So we're gonna talk about that, because it's a critical part of doing frontend development. 99% of all apps have to talk to a server at some point. Not this one, right? I guess my course website doesn't really have to talk to a server. There is no backend for this particular project, right?

[00:01:16]
I guess the most backending thing is that it has some analytics on it, but that would be it, right? So let's get into it. The first thing we're gonna talk about is JSON. So we're not gonna be writing any backends today, by the way. If you wanna get into backend development, lots of awesome courses in Frontend Masters.

[00:01:38]
I think there's a whole learning path on Node.js, a great way to get started, because you now know JavaScript. You're just gonna apply JavaScript in a different context, right, which is cool. But we're just going to be using other people's backends. We're not actually going to be writing our own backend.

[00:02:00]
And maybe for someone, it might be helpful to clarify backend versus frontend terminology. The frontend is everything that happens in a browser, right? So everything that you and I have been doing over the past couple days, frontend coding, cuz it's code that we're writing, HTML, CSS, and JavaScript.

[00:02:15]
And we're intending to send that code to someone's computer while it will run on their computer, right? If I code my calculator, and then you later load my calculator, that code is being executed on your computer, not my computer, right? The backend does totally different. This is going to be that I wrote a bunch of code, and then I put it on a server that lives in Microsoft Azure, or Amazon Web Services, or DigitalOcean, or a computer in my basement.

[00:02:43]
I've literally done that before. That code is executing on my computer, and then it's sending new information from my computer. That is backend development, make sense? Okay, so we're not gonna code backend today, that's outside the scope of what we're talking about, but we are going to be using someone else's backend.

[00:03:08]
Okay, so imagine that you're writing a bit of code, And you load this webpage, you load this, maybe it's a pet adoption app. That's something that we code in the React application for my React class. Someone scrolls down to the bottom of the page, and you wanna get more dogs to show them at the bottom, right?

[00:03:37]
The infinite scroll, I think we've all used infinite scroll apps before. It's not reloading the page, right? So how do we get more information into the browser? We have to have some way to request data from a server without refreshing the page. Everything that we've done so far, we will just refresh the page or go to a different page.

[00:03:57]
You have to use a technique that's called AJAX, right there, AJAX. So AJAX is an acronym that is not accurate [LAUGH]. It stands for Asynchronous JavaScript and XML. And this has nothing to do with XML anymore. It used to, right? When this came out, it was absolutely revolutionary that you could request data from a server without refreshing a page.

[00:04:25]
Late 90s, maybe mid 90s, that was revolutionary that that could happen. And so they call that technique AJAX because they were requesting, and it was coming back in XML at the time, right? No one uses XML anymore. If you have to use XML, my apologies, [LAUGH] you have problems.

[00:04:47]
But now it's almost always a different thing called JSON. And AJAJ just doesn't have the same ring, so we just keep calling it AJAX. Now I'd probably just call it fetch rather than AJAX, but AJAX is the terminology that you'll see everywhere. All that means is that we're requesting data from a server without refreshing the page.

[00:05:06]
Before we get too much into AJAX, I wanna get you familiar with JSON. So your application, your frontend application has to speak the same language as the backend server, right? It'd be like if I picked up the phone right now and tried to call someone in Mandarin Chinese, we have to agree upon a language that we're not going to communicate very well, right?

[00:05:31]
And if I don't speak Mandarin, and they don't speak English, nothing is going to happen. It's the same thing with computers, and it's totally the same idea if my frontend calls your backend, and they don't have the same sort of protocol to speak with each other. Nothing can happen because my frontend will not understand what the backend is saying, or vice-versa.

[00:05:52]
There used to be several ways of sending that information. One of them was XML that was very popular back in years and years ago. But we've all kind of standardized around this thing called JSON, which stands for JavaScript Object Notation. Luckily for us, we're coding JavaScript already, and this will make JSON look very, very familiar to you.

[00:06:19]
What does this look like right here? It just looks like a JavaScript object, right? There's a reason why it's called JavaScript Object Notation. It's because that I can literally copy this. And I can say, luna =, and I can just straight up paste this, right? And now I have a luna object here in JavaScript.

[00:06:44]
So this JSON is actually valid JavaScript, which is kind of cool, right? Now, someone might ask me the question, is all JSON valid JavaScript? Technically, you can have valid JSON that is not valid JavaScript. It's really hard to do. So you can kind of operate on the assumption almost all JSON is valid JavaScript.

[00:07:13]
And this is not necessarily directly how you and I would write JavaScript, right? If I was gonna do this, Technically, these quotes here are optional, right, in JavaScript. Right, so I have name and age here that don't have the quotes around them, whereas these ones do. It doesn't matter, both of these are totally valid in JavaScript.

[00:07:36]
In JSON, the quotes around the key and the value are required, so you actually have to have these quotes on both sides, just so you know. So not all JavaScript is valid.JSON. I think that tracks, right? Now, you're asking me why are we talking about this? This is a really useful way for servers and frontends to send information back and forth to each other, right?

[00:07:58]
So I can say, hey, give me luna, right? And that server can then pull this out of its database and send it down to me, right? Okay, so let's say we have some sort of, Response from a service to pretend that we made some call to a server, and we got this response back from the server, something like this, right?

[00:08:22]
Notice this is a string, cuz it'll come back as a string, right? Your server is not gonna be able to send an object down, because an object is a native JavaScript datatype. It's gonna send you a string, and then it's up to you to parse that string into an object.

[00:08:40]
So again, if I say console.log(responseFromServer) here, notice that this is a weird looking string, and it has all these escape backslashes, right? So there is a built in to the JavaScript language called JSON, all caps, you say JSON.parse, right? Parse is just saying, I promise what I'm giving you now is valid JSON, you should turn this into an object, right?

[00:09:07]
That's what that means there. And then now, if I say console.log(responseObject.name), I'm actually able to get Luna out of it, location.city, right? I can actually pull things out of it as if it was a normal JavaScript object, because now this response object is a normal valid JavaScript object.

[00:09:27]
Does that make sense, cool. Yeah, we talked about escape characters earlier in the course. What happens if I wanna have a string of one double quote, how would you do that? If I wanna say let doubleQuote =, how would I have one double quote? If I put one quote here, Yeah, so you have to escape it.

[00:09:57]
I have to put a backslash there. And so now if I say doubleQuote, this is actually just one double quote. This backslash would not show up. Now, an even easier way to do that, by the way, would just be to use single quotes and put one double quote in there, same thing or backticks.

[00:10:19]
But this particular language that we're using here just always uses double quotes, so it has to always escape all of its double quotes, that's why. A valid thing to talk about as well with JSON, it's always double quotes. You cannot use single quotes in JSON or backticks. Always, always, always double quotes.

[00:10:38]
And notice that the 10 here is a number, right? So it doesn't have quotes around it because you can have numbers in JSON. So JSON can have strings, numbers, objects, and arrays, and booleans. I think that's it. Right, you can have objects of objects, the nesting there is infinite.

[00:11:07]
But at the end of the day you can only have strings, numbers, Booleans, objects, arrays. Another thing that bears mentioning, commas here are not optional, right? So I have to have comma, comma, comma. And if you remember in JavaScript the final comma is optional, in JSON it's not, you must leave off the final comma, right?

[00:11:27]
So notice I don't have a comma here, I don't have a comma here. JSON will not allow you to do that. They're all things you kinda just get used to by doing it over and over again, but I'm trying to think about how you could run into trouble with this, okay?

[00:11:48]
So let's go in the opposite direction. Let's say I have Luna here, or my dog object, and I want to encode this into JSON so that I can send it to a server. How would I do that? Well, there's JSON.stringify, which is my favorite name of a function in JavaScript.

[00:12:08]
All it does is it takes an object and it turns it into a string of JSON, right? So if I have const myObj = {name: "Brian"}, right? So if I just log this out, it's a object that has Brian on. If I say my object.name, if I say JSON.stringify and I give it my object, I get this.

[00:12:37]
It's a string containing all of this, right? Makes sense? Cuz you have to think about how a server and a client are gonna communicate with each other. They're just gonna send each other strings of information. And then it's up to either side of it to turn that into data, or understand that data.

[00:12:58]
So something that's useful sometimes is notice here I just said stringify with no additional options here, right? And that worked. It makes it as compact as possible, so there's no extra whitespace in it. Sometimes I actually do wanna see the whitespace, right? I'm actually trying to understand what's going on in my code.

[00:13:16]
So if I do JSON.stringify(dog, null) or you can put whatever you want here, usually, I just put null, it doesn't sound important. And then if I put 4 here, then you get this. It indents your JSON with extra optional whitespace, and that makes it easier to read, right?

[00:13:41]
I can put 2 here, right? And notice that it just indents it with 2 now. Or I can put 1, which makes it really strange to read. Or I can put 6, which makes it super indented, whatever you want. That's just how much you're gonna indent the code with.

[00:14:03]
Just wanted to show that to you because, Yeah, we're looking down here, right? So notice, this is all very close here. This is a little bit further, further, further, right? So notice it's getting more and more indented as I go. Cool. So yeah, you might ask, why is there a null there?

[00:14:32]
Back in the day, they thought it'd be good ideas. What happens if I need to modify something as it's being translated into JSON? They give you the ability to put a function there that can modify things as it goes. Literally, no one uses it. So I'm just telling you that for your curiosity.

[00:14:49]
But this will always be null, if you ever use it. No one uses the replacer function. I would venture to say that 95% of people don't even know what the null is there, they just always put it. I just happened to look it up one time. Okay, questions about JSON?

[00:15:12]
I know this was a little abstract. We're about to start using JSON, but it's important that you understand how it works, essentially.