Understanding Single Page Applications in Pure JavaScript

Hello, developers! In this blog post, we will learn and understand how to build a Single Page Application (SPA) on the web using pure JavaScript and how it works.

Here, I will provide an idea of how an SPA is built and how it works, based on my knowledge and understanding of SPAs. Read the sencond blog; Creating Single Page Applications in Pure JavaScript to learn how to create SPA where I have developed a Text-Tools website. Visit this website to explore Words-Counter text tool and get full source code from GitHub Repository.

What is a Static Website?

In a static website, all pages have different URLs and different HTML, CSS, and JavaScript files. All pages are linked to one another using HTML links (the <a> tag). When we visit a website and click on links, the browser loads the page from the URL of the link by default.

What is Single Page Application (SPA)?

In a Single Page Application, only the first time we visit a website do we get an HTML file and all the remaining resources (CSS, JavaScript, etc.). After that, the same document is modified by JavaScript with different data that is either fetched as required or was already fetched initially, depending on URL changes and user interaction.

To build a Single Page Application, we need to do the following:

• DOM Manipulation: We will need to manipulate the Document Object Model (DOM) to dynamically update the content on the page. This includes adding, removing, and modifying HTML elements as the user interacts with the application using DOM manipulation methods. If you are not familiar with these methods, visit MDN Docs pages for different methods like createElement(), appendChild(), and removeChild().
• Routing: We will need to implement client-side routing to manage different views or sections of your SPA based on changes to the URL. This involves detecting changes in the URL and updating the content accordingly. It is done using the History API and the preventDefault() method of the Event.
• Data Fetching: As we update the same document as the user interacts, we need to fetch data and update the document with it as required. For this, we use AJAX, XMLHttpRequest, and fetch APIs.
• State Management: We will need to implement a way to manage the state of our application. This can involve creating JavaScript objects or variables to store and update the current state of the application.
• And More: We will also need to handle more things like Event Handling, so we can take actions as required, and Template Rendering, rendering the same template with different data for a similar type of UI.

So, to build an SPA, we will need to do all of the above.

In my case, when I was wondering how to build an SPA with pure JavaScript, I was able to do all of the above things except Routing. I searched Google many times on how to listen for URL changes and was looking for an event like a click event. But after some time, I understood that the web does not have any listener to listen for URL changes caused by links. At this time, I did not know about the preventDefault() function of Event or did not understand how to use it to listen for URL changes.

When preventDefault() came into action: By default, the browser loads the page of the link when a link is clicked. Here, I used the preventDefault() function to prevent the default behavior of the browser from loading the page of the link and updating the browser URL and document (UI) itself according to the URL.

When I learned about the preventDefault() function, I understood how routing works in SPA. As we know (If you don't know, then visit the popstate event), we can listen for back and forward button clicks, so we can get the URL and update the document according to the URL in these event handlers. And update the URL and UI when a link was clicked in the handlers.

So, in both ways (links and browser buttons), we can listen to URL changes and take action accordingly, and here, the SPA is created.

However, creating an SPA with pure JavaScript is easy, and we have full control, but as our project grows, managing code gets complicated. Here, we need to use SPA libraries and frameworks because these libraries are built and managed by many developers, and these tools are specially built for these purposes.

But still, sometimes we need to implement some custom code over these libraries because many times it does not fulfill our requirements, or sometimes we feel that instead of learning these tools in detail, we can implement our logic with pure JavaScript. Here, our understanding behind SPA helps us because overall these libraries and frameworks are built with Pure JavaScript.

In this blog post, I only discussed SPA theoretically, so visit my second blog on Single Page Application series to Creating Single Page Applications in Pure JavaScript. And I hope you learn and understand something about SPA and building it using pure JS. Happy coding!