SPA: Pure JS Framework for Single Page Apps
Tags: dohackathon, javascript, webdev
Published: 2021-01-07 15:30:09

## What I built
A super lightweight framework for building Single Page Applications in pure JavaScript. Bootstrap your idea, mvp, prototype, app or website faster than before.

### Category Submission: 
Program for the People

### App Link
https://nevolin.be/SPA/
or
https://spa-zfvf2.ondigitalocean.app/

Codr is an educational app built using SPA: https://nevolin.be/codr/

### Screenshots
![single page application javascript framework](https://dev-to-uploads.s3.amazonaws.com/i/qhodwrsiady1lyea9q51.png)

![single page application javascript framework](https://dev-to-uploads.s3.amazonaws.com/i/tlh1lv0rw3cri13efr4n.png)

### Description
A lot of developers dislike using complex, lumpy and slow dev frameworks like React, Vue and Angular.

**Why we bother developing Single Page Apps? Speed!** It's much better for user experience and easier to extend with advanced features such as selective caching and offline availability.

One of the main reasons for dev frameworks like React/Vue/Angular is that historically JS was not very modular. A lot of front-end JS code was contained in a single file and could grow very large, a pain in the ass for maintenance, development and debugging.

You can easily copy paste the `spa.js` into any project/template and you're set.

### Link to Source Code
https://github.com/healzer/SPA

### Permissive License
MIT

## Background
In recent years with the latest ES6 standard it is possible to build modular JS code, thanks to the import/export functionality which is now supported by all modern browsers. It's no longer necessary to use any of those complicated frameworks for building well designed apps. Using pure JavaScript is now faster and more efficient than ever before for development.

A final major reason many developers use over-complicated frameworks is for handling dynamic page navigations. This is something novice developers may have little knowledge of, but it's actually very easy.

### How I built it 
Building Single Page Apps does not require any fancy technology, you can use DigitalOcean's FREE plan to get started.

**There are two popular methods for navigating:**

**1. Hash Navigation** is the default and recommended method for building navigation in an SPA. By clicking a link with `href=#home` that `#home` is then also added to the URL address. A JavaScript event `hashchange` is emitted, which we can use for loading content dynamically.

**2. URL Navigation** is an alternative method that manipulates the URL address instead of the hash. We do this by capturing click events and preventing them from actually navigating, instead we use the `href=/contact` value for determining which content to load dynamically.

This method may be more desired for SEO purposes but it has a major downside. When you actually reload the page you get a 404 error because the path `/SPA/contact` does not actually exist on the server. The sole workaround for such errors is to add rewrite/redirection rules to your HTTP server, which may not be so trivial on DO's cloud platform, unless you manage the (virtual) server yourself (with Nginx or Apache).

### Additional Resources/Info
DO = DigitalOcean

If you've used our SPA framework, let us know and we will promote your site/app on our Github <3

My smart caching solution: https://dev.to/codr/smart-caching-with-service-workers-3g3j

Build Android and iOS apps as PWAs: https://web.dev/progressive-web-apps/