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....
For further actions, you may consider blocking this person and/or reporting abuse
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.
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...
Nice job!
Thanks! Glad you liked it.
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?
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
Awesome blog post, loved it!
Thank you, I am learning to program in js and this information has helped me a lot.
Glad to have been of help.
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?
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.
Amazing article! great job, thank you! also I read "in ye good olde JS" in Andy Bernard's voice. :-|
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!
Someone had asked about the VSCode plugin i used for the HTML pragma highlighting. I use "ES6 String HTML"
Can you let me know, how to deploy the same onto a Apache server?
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.
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! 😁
Awesome. thanks :)
How to deploy? are you using pm2 to deploying your app?
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
how to deploy? are you using pm2 to deploying?
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.