SPA: Pure JS Framework for Single Page Apps

#dohackathon #javascript #webdev

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

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).