ASP.net MVC Single Page Application (SPA) concept

Question

I'm new in ASP.net MVC Single Page Application (SPA). I want to design a system that using SPA concepts.

However, I have a bit confusing on how a system consider design in SPA concept? Is it the system URL must always same although we perform many activities or don't have back function (browser) as it always in one page because only render the necessary HTML part? I did googling on this, still have no idea. Does anyone can explain in more simple way?

Thank you.

Answer 1

One of the main advantages of having an SPA is that because you only have one page and you load all the data at once (or make multiple AJAX calls in the background to get data on demand) your application gives an illusion that there is no post back to the server, making your web application seem like an app.

Using SPAs can potentially improve the user experience of your application.Site speed can be improved but you might have to make a user wait a few seconds to load all the initial data.SPA's are great for touch screen appications, such as kiosks and touch based Point Of Sale systems where the navigation is 100% controlled by the SPA.

SPAs also have a lot of disadvantages like implementing the back navigation in your site.In traditional websites this is not a problem but in an SPA you would need to make very clever use of javascript libraries such as Backbone.js or Angular.js to mimic this functionality.Also search engine functionality of public sites and analytics may be a problem.If your are writing a huge enterprise type of application, you may encounter performance problems.

I would stronly recommend reading Disadvantages of Single Page Applications before you make a decision on whether to use them or not.

Answer 2

A SPA can still have multiple different URLs.

• In this case, the server that is hosting the application needs to be configured to direct all paths for a URL to the main index.html page.
• The index.html page will load the initial part of the SPA, and if it sees there is a path on the URL beyond / , then it will load the "component" for that path.
• A "component" as described here might consist of HTML, JavaScript, and request any data that is requested from external APIs.

Angular is a SPA framework that has built-in support for loading components based on registered URL paths. There are other SPA frameworks, as well.