Single Page Application is a architectural style which uses different approach than what is used in traditional web applications, Most distinguishing feature of this style is its ability to redraw any part of User Interface, without requiring a server round trip to retrieve html.
In Traditional web application, when each new view (HTML page) is requested, it results in round trip to server. When new data is needed on the client side, request is sent to the server side, From server, the data and view are then returned to browser, which receives the new HTML and user sees the new view containing required data.
So, in this case Server manages presentation layer which causes client to refresh its page.
Now, lets see what happens in case of Single Page Application(SPA)
SPAs are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve HTML. This is achieved by separating the data from the presentation of data.
In this case, server just needs to send data, the presentation layer is completely shifted to the client side.
In SPA, the presentation layer for entire application has been separated out of server and is managed from within the browser; i.e. views are created and managed in browser. So from an architectural point of view, it gives SPA an interesting advantage, i.e. unless you are doing partial rendering on server, server is no longer required for presenting data.
Apart from architectural difference there is more to Single Page Application”.
The single-page part of the SPA refers to the initial HTML file. This single HTML file is loaded once and only once, and it serves as the starting point for the rest of the application. This is the only full browser load that happens only once in SPA.Later on portions of the application are loaded dynamically as required, without requiring a full-page reload, giving the user the perception that the page has changed.
Before moving to SPA style, lets first consider what will happen in case of traditional website with two html pages which are shown below
Now lets see what happens in case of SPA
Typically, the initial file is minimal structure often containing a single empty DIV tag which will house the application's content. You can think of Initial file as mother-ship and single empty div as port for loading (Something like docking bay). Initial file contains some initial starting elements such as HEAD and BODY. Initial file is generally as shown as below
This initial file has no contents yet, only an empty div, now fragments will be loaded dynamically according to requirement.
These fragments of application which are loaded dynamically are called views and are small html snippets, these are views which will get loaded when required replacing the container div in initial file.Views for above discussed html website with two pages are as follows, which will get replaced according to request.
Some major advantages of SPA are as follows
- Refreshing browser is not required
- Presentation logic sits on client
- Transactions with server can be data only
- Facilitates designing offline application
- It feels like native application
Some examples of Single Page Applications are Gmail, Twitter, FieldKo offline native app
and get in touch with us to know more about FieldKo offline app