Site icon Coding is Love

Implementing single page architecture with vanilla JavaScript

SPA with javascript

Introduction

Single page architecture is an approach used for building web apps that have smooth inter-page-transitions. The transitions are so smooth and fast that they look like native apps. The basic principle of an SPA is that all of the code is in one document (one HTML file).

SPA is a modern web development practice. It is used very frequently these days as it gives a better user experience. The entire work flow of the web site is controlled by JavaScript. There are a lot of JavaScript frameworks available for building SPAs. For Example, React, Vue.js, Angular etc.

Why single page architecture?

Basic guidelines

  1. All the html code is housed in one HTML file (Although modern frameworks allow code seperation using multiple html and js files, All the code is finally rendered in one html file as a bundle or on-demand ajax calls)
  2. The code for different pages should be put into different div tags
  3. Only one of these divs should be visible at a time
  4. The visibility and hiding of each of these divs are controlled by JavaScript
  5. All the API calls(if any) should be made through Ajax on the client side itself.

Let’s make a simple website with SPA

  1. Create an empty project directory
  2. Inside the directory, create an index.html file with basic HTML tags like Head, Title, Body etc.
  3. Create two folders “js”, and “css” where the js and css files will be placed
  4. Put three div tags inside the body tag, which will represent three pages
  5. Keep the div ids as “page-1”, “page-2” and “page-3” respectively
  6. Put some sample contents into the three divs
  7. Create a file called app.js inside the js folder. And include it as a script in index.html.
    <script src="js/app.js"></script>
  8. Inside app.js, create 3 funciton for showing the three pages respectively. Set style.display as “none”
    to the div that you want to hide. Your app.js file should look something like this
  9. Now, we want page-1 to be show at the begining. So, we should call the showshowPage1() function inside a script tag in index.html.
    <script> showPage1(); </script>
  10. Now, if you open the index.html page on the browser, it will look like this.
  11. Now we need to navigate from one page to another. So, we will add two buttons in each page/div to navigate to the other two pages
  12. Call the function in app.js through the onclick attribute of each of the buttons.
  13. If you open the index.html in the browser now, you will see a very small example of a SPA website
  14. Click the button to navigate from one page to another. And notice that the URL is the same as all the code is in index.html

Conclusion

So, this was just a small representation of an SPA based website. With the same steps, you can build a much bigger website. It’s just a matter of what content you are putting inside the divs. But do keep in mind that the common elements like navigation bar should be kept outside the divs as it should appear in all the pages.

How this post helped you in some or the other way. Have fun making SPAs. And if you run into any problem while following the steps, reach out in the comments below.

Exit mobile version