Introduction to Single Page Applications (SPA)

A free video tutorial from Bo Andersen
Lead Developer
Rating: 4.5 out of 5Instructor rating
5 courses
120,660 students
Introduction to Single Page Applications (SPA)

Lecture description

Throughout this section, we will be working with routing and building single page applications, also referred to as SPAs. Let's take a moment to see what it's all about.

Learn more from the full course

Vue JS 2: From Beginner to Professional (includes Vuex)

Learn Vue JS, and become a VueJS professional. Build complex SPAs with Vue.js, a simple and popular JavaScript framework

15:17:22 of on-demand video • Updated November 2019

How to build advanced Vue.js applications
How to build single page applications (SPA)
Understand the theory and how Vue works under the hood
How to manage state in large applications with Vuex
Communicating with servers with HTTP
Use modern tools for developing and building applications (e.g. webpack)
English [Auto]
We have already gone through a lot of things so far, but perhaps this is the most anticipated section of the costs. In this section, you will learn how to build single patent applications, also referred to as space. You can certainly use futures without building a single page application, as we've seen so far, but usually people use a large JavaScript framework with the purpose of building an SBA. Let's take a step back for a moment in case you are not familiar with the concept of single page applications for additional websites working the way that your browser sends an HGP request to a Web server, which then responds with the e-mail needed to display the requested page after the page has been rendered by the browser, you might manipulate it with some JavaScript code or make the page more interactive. This could be done by using J.A.G. or perhaps even vouchers for parts of the page, as we saw earlier in the course. But essentially the Web server response with the complete markup needed for the browser to render the page, which it can then interpret directly. Single page applications, on the other hand, work a little differently, the browser, of course, still makes an EDP request to the Web server, but the server responds differently instead of responding with the full HTML markup for the page. It only sends a part of the markup in return. This includes to base its HTML markup, which would be the indexed at e-mail file that you've seen in the previous section. This Mahgoub includes an element where the content for the requested page will be inserted, plus the script tag for Yuji's. Since we've been using Web page in this course, this script would include our Web page bundle, which includes both beauteous itself as well as our application for a more advanced setup. This will probably be split into two bundles. Of course, you might also have other script tags or stylesheets for global styles, particularly if you're using a framework like bootstrap. So the browser just receives a skeleton from the server, which doesn't really render anything except for loading animation or something like that. Whenever beauteous puts up, it renders the appropriate components within the element in the skeleton markup that was returned from the server. This means that the content for the various pages of an application is rendered through JavaScript instead of being returned from the Web server. The server, therefore only needs to return this super simple markup because the rest of the work is done through JavaScript instead of on the server. So in that regard, the backend is simpler. But it also means that any data required for rendering the various pages must be retrieved through HGP requests instead of just being embedded directly within the HTML markup that comes from the server. We have previously seen how to render components within the skeleton being the index YAML file in this section, we're going to look at how to work with multiple pages in an application and how to instruct judges to render the correct page when receiving the skeleton. Mahgoub from the Web server for this purpose will be using a library named View Tesche Rueter. Remember, that view is made of several libraries, apart from the core library, which we can then add to our project as needed. So without further ado, let's install the view the library and get started on building our first single page application.