What is a web site?

First thing we need to define: "What is a website?"

A website is a collection of related web pages. And the web pages is basically just a document that your browser is capable to render.

Not much of definition, right?

So let's do some empirical observation.

We can distinguish, on a high level, two types: static and dynamic(interactive) sites.

Static site

Simply put: it is just a document which serves only one purpose: to present information. Or if we go a bit more deeper: static site is the same regardless of how much you're trying to load it.

Note that it doesn't imply that there it is supposed to be JavaScript free. After all, we can use JS to simply enhance user experience:

• Suggest a mobile version of web site;
• Improve user interface by adding some useful elements (e.g. scroll to top button);
• Client-side validation (a special case of above). While it is kinda made obsolete due to HTML5, it is still might relevant in some complex cases;
  • Still, most likely you better to consider HTML5 validation first. Look at good article about it.
• Animation. Mostly obsolete due to CSS3;
• Ads (yep, it enhances, in a bad way).

Dynamic site

Simply put: browser download some HTML with lots of JavaScript code that changes its content on a fly. It is usually done on demand (when user click some control element) by fetching some data from remote side.

This is now popular direction thanks to how cool Google implemented its Maps. It is important step as it provides many more uses cases to web sites (chats, editors and etc).

Originally it had some severe drawbacks due to inability to bookmark stuff. Luckily it has been fixed by HTML5 with introduction of History API. Now at least your users are able to bookmark super cool SPA.

SPA

Evolution of dynamic sites.

One of the problem, according to some web developers, is that user has to re-load pages during navigation. Now, why would we allow user to suffer from re-load, when we have AJAX to load content within a single page?

This brings us to Single Page Application which is ultimate evolution to create site with tons of JS bloatware.

The evolution toward SPA is actually pretty much understandable. After all with current capabilities of browsers, it can completely replace desktop applications. Especially considering how much of a hassle is to create desktop application (cross-platform problems).

SPA aims to emulate desktop applications by having a single page (which is also a entry point). This page loads lots of CSS and JS at once and uses it to act like a desktop application without a need to load a different page. SPA maintains set of states within a page which in a way just acts like multiple pages within a site. The only difference is of course, user already loaded everything and navigates through JS.