Single Page Application Frameworks are not magic

Greetings!!

Today, we are going to build our own awesome Single Page Application (SPA) framework (like angular, ember or react) from the scratch in 10 minutes. Feels complicated? Then you will be surprised.

So before continuing to the topic, I assume that you have fundamental knowledge about Modern Javascript (ES6), NodeJS, NPM and some basic knowledge about one SPA Framework.

Before started learning about SPA you might remember working with JQuery and Bootstrap. But none of these libraries need a node runtime to be installed. Just download and import! it worked.

So why SPA Frameworks needs a node runtime. Well! There are a few reasons which are watching files that you are editing to live reload your webpage, building the code, minifying the code, and provide a development server or simply a development environment.

So let’s get started building our framework,

Here is the link to the GitHub repository of the finished code https://github.com/jkasun/sample-spa-framework., you either code along with the article or simply clone this Github as you may prefer. But I strongly recommend you to code alone if you have enough time.

Create an empty folder and then initialize a node project by running

npm init

Then install express server using,

npm install -S express

Let’s get to the code and write our own development server.

Sidebar: Why we need a development server?

Well! The Simple answer is, as definition a Single Page Application has only one web page. Remember? When you build your angular, ember or react application you get a single html file named index.html which is that single page, and bunch of javascript files. So no matter what web url path you go (maybe it could be something like www.myspa.com/page1 or www.myspa.com/page2) the server will always send you the index.html

Create folders named server, app, a file named index.js inside the server folder, and a file named index.html inside the app folder. So your folder structure should look like this

Now let's write an express server app to serve that index.html no matter what request comes in.

server/index.js

app/index.html

So I’m calling my framework Jangular Jumber Jeact.

So for now, let’s install the `nodemon` module globally to live reload our app if we edit any file.

npm install -g nodemon

Then let's boot up our server by running,

nodemon server

So let’s open up our app on localhost:3000/blahblah, Note that no matter what path you enter the server will always send you the same page

Now, let's create a public folder inside the app folder and a javascript file called route.js which will do the routing and rendering. So your folder structure should look like this at this point

Previously, we configured our server to send index.html no matter what request comes in. But now, we have configure the public folder as a static server directory, in order to serve route.js and maybe other static assets files that you will need in the future(such as images, javascript libraries, etc).

So let’s configure that in server.js,

server/index.js

Then include the route.js file in your app, by adding it to the index.html. Remove the app name. Add an HTML element called app-root to render the templates into (app-root could be anything, you name it! this is your framework).

Then let's implement the routing code,

So what happens in the above code is,

We are getting the current path of the web application, for an example if the address is localhost:3000/page1 the path is /page1, if the address is localhost:3000/page2/id_1 the path is /page2/id_1 , and split path by forwarding slash character so we would get an array of ['', 'page2', 'id_1']

split the path localhost:3000/page1/id_1

Then the script is getting the relevant template from the templates object and append the template to the app-root element that we created before, Now open up your browser and go to localhost:3000/page1 and localhost:300/page2

Hooray!!! Now our single page application framework is ready. You can implement your own template engine like handlebars.

You are free to think of any templating technique and implement and also routing, how to pass data and parameters and etc. It’s up to you.

However, this is the core that every SPA Framework shares, while other implementations make them unique from each other.

Sidebar: Some developers has that misunderstand that SPA does’t contain any routes or paths like /page1 ,/page2 etc. By single page it doesn’t mean that you have only one uri to access. It means that routing will happen on the client side not the server side.

SPA loads the whole application at on the first load rather than loading it partially to path to path, which makes a SPA faster compared to a Server Side Rendered application after the initial load. But the SPA could lead to increased initial load time due to its default behavior. One of the solutions for that problem is to combine it with some server-side rendering capabilities. Angular use something called Angular universal to do this, you can read my article “Improve Performance of Angular Using Angular Universal” if you want to learn more.

So how that happens when we are routing through the paths,

The simple answer is no matter what path we request the server will only serve the index.html after the initial load every other javascript files which also contains the templates, are loaded and cached into the browser.

Thank you very much for spending your valuable time to read this article. ❤

This is a high-level implementation of a single page application, just to understand the concepts behind it. To move this to production you may have to do lots of implementations including code minifying, building, core development, two-way binding, advanced routing, etc.

So I am thankful for the hard-working development community of every SPA Framework for providing us that abstraction.

Thank you very much for reading.