How much "single paged" a complex application can be?

Question

I'm working on a quite a large application with several sub modules. Each of the sub module can be of complex functionality with many panels and UI components. I had done smaller scale projects before as a single page application, but this time worried on the fact that my DOM will not be refreshed for a long time if user keeps on working across many modules.

When I analyze how Facebook operates, I see it works as a single page app most of the time. But time to time it refreshes the whole DOM with an action of the user (apparently it is random OR based on user activity count).

Is their any pattern or best practice on how one might create such large applications as single page, without compromising DOM performance?

(I'm NOT looking for coding techniques to keep the memory foot print low.. but for a design approach for the total application)

Answer 1

There's no shame in refreshing the page. An application doesn't have to be strictly single-paged.

If you have controls on your page, their actions should remain contained within that page. But if the user goes on an entirely different part of the application, there's no reason why he shouldn't be able to simply navigate to that specific page.

Answer 2

Destroying DOM nodes, or setting innerHTML = '' for the panel, that has to be changed, just before the change occurs should be fine. I suppose the UI elements have a destroy or similar functionality.

Also consider unsetting all javascript variables involved in the functionality of the panel, that should be cleared.