DEV Community

Build a Single Page Application (SPA) Site With Vanilla.js

Jeremy Likness ⚡️ on February 26, 2020

Modern JavaScript frameworks exist to address deficiencies in the capabilities provided out of the box by HTML5, JavaScript, CSS, and WebAssembly. ...
Collapse
 
isaachagoel profile image
Isaac Hagoel

Awesome stuff. The way you've approached aspects of the app gave me some food for thought.

It is great when one reaches a level in which using a framework or a library is a choice rather than a necessity and that if/ when using a framework or a library one understands what they must be doing under the hood.
IMHO, this is the only cure for the impostor syndrome many devs complain about.

Collapse
 
jfideler profile image
jfideler

I haven't dug in too much yet, but I will say as loud as I can:

I CLONED YOUR REPO, STARTED A PYTHON SERVER AND HAD IT RUNNING WITH NO ERRORS WITHIN 10 SECONDS!! HOW OFTEN DOES THAT HAPPEN?

It's that clean and simple. If you're saying it does everything the big frameworks (Angular, React, etc.) do, I think you may be on to something here.

Collapse
 
smalluban profile image
Dominik Lubański

The latest stable version of JavaScript (ECMAScript® 2015)

It's a detail, but I think worth to fix ;) The latest stable version is available on this URL: ecma-international.org/ecma-262/ and it is the ECMA-262, 10th edition, June 2019 ECMAScript® 2019.

Collapse
 
eri7775 profile image
EV

Thank you @jeremylikness for this great post. I have one question about bundling and minification or js and html files. Is it possible with this approach to bundle everything together? While the app loads very fast, I see that it makes a lot of network connections. It would be beneficial to know for for apps of a greater size we can use bundling and minification for greater performance. Thank you.

Collapse
 
jeremylikness profile image
Jeremy Likness ⚡️

I would just be careful about performance for the sake of performance. If you are talking 300ms of difference, that is something tangible and observable in the UI. I find too often people want to makes things smaller/faster "just because" and end up investing time and energy into optimizations without empirical evidence they are needed. Having said that, WebPack or other bundlers can handle Vanilla.js just fine!

Collapse
 
vbilopav profile image
vbilopav

Do you have any idea how to implement hash-less routing on the client? I've tried and I failed.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

I have my successful solution here. Might write an article later.

GitHub logo patarapolw / minimal-rollup-ts-pug-sass-template

Rollup + TypeScript + Pug + SASS template with no plan for JavaScript frameworks, whatsoever

In short, more than history.pushState, you also need window.dispatchEvent(new PopStateEvent('popstate', { state: { to } })); if you don't have history.go.

Now, you can listen to popstate events.

Collapse
 
joeyguerra profile image
Joey Guerra

Do you mean with window.history? (developer.mozilla.org/en-US/docs/W...)

Collapse
 
vbilopav profile image
vbilopav

Yes, probably by manipulating window history

Collapse
 
jeremylikness profile image
Jeremy Likness ⚡️

Good question! I'll explore that. There are libraries that handle it but I will look into a pure source solution.

Collapse
 
puukallistaja profile image
Puukallistaja • Edited

Great article. Understanding how things work is essential. Here is github perspective about using vanilla js in their front-end.

"The intent of this project is to show what is possible with purely modern JavaScript."

These sentences and their cousins ('You might not need jQ') make me cringe a little. Everything is possible to write in vanilla, because everything IS written in vanilla. It just depends on how much of the bicycle developer intends to re-invent.

Collapse
 
jeremylikness profile image
Jeremy Likness ⚡️

Nice article. Thanks for linking it.

Can't speak to your cringe but your summary certainly captures the point of my article.

Collapse
 
mauromattos00 profile image
Mauro Mattos

This is really cool! Thank you! 🙌