DEV Community

loading...

Need help finding a very basic vanilla Javascript SPA router tutorial or source code

jules manson
Mechanical engineer who dabbles with Vanilla Javscript and web development as a hobbby. I don't use any libraries or frameworks as they take the fun out creating your own solutions.
・1 min read

I am coding a very simple single-page-app (actually just a website with one page) that is responsive to all screen sizes. It won't need to be a Swiss Army Knife like most libraries or apps try to be. I will be using no libraries/frameworks/tools other than Autoprefixer, Normalize, Ionic Icons, Font Awesome, Google Fonts, and other minimal use of miscellaneous libraries or tools.

Yes you heard it right. There will be no Node or Grunt or React or Vue or Backbone, and certainly no jQuery (goes against every fiber in my body). I am well aware that building even the simplest SPA can be a very daunting challenge but my app will only be a very elementary personal web page to showcase my online portfolio (mechanical engineering) of information about me and projects I have worked on as well as javascript calculators I am developing for solving problems in engineering.

I will still follow best practices such as accessibility, linting, minimizing, prefixing, tree shaking, W3C and ECMA standards, and compacting all source code but I won't Babel because that is not necessary for my intended purpose. I have the HTML, CSS, Javascript, DOM, BOM, JSON, and AJAX pretty much figured out. It's just the router that I really need help with. I really don't know where to start. A good tutorial, online book, books for purchase, or complete source code in vanilla Javascript would be very helpful. Please no jQuery.

Thank you for your time.

Discussion (4)

Collapse
mazentouati profile image
Mazen Touati • Edited

I think History API is what you are looking for, good luck.

Collapse
julesmanson profile image
jules manson Author

Yeah but that is not a router. A router makes use of history in the BOM but the BOM isn't a controller which is what a router essentially needs to be. Thanks anyway.

Collapse
vbilopav profile image
vbilopav
Collapse
kodnificent profile image
Victor Mbamara 🇳🇬 • Edited

dev.to/kodnificent/how-to-build-a-...

Better late than never 😉