My Evaluation of SvelteKit for Full-Stack Web App Development

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
  • SvelteKit

    The fastest way to build Svelte apps (by sveltejs)

    I tried the static adpater, but it still has issues as acknowledged here: https://github.com/sveltejs/kit/issues/1650

    In that thread, you can see some of the ugly workarounds people have to go through to make purely client-side apps: https://github.com/sveltejs/kit/issues/1650#issuecomment-984...

  • polka

    A micro web server so fast, it'll make you dance! :dancers:

    - once released and popular, they cease getting frequent updates

    Now, yes this is a generalization. It doesn't apply to all of their packages, and not at the same point in time. But there is a pattern there. Some quick diving into the author's Github account, and their more popular repos shows the pattern. It's also clear that this was a choice made by a Svelte contributor to use their own package for "official" support in Svelte Kit.

    When it comes to polka itself, I just don't get why a maturing framework like Svelte would choose something whose only real advantage lies in micro-benchmarking porn [1]. Speculation aside, I'm surprised the Svelte team didn't look at that choice through a lens of higher scrutiny. Koa would have been an infinitely better choice in my personal opinion, and there are several community-driven setups [2][3] for it.

    [1] https://github.com/lukeed/polka#benchmarks

    [2] https://github.com/kaladivo/svelte-kit-koa-boilerplate

    [3] https://blog.logrocket.com/sapper-svelte-tutorial-2021/

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • Svelte

    Cybernetically enhanced web apps

    I am using SvelteKit in "production" (smallish) for multiple projects. Aside from the small ecosystem (where in reality I am only really missing a UI lib other than IBM Carbon), Svelte has no error boundaries yet. If an error is not caught, the whole app crashes with no way to recover, or even show the user to refresh the tab.

    Here is a corresponding GitHub issue https://github.com/sveltejs/svelte/issues/1096

  • svelte-error-boundary

    Error Boundaries for Svelte

    I agree with you error boundaries are a huge omission. You can do basic error boundaries using one of these two packages:

    * https://github.com/crownframework/svelte-error-boundary

  • svelte-error-boundary

    Fix error boundary Svelte 3 problem to prevent full app crash :scream: (by denisstasyev)

    * https://github.com/denisstasyev/svelte-error-boundary

    They only protect from component initialization errors but it's better than nothing. I think Svelte v4 will have more coherent error handling.

  • svelte-it-will-scale

    Generate a chart showing svelte's overhead

    yes am aware, but also in any realistic scenario, code splitting comes in well before the crossover point where that even remotely comes into question. this has been independently verified twice now:

    https://twitter.com/sveltesociety/status/1301168598988107776...

    https://svelte-scaling.acmion.com/

    https://github.com/halfnelson/svelte-it-will-scale

    sveltekit has further opportunities for whole-app optimization but honestly given this research i lost interest bc its more than good enough

  • svelte-kit-koa-boilerplate

    This is a boilerplate for svelte-kit and koa.

    - once released and popular, they cease getting frequent updates

    Now, yes this is a generalization. It doesn't apply to all of their packages, and not at the same point in time. But there is a pattern there. Some quick diving into the author's Github account, and their more popular repos shows the pattern. It's also clear that this was a choice made by a Svelte contributor to use their own package for "official" support in Svelte Kit.

    When it comes to polka itself, I just don't get why a maturing framework like Svelte would choose something whose only real advantage lies in micro-benchmarking porn [1]. Speculation aside, I'm surprised the Svelte team didn't look at that choice through a lens of higher scrutiny. Koa would have been an infinitely better choice in my personal opinion, and there are several community-driven setups [2][3] for it.

    [1] https://github.com/lukeed/polka#benchmarks

    [2] https://github.com/kaladivo/svelte-kit-koa-boilerplate

    [3] https://blog.logrocket.com/sapper-svelte-tutorial-2021/

  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  • svelte-spa-router

    Router for SPAs using Svelte 3

    How does Routify compare with svelte-spa-router[1]? I really like svelte-spa-router for a simple SPA, though I think a lot of SPA routers don't always handle state well.

    [1] https://github.com/ItalyPaleAle/svelte-spa-router

  • sveltestrap

    Bootstrap 4 & 5 components for Svelte

    That's one of the issues with Svelte. It's a newcomer so the ecosystem is minuscule.

    Personally I'm happy using Bulma with Svelte. I find most UI libraries tend to add too much bloat so I'd rather have something that only adds configurable CSS and just add as much JS as I need/want.

    I used Vue+Vuetify some years ago. I wasn't very happy with it, but I agree Svelte needs something similar.

    There are a couple of projects out there that add Svelte components for Bootstrap, Material, or IBM Carbon you could check.

    https://sveltematerialui.com/

    https://github.com/bestguy/sveltestrap

    https://github.com/carbon-design-system/carbon-components-sv...

    There are also a couple of projects about headless (no CSS) components for Svelte although I only seem to be able to find this one (not public yet)

    https://svelteui.com/

  • svelte-material-ui

    Svelte Material UI Components

    That's one of the issues with Svelte. It's a newcomer so the ecosystem is minuscule.

    Personally I'm happy using Bulma with Svelte. I find most UI libraries tend to add too much bloat so I'd rather have something that only adds configurable CSS and just add as much JS as I need/want.

    I used Vue+Vuetify some years ago. I wasn't very happy with it, but I agree Svelte needs something similar.

    There are a couple of projects out there that add Svelte components for Bootstrap, Material, or IBM Carbon you could check.

    https://sveltematerialui.com/

    https://github.com/bestguy/sveltestrap

    https://github.com/carbon-design-system/carbon-components-sv...

    There are also a couple of projects about headless (no CSS) components for Svelte although I only seem to be able to find this one (not public yet)

    https://svelteui.com/

  • carbon-components-svelte

    Svelte implementation of the Carbon Design System

    That's one of the issues with Svelte. It's a newcomer so the ecosystem is minuscule.

    Personally I'm happy using Bulma with Svelte. I find most UI libraries tend to add too much bloat so I'd rather have something that only adds configurable CSS and just add as much JS as I need/want.

    I used Vue+Vuetify some years ago. I wasn't very happy with it, but I agree Svelte needs something similar.

    There are a couple of projects out there that add Svelte components for Bootstrap, Material, or IBM Carbon you could check.

    https://sveltematerialui.com/

    https://github.com/bestguy/sveltestrap

    https://github.com/carbon-design-system/carbon-components-sv...

    There are also a couple of projects about headless (no CSS) components for Svelte although I only seem to be able to find this one (not public yet)

    https://svelteui.com/

  • That's one of the issues with Svelte. It's a newcomer so the ecosystem is minuscule.

    Personally I'm happy using Bulma with Svelte. I find most UI libraries tend to add too much bloat so I'd rather have something that only adds configurable CSS and just add as much JS as I need/want.

    I used Vue+Vuetify some years ago. I wasn't very happy with it, but I agree Svelte needs something similar.

    There are a couple of projects out there that add Svelte components for Bootstrap, Material, or IBM Carbon you could check.

    https://sveltematerialui.com/

    https://github.com/bestguy/sveltestrap

    https://github.com/carbon-design-system/carbon-components-sv...

    There are also a couple of projects about headless (no CSS) components for Svelte although I only seem to be able to find this one (not public yet)

    https://svelteui.com/

  • Preact

    ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

    [2] "preact-compat adds somewhere around 2kb to your bundle size, but has the advantage of supporting the vast majority of existing React modules you might find on npm" https://preactjs.com/guide/v8/switching-to-preact/

  • headlessui

    Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

    I think GP meant components that require JS like data tables which TailwindUI doesn't solve.

    I guess something like Tailwind Headless (only available for React and Vue):

    https://headlessui.dev/

  • svelte-headlessui

    Unofficial Svelte port of the Headless UI component library

    I ported this library to Svelte recently: https://github.com/rgossiaux/svelte-headlessui

    As a side note, Tailwind UI does include some components that require JS--that's what the Headless UI library is for. But it's also true that it's not a comprehensive component library; still missing things like a combobox or a date picker.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts