Single page app vs multi page application?

Question

My experience has been using the hybrid approach per use case demand:

1. Where content on same page needs to be updated, we used AJAX/SPA approach
2. But when the page has a completely different layout/look and feel then we would always submit the page and a new HTML response was loaded from server

My question is on point 2. Can we use SPA/AJAX approach also for point 2 with the modern frameworks like angularJS etc., where HTML (with different layout) already loaded on client side. When user clicks on different tab in application, that HTML is picked from client side and data is loaded from server side. Is that correct ?

My understanding is that the advantage of this approach is it will allow for a faster and better user experience than multi page/form submission approach.

Answer 1

Absolutely and I have seen this done well and poorly.

The single page approach is basically load once and then avoid the browser page load functionality while modifying the existing DOM. Many third party controls may implement different methodologies resulting in a reload that is unplanned...which is the "poorly" referenced above. If you use third party javascript you have to avoid or modify any that don't adhere to the single page application approach.

That being said if you pull it off that way, the individual javascript code(super fast) + Network traffic + Database/API/etc... interaction + refresh rate on client machine = performance. There is not full re-rendering or file transfer actions from the server to client. Extremely large datasets might cause delay, but then put as JSON and sent back, once they are there it's all local again.

The only hurdle is making sure the client can handle the permutations and processing so you do client perf testing to make sure and then do "approved specs" for the client machines so that you don't have someone on really legacy equipment complaining it won't work. Various browsers behave differently too for web apps, so you have to ensure the javascript adheres to all and isn't browser specific. Mobile adds another layer, but responsive UI should streamline the approach, just make sure again the javascript works for all and not some (sometimes you have to code a few ways depending on which client application is rendering).