"How much would it cost you to build a website for a client? it's just three pages. " I was asked this question recently, and I'm pretty sure the average software engineer has gotten a similar type of question. It's quite understandable that the average netizen doesn't know the difference between web1.0 and web2.0 as such, I'll emphasize this evolution with an example that should help cement it.
Today we'll be looking at SPA (Single Page Application). Quick question though: how many web pages does LinkedIn have? 😏... You most likely guessed wrong: LinkedIn has just one page (and I'm not lying, 😂).
The way the internet worked back in the good old days is that everytime you click a link, you're literally telling your browser to ask the server to render the page that the link points to, this was before the era of dynamism (which web2.0 brought).
Web browsers have however become more powerful and less dependent on servers to perform as such, these days when you click a link, you're asking your browser to fetch the content of the link you clicked and display it on the current page you're on.
A relatable explanation
To further simplify things, imagine you're enjoying a great cup of coffee and you want a refill. There are two ways this can happen, you either go get a new cup of coffee or have someone bring you a refill. In the days of web1.0, the only way you're getting more coffee is if you go and get a fresh cup yourself. Currently, someone comes and fills your cup with more coffee. Now imagine that the coffee is the content of the page you want.
Now you may be wondering; if every webpage is built using web2.0 convention has one page, which page is that "one page". The answer is right in front of you, the only page you actually visit is the homepage of the platform, for every time you click a link, you're simply swapping the content of the body of the homepage with the content of the body of the link you clicked 😉.
The basic structure of a website
A website (as far as a netizen can see) is just a header (navigation bar), body (where most of the content is) and footer (where the periphery of the platform is). If you notice, the navigation bar and the very bottom of most websites you visit never change.
The trick behind this level of dynamism on the web is powered by JavaScript (a programming language) and is able to fetch and send data from one page using DOM (Document Object Model), DOM is what allows JavaScript to literally override the HTML (HyperText Markup Language) and CSS (Cascading Style Sheet) properties of a website.
It's important to recall that everything you see on a website is a result of HTML (think of it as a skeleton), CSS adds beauty; things like colour, shape, and form are the result of CSS. JavaScript (through DOM) is able to rewrite the HTML and CSS of a website, which is why SPA is possible.
Finally
It is important to admit however, that on the backend, SPA applications have multiple pages built as templates. They're not static pages, they mould dynamically obtained data.