*NEW* AJAX - Complete Fundamentals Course - Part 7: STREAMS

1. Class Introduction: Welcome back My dear Skillshare students to yet another class. This is class seven. We will be discussing a very advanced concept known as streams. Now before I tell you what that is, financed slide, I'm gonna be your instructor and thank you for following along. This class is standalone, but as you all know, this has been an entire series all about Ajax. Now, why do I need to discuss the Streams API when talking about ajax, we'll take a step back in the previous class we learned about the Fetch API. This is the newer, the modern way to perform an Ajax request. Now as we saw, the Fetch API relies on promises, but not only that, the Fetch API utilizes the Streams API. What this means is that when your browser makes an Ajax request to a server, what's received by the server is not the raw response. It is a readable stream. Why is that? Well, at the very crux of it, it really is nothing more than just being able to process chunks bit by bit. Think about Netflix, think about YouTube. When I was growing up, when I was a lighting, I had to download an entire video file before I could watch it. But today we don't have to do it. We can stream videos. We don't even have to download the entire video to our memory. So basically what that allows you to do is consume data that could potentially be larger than your entire memory on your computer, or your phone or your tablet, whatever you use it. How interesting is that this class is not going to be an all-encompassing class about streams, is just going to give you a high-level understanding on what streams are, how to read streams chunk by chunk. We have to use the pipe through method. And then I want to show you something quite interesting. I want to introduce you to the idea that it is possible to also write two streets. You don't only have to read streams. You can use Ajax to write to them. I know, very weird, right? This class is for all levels. If you're a beginner or advanced, trust me, there's something you'll learn. It is going to be a relatively short class, but full of fun pack information. So I can't wait. Please follow along and I'll see you hopefully in the very first lecture videos. 2. What are Streams: Before we look at advanced details around phage, you need to understand the Streams API. What is that all about? Well, firstly, let me clarify. In the early days of Fitch, streams did not exist. What and what does this mean? Well, if you're near my age, you'll remember back in the days when you wanted to process a resource, like a video, for example, you'd have to download the entire file, wait for it to be de-serialized into suitable format. And only then could you process the entire thing? Only then could you watch it. It was pretty annoying. But the good news is that bloodstreams, this all changes because with streams, you can now start processing row daughter with JavaScript. But by bit, as soon as it is available on the client side, gets me excited even thinking about it. Today, Fitch gives us the body of the response as a stream, as a readable stream to be specific. We've seen this before, but if you have forgotten, let me hop over to the console and show you very quickly. You've seen this trouble for we've got our JavaScript here within script tags. And this just makes it very simple. Fitch call, this just Fitch URL. I've just pasted a tear from JSON placeholder. We making a fetch request. If we just do this and we go to the browser, open up our console, nothing's gonna happen. The reason nothing's happening, of course, as we haven't done anything, remember, Fetch returns us a promise. In order to grab the result of the promise, we need to wrap this within a statement. We know we're gonna get given back the data. We can grab our data and we can execute this callback function. This just say all we want to do is console log back the result. That's all we want to do here. Save this, go to our browser. And here we go, we get given the result, we can see it's a response object. We open that up. We want to access the daughter rock. We want to see what's in the body of this response. But if we do that, we get a readable stream. And that's the point I'm trying to make. The body of the response from a feature request is received as a stream. Third question you probably having right now is, yes, it's very great. We have a readable stream, but how do we access and read the stream? Well, we have to use another API given to us by the browser. This API is called the Streams API. It allows us to use JavaScript to excess streams, pieces, bits of data received over the network and process them as we desire. I know it can seem quite daunting. Once we have most, one concept we've seen to have to now learn about another. Let me just grab my rock. Let me throw this to screen and let me just give you a summary. Alright, I don't want you to get intimidated. Just remember what streaming means. That just involves breaking down our results that you want to receive over network it down into smaller chunks. It allows us to process those chunks little by little. This is something browsers do anyway. For example, we know they do it when they receive assets to be shown on webpages. Videos, buffer, and more is gradually available to play as you continue to watch that video. And of course, we've all been to websites where you see images display gradually as more of that image is downloaded. Streaming is not something new. It's been around for a long time. That kinda makes sense. But how do we use streams? Well, in order to use streams, we have to make sure that the response seemed to us from the server is available as a stream. And just to make things a little bit more difficult for us, there's not just one type of stream. You've got two very high-level streaming loads. Reading from a stream and writing to a stream. Which one are we more concerned about? We are more concerned about how to read stream using Ajax. Remember, We just saw that the response body returned to us by a successful future waste is a readable stream. What's great about being a readable stream is that we can use a reader, for example, the gig Reader method. We're going to see it shortly. We can use a reader to read data from the stream. I think this is enough for now. I know it might be a bit of information overload. In the next lecture, I want to start talking about how we can actually read the data. Stay motivated, jump up and down. And I'll see you in the next lecture. 3. How to read streams: Okay, let me answer the $1 million question. How do we read streams? Now, I just wanted you to realize this is very, very advanced. And you only need to really read streams if you've got very heavy resources and you want to process chunks of data. But, but, but for most of the Ajax calls you're gonna be doing, you won't have to read chunks individually. You can just use that JSON method, for example, which does all the heavy lifting for you and will eventually return you all the data. I just wanted to clear things up. It is very interesting to understand how we can read streams. We know that Fetch returns a readable stream object. But how do we read the stream? That's the $1 million question. We have already seen. We can use that JSON method and it does it for us. But what about if you want more control? In that case, they are two important objects that you need to know about and deal with in order to read streams and all the readable stream object and the readable stream default reader. Firstly, let's look at this readable stream object. What is that? Well, let's just quickly hop over to our editor and let's start looking at this in a practical way. We are talking about the concept of streams. And what I want to show you is that what's returned to us from Fitch is a stream, is define a variable. Let's call it stream. And it's assigning it to what's returned to us by a coal. We're gonna be using the same URL we have been in the last few lectures. And if we just left it like this, what would we expect to see? What is this stream variable going to be? That's right. It's going to be a promise. And what's resolved is a response object. Let's go to the browser, everything, and let's type out our stream object. There we go. That's a promise. And we know it's going to be of type response, we get this response object. Makes sense so far. Yeah, yep, yep, I think so. I think so. But we don't want the response object, Dewey. We want to access the body of the response. In order to do that, we have to wrap this Fitch in a vein statement. And we know the promises is going to give us the response object drive. We can just call it response. Then what we want to do is we want to access the body of that response. And this Medea students should return us the readable stream object. Go to the browser, clear everything. X is our variable and we have it. We get a promise. And what's resolved is that readable stream. Got it, great. The topics, the lecture. There you go. We know that what's returned to us by the Fetch API is a readable string. And this can be found in the body property of the feature response. Okay, Okay, client, but what do we do next? Well, we can call the gate read up method on this readable stream object. And that's going to return us something else. That's going to give us a reader. In particular, it's going to give us the readable stream default reader. In effect, what I'm saying is it's going to give us the ability to read the stream bubble object. Let me hop back to the editor name is show you how we get this reader. Let's pick up exactly where we left off. We know that the body of a fish response object is a readable stream. Friday, when we console log ofstream object, we could see that it was a readable stream. If we open up this readable stream object, one of the methods we have is this gate reader function. And calling this good reader function on this readable stream will return us the readable stream default reader object. These all tongue twisters. In other words, it's going to return us a reader. What do I mean? Well, let me show you, let me show you. Let's go back to our text editor now we're not interested in getting a stream back. I want to show you now how to get a reader back. We just saw that within this body, aka within the readable stream object is a good reader function. I've just showed you that in the console. Why don't we execute this code to our browser again. And let's now console log our reader. We can see now that what's returned to us is the reader, specifically the readable stream default reader? You might think we've done write-down, but we're not, we've only got a reader. So why is having this reader object useful? Well, let's cut to the chase. It allows us to read the stream. Specifically, we can read the data in chunks. We, a chunk is a byte or a typed array. But anyways, the bottom line is that once we have a readable stream default reader, we can access the daughter using its read method. What super-duper interesting is that as soon as this reader is created, the stream is locked and no other reader can get chance from it until of course you call the release lock method on it. Don't worry, another, It's very advanced and this is not a course about streams. The most important thing I want you to know is that when we have this readable stream default reader object to us. We can use the read method to actually read chunks of data, but by, but birds, you know me by now, I love practical examples. Let me hop over back to the editor. Let me show you how we can use the read method. And what's very cool is if we open this up and we looked at its prototype, these a property method called read. Ok, OK, OK. So we've got this readable stream default reader. We know it has a function called read. And with that, we can read chunks of data. Let me show you exactly what I mean. So let's go back now to our coding editor. Now we don't want the reader, do we? Now we want chunks of thata. This is where it gets really exciting. We know that on this readable stream default reader object, we have this red function. We can just chain it on. And this is pretty much it. Let's see what this returns us go to the browser, clear everything. That's type pod, I'll chunks variable, and let's open it up. This is interesting. If we open up this object. The second thing we see is that we get two properties done and value. The value property. If we open that up, that lists all the bytes received. That's interesting. But because this returns a promise, we can actually utilize the vein statement in order to display the value. Let me show you what I mean. Let's go back to it takes data to here. And of course, all we need to do is excess, another vein statement. And what data are we going to be getting in this thing statement? Just sit up the code. If everything's ready, what data we're going to get? Well, if we go back to our browser, remember I said that this chunk variable gives us back the Dun and value properties. We know what's given back to us is the value and done objects. Pretty cool at all. I want to show you now is I want to show you what this value property looks like. We can just console log to the screen. Let's go to the browser and refresh. And there we go. We get those values. Going back to our code. I don't want us to really concentrate on what done is for now. I just want to show you how we can access the value that Bits and Bytes received from an Ajax response. That's what we've done here. That's what's on our console. And if we open up any single group of array items, what you'll be seen or bytes. And these bytes are stored in a uint8 array. You can just picture them as being a bunch of bytes. The number of these arrays we get and the size of them. Well, it's going to depend on your network condition. If you have a faster network connection, you'll have a few big arrays. Of course, if you have a slower internet connection, it will drip feed smaller arrays back. And there'll be minimal often. Quite often, you don't really want to deal with binary daughter. But don't worry, we can transform the stream into something readable. Anyways, Got it. Sorry. Let's jump back to the lecture room. Isn't that fun? We're getting pretty advanced now, there aren't we? So let me just say that with the reader, we can see an excess all of the data. But there's a downside because that data is in binary format. This means it's meaningless. I know, I know. So what do we do? Well, in order to transform bytes into characters, you need to use some sort of encoding API. You need something to go through those bytes and convert it into something meaningful. Well, what encoding API can use? Well, one such encoder is the text Dakota, and this is given to us, of course, by the browser. And actions speak louder than words. So let's see how we can use it in practice. Alright, so right now we've got this uint8 aids array, which is pretty meaningless because I don't understand what these numbers mean. But don't worry, as I just mentioned, we can use an encoding API which basically transforms those bits and bytes, two characters that we understand. How do we do that? Well, that's very easy. We don't just want to console log this value. Do we actually want to decode it first? So how do we do that? Well, what we can do, different browsers have different decoders. I'm using Chrome. So why don't we grab Chrome's decoder? Of course it's a constructor function, and this is given to us straight out of the box by the browser. We want a decoder that decodes into UTF-8. For example, UTF-8 is the default. Now we've got our decoder. What we can do is we can access our decoder object. There's a method on your cold decoder. What do we want to decode? We want to decode all of our butts. Pretty cool. Let's go to the browser. Let me refresh. And boom, we go. There is our result. The call to this API, by the way, only returns five posts, which is what we have here. Man, this is cool. So well done, well done for sticking with me through this entire lecture. I know it's been long, I know it's been very complicated. And this is a very complicated topic. In fact, in most cases you're not gonna need to decode chunks of data, but by bit, you can just wait for your asynchronous code to complete and then work with the data. But I it to give you at least a high-level understanding of how streams work. Because I want you to be a grandmaster when it comes to Ajax, who I know, I know, I know recruiting through this well done for sticking with me. And we are almost done. Let me just provide you with a high level summary. We know that the Fetch API returns us a readable stream. We can access the stream by accessing the body of the response object. And once we have the stream, we can start reading it. But in order to read it, we have to create our reader object. We do that by executing the gate Reader method. After that, to actually read the data, we can then execute the read function which returns us to values, value and done. And as we saw, the value is in bytes. So combining this with the decoder, we have everything we need to use chunks of data as they arrive. Pretty cool. I know this is very advanced. I mentioned this is not a course on streams. This course is already long enough trying to just get the concept of HX across. But at least now you starting to gain a high-level understanding of streams. Because remember, Fitch is based on the concept of using streams. Very cool, very exciting. I'll see you in the next lecture. 4. Writing to streams: If you think you were confused in the previous lecture, I'm only going to make matters worse because now I went to talk to you about writing with streams. Streams on getting pretty advanced right now. What this means is that you can even seen the data in a request in streams. I know this is very, very advanced. Don't worry if you don't understand this lecture. But it's so exciting streams is a very exciting topic. Maybe I should do a whole course on streams. But for now, I just want you to know that we don't only have to read streams, we can also send streams and right to the very, very cool, How do we do it? Well, we also have to use the readable stream interface. It just so happens though in that, in this case, we are creating our readable string. By using this, we can create and return a readable stream object ourselves. Okay? Okay, okay, let me give you an example. But before I do, you might be thinking, how might this be useful? That's a good question. Well, think about it. Think about a chatroom, for example, as soon as the user starts typing or even focuses in on a field, you can start setting up your streams request. You can send headers and all other bits of random information first to server. Then you can just seem that the text when they had done at a different time and it'll just improve speed. It will create a better a user experience. In fact, you could even start sending data to a server as the user starts typing. Hallmark does look when it comes to code. Again, don't get bogged down in all the detail. Don't worry about how to do it. I just want you to understand at a high level how it works behind the scenes. Let's say a user is typing in a chat room and we want to send some ticks to a server via a stream. What we can do is create the stream object. We instantiate the readable stream interface by using the new keyword. What's really cool is you know what this all means now, right? Cool. Well inside this readable stream, we need to start our own controller. Don't worry what this is. It's basically a way for us to define our own custom stream when the user types high day, let's say we grab it dynamically here, we just typing it out, but in reality we would grab it. We would then edit to a stream. And then let's just fake here that the user has taken 1 second to type, how are you? And then we take that text and we edit to a stream. We then call the close method and we finish our stream. So at this point, you might think that we could just send the stream in our normal Ajax requests that you might think we can use our Fetch API, the final URL state that is method is published and then the body of our post request, you might think we can put our stream object. Unfortunately, you would be wrong. The reason is, as of right now, the request of an ajax body has to be in the form of text. This means that the body of the request cannot be a stream. What this means is that you would have to decode the stream back into text before sending it. And we can do this. We've seen this before by using the pipe through method and get a, we take all that binary data and within posit into this takes decoder stream. Again, I want to re-emphasize, don't worry about the code. Don't really worry too much about this. Writing was streams is very advanced. I just wanted you to know it exists. I know we've run into lots about streams, but trust me, trust me, you all already miles ahead. Most other developers, when it comes to working with Ajax, this is very interesting information for you to learn and it will help you. In the next lecture. I just want to summarize everything we've learned when it comes to streams. Before we move on into further discussions around Fitch. See you in the next lecture. 5. Class Summary: Speaker that boom, I'm telling your brain like a mushroom badly went up. Play a melody. Come on, come on. You've got to be happy. You've come so far and thank you so much for your support. Thank you for sticking with me. I'm super proud of you by the way, because we've been discussing very advanced topics. People, you know, would just get lost and not want to continue so well done, serious D Well done. You on miles or eight trustee. All right. Let me just give you a summary. We've been talking about streams. Streams are just chunks of data. Don't get bogged down by all the complicated detail. It's important because Fetch uses the power of streams. But we didn't always have strings. In the old days. You had to read a file into memory all at once. And what makes streams unique is that it allows us to read chunks of data piece by piece. And this makes dreams really powerful when working with large amounts of data. Because for example, you can now read the file size that's even larger than your free memory space. And this is really exciting, muddy students because with ajax, with the Fetch API, It's possible to extract, to read, to fetch data, very large amounts of data and files from a server. Let's take a streaming service such as YouTube or Netflix for example. We know that these services don't make you download the entire video and audio feed or look once. In stage, your browser receives the video as a continuous flow of what has chunks, allowing the recipients, you and I, to start watching and listening almost immediately. It is very, very cool. Okay, got it. So strengths basically provide two major advantages over other daughter handling methods. Stream a one, memory efficient and time efficient. By memory efficient, I just mean that you don't need to load large amounts of data into your memory before you are able to process it. And of course, this feeds into the next major advantage, being time-efficient, it takes significantly less time to stop processing data as soon as you have it, rather than having to wait with processing until the entire payload has been transmitted. So that's the benefit of streams. We know it's applicable to us in this course because the Fetch API retrieve starts from a server as a readable stream. And I could have just stopped there. I'll be honest with you and they moved on to other discussions, attacks, but I wanted to dive more into streams. Specifically, I wanted to show you that we can access the stream of data via the get Reader method. Remember that? And then we can read the stream via the read method. But I want to re-emphasize here that you don't have to work with streams, you don't have to do this. You can deal with an Ajax response via the JSON method. And we saw examples of that numerous times already. And then of course, what's returned in the JSON method is a JavaScript object and you can use that JavaScript object any way you wish. So really what I'm trying to say is that if this entire topic of streams has gone way over your head, don't panic. You don't have to know about us in order to know about Ajax. But anyway enough on streams, it's been great fun and I hope you enjoyed it. Well done. And I will see shortly. 6. Class outro: Hey, well done, well done, well done. I told you this class was gonna be short and sweet, but it has been sweet, hasn't it? Because now you know something that most developers don't even know what streams, all, you know what readable streams or you know how to extract that data from a stream chunk by chunk. I even introduced you to the concept of white into streams. Now, streams in and of itself is a very big topic. So this class, it's purpose was not to get you to become a grandmaster and streams. Its purpose was to get you to understand ajax, the Fetch API that it relies on strings. Now, usually when using ajax calls and using the Fetch API, you don't have to read chunks from the street. We've already seen that we have methods like the JSON method that takes method that does it all for us to wait for the stream to finish. And then it gives us that in the body of the response which we can access via another promise. But anyway, you know all this already. We're done with this class. Well done. And in the next class, I want us to return to talking about the phage API, but I want to discuss a few slightly advanced concepts. I want to start talking about things like the ok. property. I want to start introducing you to the URL interface, the request interface, the headers interface, and a bunch more, maybe some error handling as well. Who knows, who knows? Let's see. I called wait, and I'll see you in the next class.