DEV Community

loading...

Glued together my favorite libraries

Andras Bacsai
๐ŸŒ Trying to make the web a bit open-sourced with http://coollabs.io, currently working on http://coolify.io. ๐ŸSpaghetti coder @codesandbox
Originally published at andrasbacsai.com on ใƒป3 min read

If you like what I do, you can find me on Twitter and subscribe to my blog, where you can find more posts about my journey, coding in general and other topics!


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?

Most optimal framework (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.

Ingredients

Sapper

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.

SPA 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!

Svelte

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!

https://twitter.com/i/status/1337117225405313029

Routify

I like Routify. Simple (as everything in this list) and has a filesystem-based automated routing for the client.

Tailwind

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.

ES Modules

I like technologies that point to the future. ES modules are one of them, in my opinion. I used Svite ( Vite alternative, just for Svelte), which is awesome!

(I hope the creator does not abandon it after SvelteKit officially came out someday.)

Fastify

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.

One codebase

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:

GitHub logo andrasbacsai / svelte-fastify-starter

Svelte (with Svite), Tailwind, Routify and Fastify backend starter template.

Why?

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: https://codesandbox.io/s/svelte-fastify-starter-ku9d9

Try it locally:

Development: pnpm dev

Production: pnpm build & pnpm start

(Or you can use npm/yarn)

Includes:

  • 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.

+1

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)

Lesson learned

  • It doesn't matter if your application does not follow any overhyped techs. If a plain HTML/javascript file is enough for you to create a cool application, do it!
  • 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.

Discussion (0)