JavaScript: Vanilla Single Page Applications (SPA)
By: Santiago García Da Rosa
Tags: Nodejs, JavaScript, Vanillajs, Programming, Front End Development

Creating a Simple SPA

The idea is to implement a simple single page application using Vanilla script with a location hash approach.

Folder structure

js . This is where the JavaScript implementation is located.

. This is where the JavaScript implementation is located. views . This is where the HTML for the routes is.

. This is where the HTML for the routes is. index.html. This is the main HTML of our app. It is going to load the scripts and set the container to render the routes’ HTML.

Index HTML

As we mention before, this is the main HTML of our app, it is going to load the JS we need, add the menu links, and also set the container element to render the routes’ HTML.

We are creating two menu options linked to #home and #about (the hash is needed since we are going to use location hash).

and (the hash is needed since we are going to use location hash). The div with the id set to app is where we are going to render the HTML associated with the active route.

with the set to is where we are going to render the HTML associated with the active route. Finally, we load the scripts that we are going to use.

About and home HTML

We don’t really care about the content of these files, so one only contains a div with a Home text and the other a div with an About text.

The idea is to load one by default (as a default route) and the other if needed. As we mentioned before, they are located in the views folder.

Route JS

This JavaScript is going to provide a constructor to our Route s and also a couple of functionalities.

We have three params:

name . Is the name of our route, we are going to use it to check if the route is the active one.

. Is the name of our route, we are going to use it to check if the route is the active one. htmlName . Is the name of the HTML to load with the route.

. Is the name of the HTML to load with the route. default . True if the route is the default route of our app.

And it has two functions:

constructor . This is just a constructor function.

. This is just a constructor function. isActiveRoute . A function provided by each route to check if it’s the active one. It receives the actual window location.

Router JS

This friend is the one that contains most of the magic. Let’s take a look at the code and then we are going to explain it.

So, let’s start digging into this JS.

It only receives one param:

routes . It is an array containing the routes of our app.

It has another property:

rootElem . It is the root element of our application. The place where other HTML gets rendered.

Finally, it has four functions:

constructor . This is just a constructor function. It is executed only one time in the creation of Router .

. This is just a constructor function. It is executed only one time in the creation of . init . This function creates a listener to the hashchange event of window. First, it sets a callback to that listener to execute the function hasChanged and finally, it executes it for the first time (this is going to allow us to execute a default route). Now, every time the location hash changes, the listener that we just created is executed. This function is executed only one time in the creation of Router .

. This function creates a listener to the event of window. First, it sets a callback to that listener to execute the function and finally, it executes it for the first time (this is going to allow us to execute a default route). Now, every time the location hash changes, the listener that we just created is executed. This function is executed only one time in the creation of . hasChanged . This function has two main responsibilities, both related to performing the correct Route load. If the window location changes then it is going to load the correct active Route and call another function to load its HTML, if the window location is empty, it is going to load the default Route . This function receives two params, one is the scope of the Router instance and the other is the routes.

. This function has two main responsibilities, both related to performing the correct load. If the window location changes then it is going to load the correct active and call another function to load its HTML, if the window location is empty, it is going to load the default . This function receives two params, one is the scope of the instance and the other is the routes. goToRoute . This function has the responsibility of getting and loading the correct HTML for the active route. It receives the HTML name that it has to load and finally perform a request to get it.

This is all we need to have a simple SPA implementation working.

Initialization of routes and Router

Finally, let’s see how we start the router in the app.js file.

This script is executing an init function that instantiates the Router and provides two Route s, setting home as the default one.

Implementation: GitHub.