DEV Community

Discussion on: Routing: I’m not smart enough for a SPA

Collapse
 
tigt profile image
Taylor Hunt

I got on-the-fly imports working well in Marko, since its Rollup plugin already has logic for server vs. client bundles. (I lied to @marko/rollup in just the right way so that it also made out a third, tree-shaken bundle that thought it was for the server, then I transpiled it for the SW environment.)

That repaint between pages is interesting if you still have it — Chrome was the last browser to remove that flicker when it shipped Paint Holding in 2019, I thought. When and where are you seeing it?

Collapse
 
jon49 profile image
Jon Nyman

Oh, and the on-the-fly imports (dynamic imports) I was talking about I was more talking about doing it in a service worker. Which isn't allowed in service workers yet - but I have created my own, but it is a bit of a pain to do :-) compared to just having it work out of the box.

Thread Thread
 
tigt profile image
Taylor Hunt

Yeah, I reused the Rollup ecosystem’s code for that, myself. Pretty odd that import still isn’t allowed in Service Workers, but at least importScripts() lets us fake it.

Thread Thread
 
jon49 profile image
Jon Nyman

Yeah, actually, I'm looking for specifically dynamic imports so I only need to load the code is only being used at the moment rather than having to load all the pages code at once. So this:

developer.mozilla.org/en-US/docs/W...

For regular imports they work with the latest Chrome as of earlier this year (if I remember right). But Firefox still doesn't have it.

But this discussion has been great. It's made me think of how I can simplify my offline app more using a truer MPA style coding.

Yes, I'm definitely looking forward to your next post! Thank you for putting all the time and effort into these posts!

Collapse
 
jon49 profile image
Jon Nyman

Yeah, I guess the repaint issue is because I created my own "spa" framework. Basically, it isn't SPA but kind of is. Since I have separate HTML pages cached with a service worker and then I have all the code on the front end (since I have the app as an offline first app). So, each time I go to a different page it has to load the data on the fly after changing the page. So, I have a list of my weight for the year with comments and such and when I go to that page it takes time to get all that data onto the page since it has to load the JS first before adding the dynamic data. If I did it from the service working the user wouldn't notice all that. I guess that is why SPAs do their own routing so it doesn't seem so janky. I don't really work with SPAs much since I'm more of a back end person but I imagine in a SPA they create the page first before moving over to the new page. Also, like you, I don't like the size of JS on the front end and frameworks seem to be pretty beefy and cause issues for the user - like you were mentioning. That is why I've been pushing for doing everything from the service worker. I was thinking of just loading all the code in the service worker and just streaming the HTML from there.

But there are also issues with service workers. Like, when using a service worker ideally you have the SHA unique characters appended to your file name. But that is hard to do without getting involved in the SPA world. So, tooling isn't really great when doing it this way. But maybe I'll pick it up again and try it again. I haven't been doing as much coding on the side as I have in the past as I've been trying to spend more time with the family before they leave the house :-). But I get some free time here and there.

Thread Thread
 
tigt profile image
Taylor Hunt

It’s very interesting that you and I seem to be converging on the same ideals, but from opposite directions. You might like the next post in this series for that especially.