4 ms·

SvelteKit's routing pattern is anything but clean. It uses filesystem based routes where every file is called "+page.svelte" (or +page.server.js/ts for API only

SvelteKit's routing pattern is anything but clean. It uses filesystem based routes where every file is called "+page.svelte" (or +page.server.js/ts for API only routes). For anything but a demo app with just a couple of routes it's a headache to navigate. Edit: Another smell of the routing system to me is that you need to resort to complexity like this [1] to have anything but top down inheritance. I love Svelte btw and have used it in many projects. [1] https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-group https://kit.svelte.dev/docs/advanced-routing#advanced-layout...

9dev 3y ago
Having built a rather large app using SvelteKit, I found the routing scheme to make lots of sense actually. You always know what code is located where, concepts transfer everywhere consistently, and concerns are nicely separated.
- kevinak 3y ago
  This. It might look complicated at first sight, but once you actually use it you really appreciate the way it's structured.
  - pier25 3y ago
    Well yeah you can get used to anything. Doesn't mean it's a good idea to begin with.
- almostdigital 3y ago
  In theory it seems neat but in practice I'm here with 10 tabs all called "+page.svelte" or "+page.server.ts" and it completely breaks my workflow since I can't tell them apart or navigate with fuzzy name matching. How do you deal with that?
  - kevinak 3y ago
    Generally you should try to get away from clicking around on file tabs and use your command palette but one thing you can do, if you're using VS Code, is change the "Label format" to "short" in the settings.
    - xboxnolifes 3y ago
      Why should you get away from clicking tabs, apart from having to deal with this issue?
      - kevinak 3y ago
        Because it's much faster, goes for most navigation in code editors, try it! :)
    - almostdigital 3y ago
      I'm offended! I don't click around like some lowly peasant, I navigate by keyboard like God intended.
    - preommr 3y ago
      As I've grown older, I've seen lots of improvements to software usability - it warms my hear to see the attitude of yesteryear's "you're not using it right, consider changing your lifestyle" still alive and well.
  - 9dev 3y ago
    Try a JetBrains IDE - if two tabs with the same filename are open, it will automatically prepend the name of the containing folder (recursively up, until the names are different). I wouldn't know how to stay sane for the same reason otherwise.
  - arxpoetica 3y ago
    For anyone wishing for a VS Code fix, comment on this issue: https://github.com/microsoft/vscode/issues/41909#issuecomment-1199883529 https://github.com/microsoft/vscode/issues/41909#issuecommen...
    - pier25 3y ago
      It would be great if VSCode provided an API for the tab labels but the Svelte team really created the problem in the first place. This whole file-based routing wasn't a great idea to begin with, as a general solution to routing. It works (up to a point) for a static site generator, but most SSGs provide a permalink setting so there's an escape hatch. The whole thing gets even worse when you start introducing issues like having dozens if not hundreds of files with the same filename, weird characters in folder and file names, etc.
