Single Page Application

Single Page Application

Case Study: Lets discuss a very common scenario where an Our Application Architect Mr. Jintender  is making case for the architecture of their new project to his manager Ms. Mamta.

Hey Mamta!! Can we build our new app based on Single Page App strategy?

 Alert : There is misconception that We developers tend to gravitate to the shiny new objects 

Mamta thinks! I suspect you and the development team that might be looking for an excuse to use the “latest and greatest” and that it won’t work for multiple pages.

But Jitender!! Don’t you think we need more than 1 page?

Yes Mamta, you are right!, Let me explain you What is SPA and a Page here?

The “page” in SPA is the single web page that the server sends to the browser when the application starts. It’s the server rendered HTML that gets everything started. After that initial page load, all of the presentation logic is on the client.

The server’s diminished role is an important distinction in a SPA. The server has no UI logic. The server maintains no UI state. The server, however, does provide resources to the client. Those resources start out with the initial HTML for the web page (the shell) and may in response to client HTTP requests for data in the form of HTML fragments, JSON data, or on-demand JavaScript/CSS.

OK!! ???????, What’s the Shell here?

The shell is the layout and structure of your app. The visual parts that rarely change. The shell is generally loaded on the initial page load from the server and serves as the placeholder for all of your views [so called pages].

So, Why is it Called Single?

• 
  The single page is the starting point. It’s the first part of the app that gets the ball rolling.

•  When a SPA starts, the first visible thing we notice is the initial server rendering of the shell.
• That shell is our single page. In many SPA’s we won’t ask for another complete page rendering again.
• We already have what we need in that initial page rendering and now we rely on the SPA presentation framework to help us orchestrate the HTML changes for the user within the confines of that single initial page.
•  This is really important. In a SPA, we make one round trip to the server, up front, and get the initial HTML page.
•  

How this single page will support the 2 dozen screens our app needs?   Once we get that initial page loaded, we need other pages, don’t we?”

Good question Mamta!!!

Let me introduce some thing called HTML Fragments are Views. Views are the “other pages”. The Views are HTML fragments that make up what the users commonly call screens or pages. A user might say “Go to the Order screen” or “Go to the Customer detail ”. Their terminology is different from developers, and that’s OK as long as we understand how to translate it when we need to. In our developer speak the term “page” is overloaded. In a SPA everything the users sees is a “view”

We typically have many views in a SPA. These views, as we call them, are the answer to your question. Yes we need other pages. SPA supports that well, we just call them views. That’s an important distinction because we can have more than 1 view visible on the screen at one time.

Ah!! Now, I got what is SPA and Views. But, how do you allow the user to go between the views?

Most modern SPA presentation frameworks support the concept of routing via a service known as the router. The router’s job is to allow the user to go from View X to View Y within the browser by clicking some menu item.

When a user clicks on a menu item, the SPA sees that url and translates it to a View that should be displayed. If the view has not been seen before, the application may make an HTTP request to retrieve the HTML template for the view. 

What is Data? I think of data, is likely of the Customer Dteail, User Detail, Product Detail….. in the app.

Mamta! Here is a little catch. Data is not simply a list of customers, orders. Data can be JSON,CSS, HTML, JavaScripts, or some other resource that the app requires. A SPA can be built to request these resources asynchronously and on-demand(or cache them if so desired) 

UI Technologies to support SPA 

Libraries slot into your existing architecture and add specific functionality

Frameworks give you an architecture (file structure, etc.) that you are meant to follow and, if you do, are intended to handle all common requirements

http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/