Leaving Svelte behind immediately, I've started looking for vanilla approaches to replace Sapper and SvelteKit for my apps.
When it comes to web apps, some want to be loaded on page by page, some from that server via SSR and my typical app serve a seed page that fetches the rest from the backend. As long as you can get an initial page and show a loading screen of sort then you will always win the first impression user experience front. That is my goal.
The question is what is needed for that? Well, how do web apps work? You need a web server and you need a seed page. That seed page needs to deliver the router as quick as possible and the router can show a placeholder. At that point, you've won against any technique. No bundler or any other crap needed
The webserver could be NGINX to deliver an HTML page quickly for the initial, but you still need a web server that serves as the data delivery front aka JSON or whatever you want data from a backend. Better off leaving out NGINX from your app and left for the backend infrastructure layer.
Well, Fastify is really good and really fast. You could also pick a Rust web server now! Wow, flexibility! No more being stuck to React/Nuxt, Vue Framework, SvelteKit or Sapper's choices and really quick switch too.
You could leave your html, js, and other content into a public folder and a server folder where the app is run. In development mode, the server can fetch from public while in production you could direct nginx to fetch from that public folder.
Let's see what this would look like directory wise.
root: my_vanilla_app
-> public/
index.html
favicon.ico
index.js (would have been outputted from typescript.)
-> private/
-> -> index.{js|cjs|mjs} (Again, this could've been outputted from typescript)
-> -> api (self contained rust app)
-> -> config/
->-> controller/ (only for fastify)
->->-> hello_world.{js|cjs|mjs}
etc.
Ok, so we have a reasonable directory structure. What about the interaction?
index.html would immediately serve favicon, router lib and likely index.js.
index.js will inject settings into router. Router will bring in a placeholder which can then perform ajax to fetch latest blog posts from a url to the fastify/rust app, which can serve them in 10ms or less.
You could have a placeholder in index.html. A splash page could serve as a placeholder. You don't even need to wait for a router lib to be served before replacing it.
How much time do you reasonable believe this application would take to render the seed page? 75 ms or less. Much faster than Svelte or anything really.
Once the seed page is rendered and loaded in a router that has displayed a placeholder. That router can lazy load any page you want it to and deliver results in <100ms if your backend is fast.You might be wonder well, how about the dependencies you would need for each page. Let's be honest those can be lazy loaded in or pre-fetched during idle periods.
Web components is really good these days, so that will absolutely help in any proper router. I've found one router I like already and will see what I can do with it. If I can get something running today I'll open source the template that will contain Fastify serving it.
What is my motivation for this? For stability, performance and low maintenance purposes. Staying as close as possible to HTML, JS and CSS is the best you can do for high performance, flexibility, low maintenance, repeatable results and consistency without the overhead of retarded frameworks that keep changing their goals and keeping your maintenance levels high.
I postulate that browsers have advanced enough that these frameworks are for people stuck in the past who want to deal with bundling and all the other garbage that you don't need and break often due to dependency of dependencies changing and build system/bundler can't handle the changes anymore.
I just want to build a product that serves html/css/js, not deal with the loose interconnections between developers and a bundler that was chosen for me by said framework.