What I built
Program for the People
Codr is an educational app built using SPA: https://nevolin.be/codr/
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
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
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).
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/
Top comments (2)
Very interesting! i like it
Nice we can import html files! Alpine js + this method little bit refined and we get a high performance no build tools framework.