SPA (Single Page Application)

SPA (Single Page Application)

Single Page Application (SPA)

SPA based on JavaScript continues to gain popularity in web development trends. Not surprising as SPA works perfectly across all user devices shows high-performance and decrease web development time. The popularity of SPA is visible for developers but too early to talk about total use. Basically, the development is based on React and Angular frameworks. The another benefit its using SPA you can easily deploy cost-effective hybrid apps. 

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.

SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. For the traditional ASP.NET developer, it can be difficult to make the leap. Luckily, there are many open source JavaScript frameworks that make it easier to create SPAs.

In this article, I’ll walk through creating a simple SPA app. Along the way, I’ll introduce some fundamental concepts for building SPAs, including the Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) patterns, data binding and routing.

Advantages: 

Single Page Application is good for making Responsive Websites, Support mobile, Tablet & Desktop. No extra queries to the server to download pages. Performance improvement, Single Page Application can improveperformance in many ways, Single time file load each of HTML, CSS, JS.

Disadvantages:

Client must enable JavaScript, Single Page Application build with JavaScript, So JavaScript should be enabled in client browser. JavaScript enabled in all modern browsers by default.

Security: Compare to traditional page Single Page Application is less secure due to Cross-site scripting (XSS).

Memory Leak: Memory leak in JavaScript can even cause powerful system to slow down.

AngularJs is a powerful javascript framework for building dynamic web applications. It became insanely popular nowadays. The good thing about Angular is that it has a set of ready-to-use modules to simplify building of single page applications. 

Applications are more fluid and responsive, without the jarring effect of reloading and re-rendering the page. Another benefit might be less obvious and it concerns how you architect a Web app. Sending the app data as JSON creates a separation between the presentation (HTML markup) and application logic (AJAX requests plus JSON responses).

This separation makes it easier to design and evolve each layer. In a well-architected SPA, you can change the HTML markup without touching the code that implements the application logic (at least, that’s the ideal). You’ll see this in action when I discuss data binding later.

In a pure SPA, all UI interaction occurs on the client side, through JavaScript and CSS. After the initial page load, the server acts purely as a service layer. The client just needs to know what HTTP requests to send. It doesn’t care how the server implements things on the back end.

With this architecture, the client and the service are independent. You could replace the entire back end that runs the service, and as long as you don’t change the API, you won’t break the client. The reverse is also true—you can replace the entire client app without changing the service layer. For example, you might write a native mobile client that consumes the service.