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.

Then we will build a couple pages for both Single and Multi Page Application design using the Wizard's Toolkit. Wizard's Toolkit is a low-code development environment based on PHP, SQL and JavaScript.

With a Single Page Application when the user first comes to the website the page downloads the HTML, external CSS files, external JavaScript files, and possibly some images. Thereafter when the user navigates through the "website" or "app", what is actually happening is JavaScript functions are called which retrieve small sections of HTML and display them in a section in the previously downloaded HTML. This is usually done by calling PHP or other backend languages which receive passed parameters then retrieve information from a database, use code to determine and format HTML and return it to the calling app or website.

Historical note: Although not officially termed until 2005, Microsoft first created AJAX in 1999. AJAX originally was an acronym for Asynchronous Javascript and XML. It was a method of using JavaScript to make a call to a backend server to retrieve a small amount of data to update a web page. AJAX is no longer used solely for XML - in fact now it is usually used to retrieve JSON or HTML.

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.

Multi Page Applications on the other hand is how the web was originally born. Every link goes to a new page which downloads all the HTML, CSS, JavaScript and images necessary for the page. Most people have pretty fast internet so in actuality the speed difference may not seem significant especially if you have set your caching properly in your .htaccess file. Note that .htaccess settings also affect all subfolders by default. Still when a user goes from page to page there will be a page load so the "transition" is not as nice as on a Single Page App.

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.

Pros and Cons

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
• easier to debug because any problem is specifically from page you are on, not from a JavaScript variable value from a prior page

Which should you use?

• 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.

Links

https://WizardsToolkit.com/
https://animate.style/
https://www.chartjs.org/