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?

  • Single page applications give your website/web apps a more dynamic and fluid feel
  • It opens doors for some clever design choices
  • Most of the pages data is loaded on the first time. So, transition between pages won’t require any server call
  • Since most of the things are loaded at once, the transition between pages will work offline also

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. Basic structure of the html code

  7. Put some sample contents into the three divs
  8. 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>
  9. Adding sample content into the divs

  10. 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
  11. js code for hiding/showing divs

  12. 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>
  13. Now, if you open the index.html page on the browser, it will look like this.
  14. First look of the website

  15. 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
  16. Call the function in app.js through the onclick attribute of each of the buttons.
  17. Inntegrating the JavaScript with HTML

  18. If you open the index.html in the browser now, you will see a very small example of a SPA website
  19. 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

Final demo of the website



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.

Author: Arjun Mahishi

Human by birth, machine by behaviour, geek by choice.

Leave a Reply

Your email address will not be published. Required fields are marked *