I tried a lot - it not all - frameworks out there for React, Vue, and Svelte. Why? To find my niche framework. I would like to have the most optimal development and deployment experience while coding. I did not say perfect because there is no such framework. You need to sacrifice something in the name of something else. Or did I just created one, which is perfect for me?
- Lightning-fast startup of the development environment.
- Instant hot module replacement (HMR).
- API and frontend in the same codebase.
- Superfast backend.
- No SSR.
- Filesystem based routing on the client.
- ES modules.
- Be able to use Tailwind efficiently.
- Based on Svelte. (optional)
There is no such thing in the wild. So I started to glue one together. I do not call it a framework because gluing could be similarly done by my 4 years old son.
I like Sapper. Most of the requirements are met here (kind of), but I do not like SSR. I tried to work with it, even created a starter pack. It was easy and straightforward most of the time, especially in the beginning. But I recognized it could make things pretty complicated very quickly, and unfortunately, it's tough to use Sapper in SPA only mode.
I like SPA applications. A good product does not need to be over-optimized. If it's simple, works, and easy to be developed, it doesn't matter if it has a good SEO or any other benefits of SSR. SPA is cool!
I like Svelte. Fast, not too complex, and the outcome of my spaghetti code is small. After seeing a video on Twitter about its costs in Co2 emission to transfer unnecessary data over the wire is INSANE!
I like Routify. Simple (as everything in this list) and has a filesystem-based automated routing for the client.
I like Tailwind. I'm bad at design; I struggle a lot. But I still like to practice and sweat to create horizontally and vertically centered texts in CSS. With Tailwind, I feel I'm not alone. Something is on my side in this hell of a journey.
(I hope the creator does not abandon it after SvelteKit officially came out someday.)
I like Fastify. It's super-fast, has a great ecosystem, and despite its speed, it does not lack any features or has some penalty.
I like when the API and the frontend code is in one place. The development is such a relaxing feeling.
So I glued them together, and here is the outcome:
Svelte (with Svite), Tailwind, Routify and Fastify backend starter template.
I used Sapper a lot, but I realized that SSR makes things a bit complicated, and I would like to do things as simple as possible. To leverage this problem, I glued together the libraries I love into this starter pack.
Try it locally:
pnpm build & pnpm start
(Or you can use npm/yarn)
- Svelte (ESM builds with Svite - similar to Vite for Vue)
- Routify (client-side routing)
- TailwindCSS (obvious, I think)
- Fastify (API)
This example has a JWT based authentication, guarded endpoints in the backend and frontend, separated environment variables for each layer.
You can try it in Codesandbox (and even develop a full application in it!): https://codesandbox.io/s/svelte-fastify-starter-ku9d9
(The initial ES build takes a while, but after that, it's super fast)
- To get the most out of your development performance, use what you like.
- If you don't feel comfortable with a framework, experiment with things you like. You do not need to compromise.