Introduction to Single Page Applications (SPA)

Bo Andersen
A free video tutorial from Bo Andersen
Lead Developer
4.6 instructor rating • 5 courses • 80,075 students

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 page applications also referred to as this space. You can certainly use Mujeres without building a single page application as we've seen so far. But usually people use a large daubers framework with the purpose of building an SBA. Let's take a step back for a moment in case you're not familiar with the concept of single page applications traditional web sites work in the way that your browser sends an HGP request to a web server which then responds with the H.T. M-L 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 Gucci's for parts of the page as we saw earlier in the course. But essentially the web service Bron's with the complete markup needed for the browser to render the page which you can then interpret directly single page applications on the other hand work a little differently. The browser of course still makes an HGP request to the web server but the servers ponts differently instead of responding with the full HMO markup for the page. It only sense a part of the markup in return. This includes the base HMO markup which would be the index that HMO file that you've seen in the previous section. This markup and pollutes and elements where the content for the requested page will be inserted. Plus the scripts like for you just since we've been using web pagen this course this equipt I would include our web peg bundle which includes both QDOS itself as well as our application for form more advanced set up. This will probably be split into two bundles. Of course you might also have other script techs or stylesheets for Lobo's 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 viewed his boots up. It renders the appropriate components with any element in the skeleton mockup that was returned from the server. This means that the content for the various pages of an application is rendered from 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 gets 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 from HTP requests instead of just being embedded directly with NEHTA markup that comes from the server we have previously seen how to render components within the skeleton being the index that HMO file in this section we're going to look at how to work with multiple pages in an application and how to construct view just to render the correct page when receiving the skeleton markup from the web. So for this purpose we'll be using a library named view Tesch router. Remember that view is made of several libraries apart from the core library which we can then add to a product as needed. So without further ado let's install the view router library and get started on building our first single page. Objection.