DEV Community

Making a Single Page App in ye good olde JS (ES6)

Rishav Sharan on October 11, 2018

Demo: https://src-brsetrrnrp.now.sh/ Repo: https://github.com/rishavs/vanillajs-spa Making a SPA (single page app) is all the rage these days. A...
Collapse
 
danielwahl profile image
Daniel Wahl

Really nice job and super clean code.

I've a question, I'm developing an App with Cordova and wanted to try out your method with routes.
But the hash routes aren't working on emulating ios, do you have ever tried this method with Cordova?
The webapp (testing in browser) is working fine.

Collapse
 
rishavs profile image
Rishav Sharan

Thanks for checking my stuff out.
I have never worked on Crodova, so I am not sure what might be the issue.

But maybe Cordova struggles with client side routing.
A quick search threw me here. Maybe that might help.
github.com/ReactTraining/react-rou...

Collapse
 
vsmash profile image
vsmash

Nice job!

Collapse
 
rishavs profile image
Rishav Sharan

Thanks! Glad you liked it.

Collapse
 
catinhocr profile image
Cato

I realize this might be a bit old now, but still awesome to read and helped me lots. Thanks Rishav.

How would one go about refreshing the view after an event occurs?
Say for example I have a list of items, each with it's own "Delete" button.
The button- event handler is placed in the after_render() section of the view/page. How can I access methods of my Class inside the event handler ? Or what would you "fire" or execute to get the class data to respond to that, update the array and remove it from the view?

Collapse
 
dancloudtopia profile image
DanS

Excellent article, very clean I like the way you gave some background info on thought processes during development.
Do you have any comments on the visibility of data ( variables, credentials like JWT ,or objects ) that were defined in one html template, but used in other template ?
Thanks
Dan

Collapse
 
yagobatsil profile image
yago batista da siva

Awesome blog post, loved it!

Collapse
 
ledahuerta profile image
LedaHuerta

Thank you, I am learning to program in js and this information has helped me a lot.

Collapse
 
rishavs profile image
Rishav Sharan

Glad to have been of help.

Collapse
 
kohld profile image
Dennes Kohl

Great article!
I really like the idea and the approach to use more plain JS again. Thanks for the inspiration. :-)

Will there be more of these articles from you?

Collapse
 
rishavs profile image
Rishav Sharan • Edited

Glad you liked it.
Not very sure on more articles. I dont have anything planned out right now. If and when inspiration strikes, I will write some more stuff.

Collapse
 
shreyash015 profile image
Shreyash Baba Payasam

Amazing article! great job, thank you! also I read "in ye good olde JS" in Andy Bernard's voice. :-|

Collapse
 
vitalcog profile image
Chad Windham

You sir, are a hero! I was literally thinking this morning that I need to figure out a SPA "router" using vanilla JS. Then blamo, right there in my feed was this. Brilliant!

Collapse
 
rishavs profile image
Rishav Sharan

Someone had asked about the VSCode plugin i used for the HTML pragma highlighting. I use "ES6 String HTML"

Collapse
 
peevi profile image
Jithin P V

Can you let me know, how to deploy the same onto a Apache server?

Collapse
 
rishavs profile image
Rishav Sharan

Sorry Jitin. No idea of using the Apache server. But in general if the apace server serves a specific folder (something like httaccess), you need to put everything in the src folder in my app (including the html and the JS files) in there.

Collapse
 
emeraldzephyr profile image
EmeraldZephyr

Thanks for this. I thought I was going to need to study a framework to convert my site to an SPA, now I don't! 😁

Collapse
 
omerbn profile image
omerbn

Awesome. thanks :)

Collapse
 
krisnaahroid profile image
ahroidlife

How to deploy? are you using pm2 to deploying your app?

Collapse
 
rishavs profile image
Rishav Sharan

its a pure JS SPA. so to deploy you will just put on a CDN like you would put any static resources. Your web server would serve a pretty much empty index.html when user navigates to your domain. The html file will then fetch the SPA from the CDN and render them.

You can use PM2 to run a node server to serve the html file. Or just use something like netlify/surge etc to get rid of all ops work

Collapse
 
krisnaahroid profile image
ahroidlife

how to deploy? are you using pm2 to deploying?

Collapse
 
rishavs profile image
Rishav Sharan

Any server will do. I am not planning to use pm2 for this at all. The whole plan behind the SPA is to serve it directly from a CDN like cloudflare.