DEV Community

jules manson
jules manson

Posted on

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

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.

Top comments (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

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 πŸ˜‰