When you are starting a project you first need to decide if it should be a Multi Page App or Single Page App. This video defines the differences, the pros and cons of each, and shows real code examples.
A prime advantage of Single Page Applications is speed and transitions from "page to page" can use fluid animations. All the CSS and JS files never need to be re-downloaded. The browser doesn't even have to check to see if they are in cache. You can even include hidden in the initially downloaded HTML static "pages" so they never need to be downloaded. For example, almost all websites will need a login page, a forgot password page, a "send bug report" page, and a "thanks" page. These can all be included in the original HTML and then simply unhidden when the user "navigates" to them. That way there is no need to even hit the server for those items.
A good example of a Single Page Application is Gmail. Once the page loads all clicking on links you do is only refreshing the bare necessities and makes for a good user experience.
In the video I throttle the speed using FireFox for Developers so you can see how MPA pages load versus an SPA set of pages.
Single Page Applications - Pros
- faster page navigation
- smaller file size between pages which could be important for slow connections, for example on a mobile phone in a mall or somewhere with bad reception
- nice transition animations are possible
- feels more like an App than a Website
- harder for hackers to hack
Single Page Applications - Cons
- harder to debug
- some libraries use DOM caching which can be maddening if you have data that changes
- horrible for SEO
- bookmarks and sharing links do not retain page you are on - they will always bring person to home page
- some SPA frameworks have a work-around but can be a nightmare for developer's to manage
Multi Page Applications - Pros
- good for SEO
- good for bookmarking and sharing because every page has a unique URL
- If you need web page for SEO, you should go with MPA.
- If you want people to share specific pages deep within your website, you should go with MPA.
- If you have less than 6 pages in your websites, you should probably just go with MPA.
In almost all other scenarios it is generally better to go with SPA.
When building web pages in Wizard's Toolkit the code is 99% the same regardless of whether you are making Multi Page or Single Page websites.