در حال بارگذاری ...

Defining Single-Page Apps0:06

Let's talk about single page applications or SPAs. And this is one of those terms that it tells you what it is, but it's not very descriptive. Like a single page application is a web application that is loaded into a single page. Yeah, but what does that mean? So you can think of a typical web application, kind of like a book. As you're reading a book, you have to turn the page to get to new content and,

Traditional Page Reload Model0:26

As you're reading a book, you have to turn the page to get to new content, and you're completely reloading that content. The same is true for a typical web application. You click on a link, the browser sends a request to the server. The server responds not just with the content that you want, but with everything that needs to be loaded into the browser. So any UI elements like menus or nav bars.

How SPAs Load Content0:48

to be loaded into the browser. So any UI elements like menus or nav bars or anything like that, everything has to be reloaded into the browser. But single page applications are a little bit different. Now, of course, they are still web applications. So the basics are all there. It's how the content is loaded behind the scenes. It uses JavaScript and it just fetches the content that's needed.

It uses JavaScript and it just fetches the content that's needed to load into the browser. So that's it. The payload is a lot smaller because it's just the content that the user wants to see. Typically, most of the resources for that application are loaded upfront. So most of the JavaScripts, most of the CSS, and at least the initial content necessary.

Benefits of SPAs1:28

So most of the JavaScripts, most of the CSS, and at least the initial content necessary. And then whenever the user clicks on a link or goes to a different webpage behind the scenes, JavaScript just fetches the content and then replaces the content in the browser. So this has a lot of benefits. The first is speed, because now instead of fetching the entire webpage, you're just fetching just the content.

Downsides and Hybrid Approaches1:50

because now instead of fetching the entire webpage, you're just fetching just the content that the user is after. But there are also some downsides because a single page application is, well, it's a single page. So search engine optimization can be, well, it can be challenging because search engines crawl webpages based upon URLs, in which case it makes it difficult for those things to properly index.

based upon URLs, in which case it makes it difficult for those things to properly index a single page application. But then the initial load time can also be a lot longer than a typical web application, because typically a single page application is going to load all of the resources upfront. But there are a lot of modern web applications that take a hybrid approach, that build typical web applications that can also behave somewhat like a single page.

a hybrid approach, that build typical web applications that can also behave somewhat like a single page application, which gives you really the best of both worlds. But essentially, single page applications give developers the ability to create rich, responsive, and engaging web experiences.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