Single Page Application

Today a majority of website visitors aren’t willing to wait more than two seconds for page to load

SPA is a type of web application or website that dynamically reloads custom portions of the page without reloading it in order to avoid fetching entire new pages from a server

You are using this type of applications every day. These are, for instance:

  • Gmail
  • Google Maps
  • Facebook
  • Twitter
  • GitHub
  • Google Drive

Pros

Digital User Experience

high speed and overall flow of the application in interaction with the user like native desktop or mobile apps as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application

SPA can usually run entirely in the browser with no internet connection after it has initially loaded as they can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works offline.

Performance

After the application loads, there will be a few communication between the server and the client agent with small amounts of data are sent back and forth instead of full pages.

Resources

In addition to less bandwidth, this also means less load on the browser and server.

the server will consume less resources because the backend developer can focus on providing an efficient API instead of building the layouts server-side.

Development

SPAs are easy to debug with Chrome, as you can monitor network operations, investigate page elements and data associated with it

Scalability

Extend to mobile applications approach because the developer can reuse the same backend code for web application

The ability to make mobile application {near native, hybrid} using JavaScript Libraries

Separation of Concern

Backend developers can just focus on the API, and frontend developers can focus on creating the best user experience,

Cons

Search Engine Optimization

tricky and not an easy to make SEO optimization of a SPA. Its content is loaded by AJAX (Asynchronous JavaScript and XML)·

Loading Time

It is slow to download because heavy client frameworks are required to be loaded to the client.

There are some ways of speeding up the initial load of an SPA, such as lazy-loading modules when needed.But it’s still slow comparing to traditional websites loading time

Security

SPA is less secure. Due to Cross-Site Scripting (XSS), it enables attackers to inject client-side scripts into web application

Memory

When coding an SPA, you are going to write a great deal of JavaScript Since the app can be long-running, you are going to need to pay a lot more attention to possible memory leaks

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

Analytic

Analytics tools such as Google Analytics rely heavily upon entire new pages loading in the browser, initiated by a new page load. SPAs do not work this way.

After the first page load, all subsequent page and content changes are handled internally by the application, which should simply call a function to update the analytics package. Failing to call said function, the browser never triggers a new page load, nothing gets added to the browser history, and the analytics package has no idea who is doing what on the site.

It is possible to add page load events to an SPA using the HTML5 history API; this will help integrate analytics.

SPA vs MPA

MPA {Multi-Page Application}

Every change eg. display the data or submit data back to server requests rendering a new page from the server in the browser. These applications are large, bigger than SPAs due to the amount of content.

It’s easy for proper SEO management. It gives better chances to rank for different keywords since an application can be optimized for one keyword per page.

Frontend and backend development are tightly coupled. The development becomes quite complex. The developer needs to use frameworks for either client and server side.

What should i choose ..?

There is no proper answer for that. It’s depends on your application

If you know you need multiple categories (because, for instance, you run an online shop or publish a lot of other content) — use a multi-page site. If you are sure that your site is appropriate for a pure single-page experience — go for it.

Hybrid

if you can just barely fit everything into a single page, consider the hybrid site instead. This is another way . A hybrid application takes what is the best in both approaches and try to minimize the disadvantages.

Implementation

Web Sockets and Ajax

WebSockets are a bidirectional stateful real-time client-server communication technology part of the HTML5 specification. WebSockets are typically used in applications where real time updates are required.

That can easily implement an ‘AJAX library on top of WebSockets and still use the same WebSocket connection for bi-directional real-time data transfer.

Server-sent events

Server-sent events (SSEs) is a technique whereby servers can initiate data transmission to browser clients. Once an initial connection has been established, an event stream remains open until closed by the client. SSEs are sent over traditional HTTP

JS Frameworks

I’m betting that you’ve heard or read something like “React vs Vue vs Angular” comparison. It’s just so common that you can’t get around it

There are so many other frameworks but these are the most common

  • Angular

Angular is popular web framework, from Google. Know, that here I’m talking about Angular v2 and up, not about AngularJS

it’s built and based on Typescript. In other words, you have to embrace this language to use Angular v2 and up. It might be a hard decision to make for some but it might be worth it. The use of Typescript introduce type-correctness and lot of modern ES features. Angular uses well-known to us concept of components, virtual DOM and templates.

Code for templates can also be placed in a separate HTML template file. What’s new in Angular is a concept of modules and services. Modules allow breaking your web app into smaller chunks that can work separately.

  • React

React is yet another popular web framework, this time from Facebook. utilizing what’s called JSX. What it basically is, is a combination of standard JS syntax with HTML in one file

React is based on the concept of virtual DOM. Through this technique it allows you to create components — building blocks — to create your UI. These components can have their own states

  • VueJS

It’s also based on virtual DOM but it’s implementation vastly differences from React’s. It’s known for being optimized in a slightly different manner. Its optimized for efficiency, meaning that it only updates these DOM elements that truly need that.

In place of JSX Vue places its templates. These feature easy-to-use and readable syntax for creating your UI.

Vue is often considered easier to learn, so much so that it’s really recommended for smaller teams needed to get the job done right and fast.

Navigation

Since you get rid of the default browser navigation, URLs must be managed manually.

This part of an application is called the router. Some frameworks already take care of them for you (like Angular), others require libraries that will do this job (like React Router)