Single Page Applications, or SPAs, have become increasingly popular in 2020 to make websites appear faster. They work by rewriting the content of a web page with downloaded data, instead of making the browser download entire new pages.
There are many benefits to using a SPA. Most notably, the website feels faster when navigating within it. When the web view doesn’t have to refresh the transition between pages feels a lot smoother. We can also leverage this technology to create animations between the separate pages.
I really wanted to use this technology when rewriting my portfolio. However, I host the website on Github Pages — which is a static site hosting service — and thus cannot use a framework like React or Angular. There are ways to fix this problem, but I found that I wouldn’t leverage the power of React or Angular, and decided to look for a more “vanilla” approach.
Luckily for me, there are many ways to create a SPA with vanilla JavaScript. In fact, SPAs existed far before frameworks like React or Angular even existed. The most popular way to build a SPA with vanilla JavaScript is with Ajax, which can be found in frameworks like jQuery. However, with Ajax I would have to manually determine what content I want to refresh on the page and how to replace it as well as setup the event handling to actually…
