SPA a Pure JS Framework for building Single Page Apps

Bootstrap your idea, mvp, prototype, app or website faster than before. SPA is a super lightweight framework for building Single Page Applications in pure JavaScript.

Codr built with SPA

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.

GitHub: https://github.com/healzer/SPA

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.

Demo site from GitHub

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 a managed cloud platform, unless you manage the (virtual) server yourself (with Nginx or Apache).

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

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/

Become a rockstar programmer and try to reach genius status on codr https://nevolin.be/codr/