himujjal 3y ago
I agree with this comment. SvelteKit is unnecessarily complicated. The `+page.svelte` etc are just the start of it. Plus I can't use it with Go, PHP, Ruby, Rust etc when it comes to SSR (without running multiple servers and handling deployment nightmares). Something about this whole Node + SSR Front-end is smelly. (next, nuxt, solidstart) I love Svelte as a framework and a way of writing UI, but SvelteKit. Eh! Not so much. SvelteKit is too much complexity for no reason. Goes opposite of what Svelte was meant to be: Simple and intuitive.
- kevinak 3y ago
  Curious to hear more, what specifically is complicated about it? SvelteKit is a JavaScript framework, it makes sense that you can't use it with other languages. You can pair it with a backend of your choice of course, but to get the SSR benefits you do need to work within the framework. There are other ways of using Svelte with other languages, I would take a look at something like Inertia.js [0]. [0] https://inertiajs.com https://inertiajs.com
  - himujjal 3y ago
    Hey Kevin! First of all. I am a regular listener to your podcast! Love it! Now, I am not specifically targeting SvelteKit to be fair. But the whole host of meta-frameworks like NextJS, NuxtJS etc which Vercel is pushing. These frameworks in general are too much complexity added. SSR is hard and the best way to handle all of these is to not have a server layer at all. That is just abstract the rendering/routing part and leave the rest of the server stuffs to the user. I want to simply write my Fastify/Express/Go-gin/Django app. Then add SvelteKit as my front-end with SSR support. Right now, I first write SvelteKit and then think how am I going to integrate Express and Fastify to it (for a moment let's leave non-node solutions). Trust me. If you simply leave the server out of SK and generate a simple API abstraction like `res.send(renderSKPath('/users/:id', { serverData }))`. It would have done the job. I think its difficult to express what I want to say, but in short, remove the server and keep SK as a rendering layer only. P.S. I know that there is an express adapter for SK. But that is not the point of this comment at all.
pier25 3y ago
I completely agree. I've been using Svelte happily for years, but I won't be using SvelteKit. In part because of the routing but also because it doesn't really solve much in the backend. It's amazing that all the full stack frameworks (Next, Nuxt, SvelteKit, Remix, Astro, etc) are investing so much effort into reinvent the backend and after years they still don't provide even basic backend functionality. For example, out of the box, Fastify gives you validation, sessions, CORS, cache headers, etc. Features that you need in probably all backend projects. I started this repo to figure out how to integrate Svelte with Fastify using Vite. It has hot reload, partial hydration, etc. It's very quick and dirty code, but it works. https://github.com/PierBover/fastify-vite-svelte-template https://github.com/PierBover/fastify-vite-svelte-template
dncornholio 3y ago
It's only a headache if you make it one. With an open mind, it looks pretty neat to be honest. The top down inheritance doesn't look complex, just weird.

9dev 3y ago

Having built a rather large app using SvelteKit, I found the routing scheme to make lots of sense actually. You always know what code is located where, concepts transfer everywhere consistently, and concerns are nicely separated.

kevinak 3y ago
This. It might look complicated at first sight, but once you actually use it you really appreciate the way it's structured.
- pier25 3y ago
  Well yeah you can get used to anything. Doesn't mean it's a good idea to begin with.
almostdigital 3y ago
In theory it seems neat but in practice I'm here with 10 tabs all called "+page.svelte" or "+page.server.ts" and it completely breaks my workflow since I can't tell them apart or navigate with fuzzy name matching. How do you deal with that?
- kevinak 3y ago
  Generally you should try to get away from clicking around on file tabs and use your command palette but one thing you can do, if you're using VS Code, is change the "Label format" to "short" in the settings.
  - xboxnolifes 3y ago
    Why should you get away from clicking tabs, apart from having to deal with this issue?
    - kevinak 3y ago
      Because it's much faster, goes for most navigation in code editors, try it! :)
  - almostdigital 3y ago
    I'm offended! I don't click around like some lowly peasant, I navigate by keyboard like God intended.
  - preommr 3y ago
    As I've grown older, I've seen lots of improvements to software usability - it warms my hear to see the attitude of yesteryear's "you're not using it right, consider changing your lifestyle" still alive and well.
- 9dev 3y ago
  Try a JetBrains IDE - if two tabs with the same filename are open, it will automatically prepend the name of the containing folder (recursively up, until the names are different). I wouldn't know how to stay sane for the same reason otherwise.
- arxpoetica 3y ago
  For anyone wishing for a VS Code fix, comment on this issue: https://github.com/microsoft/vscode/issues/41909#issuecomment-1199883529 https://github.com/microsoft/vscode/issues/41909#issuecommen...
  - pier25 3y ago
    It would be great if VSCode provided an API for the tab labels but the Svelte team really created the problem in the first place. This whole file-based routing wasn't a great idea to begin with, as a general solution to routing. It works (up to a point) for a static site generator, but most SSGs provide a permalink setting so there's an escape hatch. The whole thing gets even worse when you start introducing issues like having dozens if not hundreds of files with the same filename, weird characters in folder and file names, etc.

himujjal 3y ago

I agree with this comment. SvelteKit is unnecessarily complicated. The `+page.svelte` etc are just the start of it. Plus I can't use it with Go, PHP, Ruby, Rust etc when it comes to SSR (without running multiple servers and handling deployment nightmares). Something about this whole Node + SSR Front-end is smelly. (next, nuxt, solidstart) I love Svelte as a framework and a way of writing UI, but SvelteKit. Eh! Not so much. SvelteKit is too much complexity for no reason. Goes opposite of what Svelte was meant to be: Simple and intuitive.

kevinak 3y ago
Curious to hear more, what specifically is complicated about it? SvelteKit is a JavaScript framework, it makes sense that you can't use it with other languages. You can pair it with a backend of your choice of course, but to get the SSR benefits you do need to work within the framework. There are other ways of using Svelte with other languages, I would take a look at something like Inertia.js [0]. [0] https://inertiajs.com https://inertiajs.com
- himujjal 3y ago
  Hey Kevin! First of all. I am a regular listener to your podcast! Love it! Now, I am not specifically targeting SvelteKit to be fair. But the whole host of meta-frameworks like NextJS, NuxtJS etc which Vercel is pushing. These frameworks in general are too much complexity added. SSR is hard and the best way to handle all of these is to not have a server layer at all. That is just abstract the rendering/routing part and leave the rest of the server stuffs to the user. I want to simply write my Fastify/Express/Go-gin/Django app. Then add SvelteKit as my front-end with SSR support. Right now, I first write SvelteKit and then think how am I going to integrate Express and Fastify to it (for a moment let's leave non-node solutions). Trust me. If you simply leave the server out of SK and generate a simple API abstraction like `res.send(renderSKPath('/users/:id', { serverData }))`. It would have done the job. I think its difficult to express what I want to say, but in short, remove the server and keep SK as a rendering layer only. P.S. I know that there is an express adapter for SK. But that is not the point of this comment at all.

pier25 3y ago

I completely agree. I've been using Svelte happily for years, but I won't be using SvelteKit. In part because of the routing but also because it doesn't really solve much in the backend. It's amazing that all the full stack frameworks (Next, Nuxt, SvelteKit, Remix, Astro, etc) are investing so much effort into reinvent the backend and after years they still don't provide even basic backend functionality. For example, out of the box, Fastify gives you validation, sessions, CORS, cache headers, etc. Features that you need in probably all backend projects. I started this repo to figure out how to integrate Svelte with Fastify using Vite. It has hot reload, partial hydration, etc. It's very quick and dirty code, but it works. https://github.com/PierBover/fastify-vite-svelte-template https://github.com/PierBover/fastify-vite-svelte-template

dncornholio 3y ago

It's only a headache if you make it one. With an open mind, it looks pretty neat to be honest. The top down inheritance doesn't look complex, just weird.