Hi. In this video, I'd like to explain to you what a single-page app is and the advantages that you can get from it and how you can program it. So my name is Shad Sluder and I'm a professor of software development at Grand Canyon University. So if you're new to the channel, please subscribe and you can join me in class and you can become a professional web developer. So what I'm interested in is looking at the top layer of an N-layer design.

So if you're working with a full-stack application, You've got a lot of things to think about. So the top layer is the front end, the bottom layer is the database, and then of course we've got a bunch of things in between. So if you'd like to see tutorials on how to build these full stack applications, whether it's in Java, C-sharp, PHP, or JavaScript, I've got all kinds of tutorials on my channel, so check those out. So a request that comes from the client goes down through all these layers and then is returned to the client.

That client response is done in two different ways. principle ways. One is called a full page app and the other is called a single page app.

So we're focusing in on the differences between those two types of programs. So the controller that runs this has to respond differently and the client that runs it has to be built differently if they are both programmed correctly. So let's talk about what a single page app looks like. It looks to the user pretty much like a standard app. So you don't really notice that there's a style difference.

However, what you do notice is a performance difference Let's talk about the two different contrasts. So here is the cycle of a traditional web app So first of all, the client is going to ask for some data So there's a web page for example that says site.com presses enter and then that request is sent to a server That's called a get request. The server then has the job of rendering a page So it responds with a string of data.

That string of data is an HTML format, and then the browser's job is to parse that and correctly display it on the screen. So that's the job of the application of Chrome or Internet Explorer or Safari or whoever you choose. There are standards that every browser follows so that the HTML format is followed correctly. Now, the user sees the input and puts in a keyword, such as the word free here.

However, behind the scenes there is an action. So inside the HTML code you're going to see form action equals something. In this case the action is search and the type of action is a post request.

So when you click that submit button, the browser then sends more data back to the server. So another request. That request then generates some more action. It goes to the database, finds everything that belongs to that search term, such as free, and generates another page.

So more HTML code is sent back to the browser. Now when that browser gets that request, it pretty much restarts. It blanks out the page and then displays the new data. So the search results show up in a list, for example.

That is what a traditional web app is. So in this case, you can see that there are two blue arrows pointing to the client. That means that there are two full page refreshes.

Not bad. But we could do better. And that's why we came up with this idea of a single page app or an SPA. So it's a little bit different, but not a whole lot. So it starts off the same where we have a browser and the browser says, get me a page.

So a get request. The server then generates that page and the same form is displayed. However, there is a difference. Notice the form action is now going to have no action associated with it.

So when the person types in free. as their keyword search, instead of the form submit button doing any work, we add some JavaScript code. So somewhere on the page, there's going to be a script area. And that might have a command like this, where it says ajax.post, and then expecting a response from that. So the ajax post goes back to the server.

Same kind of idea, where we send it some data that says, I would like to search for things that are free. This time, however, the server is programmed in a different way to respond. So instead of generating a bunch of HTML code, it only generates the data that the client will need. Usually that data comes in the format of JSON. So JavaScript Object Notation is what JSON stands for.

And this is what it looks like. So the text is smaller. And there's no things such as HTML headers, or styling, or any of that.

That's already been loaded on the client, so we don't have to send it again. We do send the response back in this text format. Now, the search...

The server has done his job. He doesn't have to generate nearly as much code, but the client has a lot more to do. So that same script that was sending the request now has to come into action again.

It's expecting a response, and when it gets the response, then it has to essentially go through such as a big for loop and respond by parsing the text. And it might generate its own HTML and insert it into certain parts of the page. Or it might notice that certain things have disappeared, and they can just be disappeared from the page, deleted.

But the page does not do an entire refresh. The results are a partial page update. And that's why a single page application is desirable.

Because if you do like small edits to a page, you just want that one piece to change and not have an entire browser restart. So clients have a lot to work on now when you have a single page application. They do a lot more work.

So the JSON text comes from the server like this, but then the code that you're going to have to write on the client Looks more like this purple box. You can see that this command here is Ajax This is written in jQuery, which is kind of an old-fashioned way of doing JavaScript But it's pretty clear to understand you can see that there's a put request going on here And then there is a success item here. So success is a function that says expect data to come back from the server and then process it here.

So what can you write as a JavaScript client? So jQuery is kind of the grandfather of the group. It was the original way sometime back in the mid-2010s or so when people started doing this kind of thing.

But the other choices you see on the screen here, well, they're more modern, they're certainly more complex to learn, and they are more capable. So React is probably the leader right now as far as the popularity goes. View and angular are good choices as well.

So any one of these will accomplish your goal It's just a matter of which one your company works for or works with and which one you're most comfortable with So these are not your only options. You can program the same result using things like Blazor and C sharp Which is more of a web assembly idea, but we're thinking about single page applications in JavaScript right now And these are your main choices for what you should study and what you should learn. And obviously, if you want to find out more about how to do these things, check out the links below here in the video, and I'll show you some of the other tutorials that will do exactly that. So if you'd like to see an entire full-stack application, you can learn, for example, how to run Spring Boot with Java and create not only the back end but also the front end. So check out the links below, and I'll look forward to seeing you soon.