Svelte 4 (opens in new tab)

JS frameworks are like coffee, some people like them milky and full of sugar, some people like them like them lean and black, some are obsessed with making the "worlds best coffee" at home every morning, and some drink whatever brown water comes out of a vending machine.

We all like our coffee different, just as we all have favourite features and designs of frameworks. There is no correct, or best, framework, only personal preference and what's good enough for the job in hand.

Svelte is a Flat White with locally roasted coffee beans from an independent coffee shop.

React is a Starbucks Vanilla Late.

Vue is a Starbucks Caramel Machiato.

Angular is the Vanilla Late from your staff canteen, it used to be a bit rough, but seems to be better in recent years.

Not using a framework, is carefully weighing out the "correct amount" of beans, grinding them by hand, tampering it with the "correct force", and then making the "perfect" espresso.

This is always a personal judgement, but here's my personal list:

- I find it so much easier to understand. I don't have to useState/useEffect/whatever, I just assign variables and the component re-renders the relevant parts whenever I assign a new value.

- Styling is "just" CSS. No messing around with CSS-in-JS libraries and their various ways of being invoked. The CSS is automatically scoped to your component without you having to think about it (though IMO there’s work to do there with CSS variables and the like)

- The end-user bundle is so much smaller. This doesn't matter so much if you're creating a giant web app (e.g. Gmail) but I often work on smaller sites and it's very gratifying for users to only have to download ~20KB of JS rather than the hundreds (if not megabytes) you'd get with React. Has a positive impact on page performance scores, SEO etc too.

Massive reduction in boilerplate. As someone who attempted to onboard onto both react and svelte for a couple days each, react continued to feel hyper unintuitive with a bunch of magic constructs. Svelte felt like I could guess what would work and it just did.

Caveat: since I went react -> svelte it's possible I was just warmed up to JS by that point

Less code as everyone else mentioned, single file components (CSS is inside your .svelte files too, and isolated automatically), and a general feeling of on railsness that React for me lacked.

State in Svelte goes in stores. State in react seems to go in one of eighteen different mechanisms, which all begin with a 45 minute video of the author’s opinions about the true nature of reactive programming, when all I want to do is store a string.

Most folks would probably say "it's faster" but I think the real upside of using Svelte is the DX. It's just massively simpler and way easier to be productive.

Svelte tries to improve upon the relatively complex/heavyweight runtime of something like React by shifting as much of that complexity to the build step as possible. It also takes a more "batteries-included" approach compared to React by including some opinionated features like state management, animation, transitions and the like.

I haven't dug too deeply into Svelte because last I checked it didn't play particularly nicely with TypeScript but this release may prompt me to give it another look.

The most important thing to know about Svelte is that it doesn't have a runtime. All the magic occurs in places that look magic, and all the magic happens at compile time; at runtime it's simply a library. By contrast, React's VDOM system not only adds significant cognitive complexity but performs terribly too.

As someone who came from a self-taught backend background (Python), Svelte is way easier to learn, read and write than React (to me) due to requiring was less boilerplate. The example in the “Developer Experience” section of this article was all I needed to see to ditch my attempts at learning React and go all-in on Svelte.

You get a legible stack trace that actually points to something looking very much like your code.

There's also stuff like generally fewer LoC, more incentive to use native APIs and rebuild times measured in hundreds of milliseconds, but that first thing is what got me sold on Svelte.

quick takes as a react person who crossed over

- https://www.swyx.io/svelte-why

- https://www.swyx.io/svelte-sites-react-apps

https://component-party.dev/ might help.

It’s cleaner and conceptually easier to work with than React & hooks, and tends to produce smaller bundles and faster apps.

It feels a lot more enjoyable and productive. The productivity flow is fantastic for me.

Because you can deliver a better product, faster, with Svelte. The total cost of development goes down, as the productivity is better, bugs per lines less, total lines of code less.

It's basically a different flavor of modern web app development. It's key difference is that it doesn't download a full JS library to the client. The saves some ms/s on initial load. For most applications, that is not really an issue but, of course, there are some scenarios that it suits.

You will write a fraction of the code and your apps will be considerably lighter.

> I keep hearing about Svelte's flavor of JS basically being its own language now and it not playing all that well with Typescript

it's a weird habit on HN to refer to random rumours that have discouraged you from trying something, and then explicitly not link to even the source of the random thing you're thinking of.

I would guess you're misremembering something about the *developers of Svelte* saying they didn't think Typescript was worth it for *developing libraries*, and so they were switching to using JSDoc annotations for developing Svelte, which has no impact at all on Typescript or Svelte or Svelte users using Typescript?

e.g. https://devclass.com/2023/05/11/typescript-is-not-worth-it-f...

anyway, Svelte is fairly similar to Vue, just a subjectively slightly nicer style. do both tutorials and see which you like I guess?

Vue 3 (with <script setup> is quite close to Svelte in terms of DX, but Svelte has the edge here. Svelte is so simple, elegant and concise.

The biggest advantage of Vue is the ecosystem. However, Svelte is catching up. Some interesting UI component libs have recently arisen, e.g. https://skeleton.dev.

Performance wise, both are super fast.

Make sure to check out Sveltekit, even for building pure SPAs. The routing and data loading are worth it alone.

The performance difference is huge. A few years ago I launched an interactive consumer app on very resource constrained devices that would have been impossible with React or Vue (I empirically tested both). Think dual or quad core 1Ghz arm processors with zero GPU acceleration running electron.

The only optimization I had to implement was virtualization when showing hundreds of off screen images (an optimization I would have had to implement regardless of framework).

> From what I remember they even once had a virtual DOM-replacing Ahead of Time compiler, but walked back on it for some reason.

nope, its still there, just is less complicated than you make it sound with those adjectives in front of "compiler"

in the days of svelte 3 vs vue 2, i'd say the authoring experience was a lot more straightforward as vue had constraints around being a drop in framework. but then vue 3 came with "script setup" and other svelte inspired improvements that brought it a lot closer to svelte. am a bit uncomfortable with the 2->3 churn in the vue ecosystem (https://twitter.com/swyx/status/1482778158537801728) but havent actually tested it out since

I have little experience with Vue but to me Vue is very similar to React.

What sold me on svelte is the fact that I learned like all of it in maybe 3 hours. I have tried to pick up React here and there and I get the fundamentals but I hate that you need an architecture framework, a router framework etc. Svelte has a standard way of doing that.

Writing Svelte, I actually had "fun" building stuff, I can't say the same thing about my React attempts.

Vue dropped "reactivity transform" but they are working on a new "Vapor Mode" which is inspired by SolidJS, i.e. not having a VDOM.

https://blog.vuejs.org/posts/2022-year-in-review

> especially since Vue already uses a "compiler informed virtual DOM"

Not diffing at all against a virtual DOM and instead executing the pre-compiled DOM manipulations is an order of magnitude better in terms of processing. It also avoids diffing entirely. At a casual glance, the compiler hints and other VDOM optimisations in Vue reduce but do not obviate this burden (e.g., don't re-render static nodes, flatten the DOM tree to avoid traversing) But as ever, it's best to measure these things and I can't seem to find any recent benchmarks between the two platforms, and any benchmark would vary wildly depending on use-case, and with the exigencies of real-world development.

I haven't worked with Svelte (but with Vue, so def biased) but my feeling is that where Vue really shines (and always have, compared to other frameworks) is it's data reactivity system, making data (including but not limited to) stores very nice to author.

The composability of Vue 3 data stores makes it imo really nice to work with for anything a little bit more complex, and I've yet to see anything as good.

Vue 3 is kind of dead. Almost no features in the last year. Look at the GitHub repo, little activity, mostly maintenance stuff.

I suspect author (Evan) lost interest, given the Vue 2/3 situation (similar to Python 2/3) and the lost battle against React.

Svelte is more like a compiler than a library. The code you ship is plain JavaScript without any svelte dependency. That’s why svelte has always been simple and fast.

Speaking about size reduction, I once had a client who want me to update his product as it became extremely slow and buggy. The product was an MS Word Add-In that was run on an MS Surface which takes shots using webcam and insert them into the active document, it was built in .Net and the previous developer used, as I recall, OpenCV library to take the shots. The installation binary was around 300MB! And, to add insult to injury, both x86 & x64 of OpenCV were included in binary which made the final binary more than 600MB. I then used a tiny lib in C# to take webcam shots and rebuild the entire solution from scratch which generated a binary of around 1MB. The client had some concerns and suspicions about my delivery but once he tried it in a clean Surface, he realized what I did. It was like magic for him but not for me. I was happy because I made him happy :)

I remember when I was talking about some code my team wrote once and we'd managed to get an operation down from 6 hours to like 5 minutes.

Another manager said to me (fairly with hindsight) "If you get something down from two hours to one hour, that's an opimisation. Going from 6 hours to 5 minutes means it just wasn't finished."

I wonder how much of that came from this TS to JSDoc change Rich Harris talked about here: https://news.ycombinator.com/item?id=35892250

> I _would_ say that this will result in no changes that are observable to users of the framework, but that's not quite true — it will result in smaller packages (no need to ship giant sourcemaps etc), and you'll be able to e.g. debug the framework by cmd-clicking on functions you import from `svelte` and its subpackages (instead of taking you to an unhelpful type declaration, it will take you to the actual source, which you'll be able to edit right inside `node_modules` to see changes happen).

Let's hope all baggage was not offloaded to some extra dependency ;) In all seriousness I would like to see more packages competing to reduce size and dependencies count to absolute minimum.

I'm used to Svelte, and I remember last year when I tried to install a basic NextJS starter template (create-nextjs-app) I had to wait a minute or so for all the npm dependencies to install. I then checked my project folder and it was 600MB....mindblowingly bloated.

At this rate Svelte 5 is going to have to be renamed Anorexic!

I hadn't built a proper web app in nearly 10 years until recently. I did do some experiments with React/Redux a while back, and some Angular. While both made logical sense, I found RR quite confusing and Angular very heavyweight.

I tried SvelteKit 2 weeks ago after working through learn.svelte.dev and it immediately appealed to me.

Starting with one file in a route that holds JS, HTML and CSS was great. Breaking it up into components as I went along was natural. I think TailwindCSS helped here too, because I barely had to do any CSS work and could focus on JS and HTML.

It took me a while to understand the value of stores and where to use them, but then I hit upon a use case (big complicated multiple nested tree of mutable data).

After a few refactorings I had a very nice compact and easy to understand solution - nothing like what I experienced with RR and Angular.

I'm a big fan of svelte vs. other frameworks. The closeness to vanilla js and natural coexistence with html+css makes it so smooth to work with and you feel productive right away. Recently built this with it: https://meoweler.com

At least for small projects like this, it's perfect. For something larger/complex I'd be a bit more weary.

I feel like React is more complicated these days for little gain. I've worked in Knockout.js, Aurelia, Svelte, Vue 2, Vue 3, and now React.js. To me, React.js was more complicated to learn than almost all of them (Knockout.js is older so that felt more complicated to me). My favorite was either Vue 2 or Svelte - they're just simple to learn.

In my opinion I feel like React.js was ahead of its time, but now we're seeing some competitors achieve the same (or better results in terms of benchmarks) with simpler approaches.

Keep in mind these are just opinions, and I'm only about a month into React in a massive web application. That said, it took me like a literal day to learn Vue 2 because it was mostly just like native web development anyways.

I really do like TSX (react + typescript) for the exact things: Functional Components & Hooks - which are basically functional (albeit impure) building blocks for UI things and interactions. Sure, there goes on a lot behind the scenes and so on, but these two things is for me like "perfect" for composing UIs out of reusable building blocks.

But I really hate how react does not have a "blessed"/"official" router or state management, and a lot of "innovation" in this space simply looks like fashion waves nowadays, often reinventing the wheel, and are getting unpopular again over time.

I personally do use Meteor again these days to have real fullstack stuff easily, which has built-in state management (client-only collections work extremely well for state) when things become more complex than a few useState things. Also SSR "just works" with this, since a useTracker (from meteor) is executed during SSR cycle (as opposed to useEffect API calls), including rehydration with a fast-render package.

This absolutely is crucial for my projects, or else stuff like proper SEO is simply a pain in the ass. I would even pay money for react to have kind of renderToString on the server that simply BLOCKS (or awaits) during SSR so that the initial HTML contains fetched data. The discussion about react server components at this point is just comically absurd for me, as if they really want to make the simple SSR requirement as complex as possible for no reason, other than maybe force users into Nextjs so they can make more business from magically working hosting.

Svelte is a better experience IMO. Faster and doesn't require manual hacks to gain a 0.005% speed improvement.

you can download a html page from some website, rename it to `.svelte` and it will mostly work just fine with some minor modifications like remove the html wrapper tag and rename `<head>` to `<svelte:head>`.

I don't think the same thing apply for any other popular frontend frameworks.

I love Svelte because prototyping a new feature in it is really really trivial, even with keyboard interactions and animation effects.

I haven't used it as much as I used react based frameworks, or angular, but the little I've used it I really like the development experience. Plus the payload sent to the end user are much smaller.

Svelte isn't a subset of js/html/css, it just uses them. Svelte does support typescript as well.

Not sure about it being a superset, my understanding is that react is a renderer, whereas svelte is a compiler, basically removing unused code from its std lib, and even converting some code to native JS code. It tries to work with the DOM not around it.

SolidJS is the one I am really excited about moreso though, since it uses JSX and works even moreso with the DOM.

I hear you, but you might be projecting a bit. FTA:

> "Svelte 3 was released more than four years ago! In JavaScript-framework-time, that's eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas."

This seems eminently reasonable to me.

Did you read the article? Svelte 4 is mostly a maintenance release. It is largely backwards compatible with Svelte 3 code.

read TFA:

> "Svelte 3 was released more than four years ago... Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas."

Major Changes breaking: Minimum supported Node version is now Node 16 (#8566)

breaking: Minimum supported webpack version is now webpack 5 (#8515)

breaking: Bundlers must specify the browser condition when building a frontend bundle for the browser (#8516)

breaking: Minimum supported vite-plugin-svelte version is now 2.4.1. SvelteKit users can upgrade to 1.20.0 or newer to ensure a compatible version ([#8516] (#8516))

breaking: Minimum supported rollup-plugin-svelte version is now 7.1.5 (198dbcf)

breaking: Minimum supported svelte-loader is now 3.1.8 (198dbcf)

breaking: Minimum supported TypeScript version is now TypeScript 5 (it will likely work with lower versions, but we make no guarantees about that) ([#8488] (#8488))

breaking: Remove svelte/register hook, CJS runtime version and CJS compiler output (#8613)

breaking: Stricter types for createEventDispatcher (see PR for migration instructions) (#7224)

breaking: Stricter types for Action and ActionReturn (see PR for migration instructions) (#7442)

breaking: Stricter types for onMount - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions (see PR for migration instructions) (#8136)

breaking: Overhaul and drastically improve creating custom elements with Svelte (see PR for list of changes and migration instructions) ([#8457](https://github. com//pull/8457))

breaking: Deprecate SvelteComponentTyped in favor of SvelteComponent (#8512)

breaking: Make transitions local by default to prevent confusion around page navigations (#6686)

breaking: Error on falsy values instead of stores passed to derived (#7947)

breaking: Custom store implementers now need to pass an update function additionally to the set function ([#6750](https://github.com/sveltejs/svelte/pull/ 6750))

breaking: Do not expose default slot bindings to named slots and vice versa (#6049)

breaking: Change order in which preprocessors are applied (#8618)

breaking: The runtime now makes use of classList.toggle(name, boolean) which does not work in very old browsers ([#8629](https://github.com/sveltejs/svelte/ pull/8629))

breaking: apply inert to outroing elements (#8627)

breaking: use CustomEvent constructor instead of deprecated createEvent method (#8775)

These are just catch up releases, nothing seriously breaking.

to give you perspective, Nodejs went from v10 to v20 in the same time frame.

I understand this thought for external dependencies, but dependencies also includes internal ones, which I don't see a reason to reduce. Modularity and re-usability of individual pieces of code are a good sign for me.

Should just bundle the npm module to a single file with esbuild before publishing it.

The breaking changes aren't really gamechanging stuff, just cleaning up baggage in preparation for Svelte 4.x and Svelte 5. The course would still be fully applicable

I took the course when he did it live. There is lots of good stuff in there. The meat of the course was mostly going through learn.svelte.dev. One day was on Svelte and one day was on Sveltekit. The most interesting part was the end of day sessions where you actually build apps.

I don't think you learn anything that wouldn't apply to Svelte 4. It's intended as a smaller update to prep them for bigger changes coming in Svelte 5.

It does say "Svelte 3+" on the page, although I don't know if the plus was there before.

It sounds like you have a misunderstanding about SvelteKit. It does have a client side router and you can use SvelteKit as a pure SPA today very easily, all you need is to set `export const ssr = false;` and `export const prerender = false;` in `src/routes/+layout.ts`. Then export with `adapter-static` and you're done.

Swing by the official Svelte Discord, we're happy to discuss your questions! https://discord.com/invite/svelte

You can use SvelteKit without SSR; it can be compiled for many backends, including static files.

There are pure SPA svelte routers: https://github.com/ItalyPaleAle/svelte-spa-router

I just rebuilt a web app in Vue (and Vite), and first-class Single File Components are the dream. Is there anything that even approaches that simply joyful DX?

Your tolerance for JSX is too high.

> What binds us to a virtual DOM?

The virtual DOM was created to solve browser performance issues with the actual DOM. This may not be relevant anymore, but that's why it was made.

I emailed the mods. I don't think they get notified for @'s.

This was a great blog post! Thank you for sharing your journey.

Happy user of your app. Works great. Thanks for documenting all the process. It’s really insightful

fun/weird fact - the major release seems to have caused ~9m downloads happening on npm, catapulting Svelte to technically the top of the charts https://twitter.com/SvelteSociety/status/1671923994671603713...

They seem to be doing something of a tick-tock update approach. Not sure if it’s planned or by accident. V2 was a small change, V3 was a big change, V4 is small, and as far as I understand they’re already working on something that might end up V5.

Svelte 5 is speculated to release as early as this year (2023)! Svelte 4 was mainly a maintenance release; updated dependencies, TS to JSDoc migration and more, in preparation for the development of Svelte 5. The reason Svelte 4 is a major version release is due to upgrading some dependencies like the Nodejs version making it a breaking change.

We did a pretty big one, integrated with a python/gtk app [yikes]. Anyways, svelte is a joy to work with, also on the note of libraries, svelte's community is smaller but I found by far my favourite component system I've ever used - https://carbon-components-svelte.onrender.com/.. surprising coming from IBM, but hey, I'll take it.

But in general electron was a pain, slow builds - had an adhoc solution for the svelte dev server, but its not great.

I can't help you with a docker setup, but if I'd highly recommend Vite for standing up a working Svelte dev environment (or Sveltekit, or React, or Next for that matter): https://vitejs.dev/guide/

You'll be up and running in seconds. This is all you need to know:

    # npm 6.x
    npm create vite@latest my-svelte-app --template svelte

    # npm 7+, extra double-dash is needed:
    npm create vite@latest my-svelte-app -- --template svelte

(if you're looking for sveltekit it's the same command, you'll just select sveltekit in the prompt)

It's just a frontend framework for building fast, interactive frontends.

If you're interested in seeing what all the fuss is about and have 5-10 minutes to spare, you could start https://svelte.dev/tutorial/basics and get a pretty good sense of it in less than 10 minutes

As far as I'm aware, SvelteKit has fully supported Deno since 1.17.0: https://github.com/sveltejs/kit/blob/master/packages/kit/CHA...

TailwindCSS can do it

I don't think it would be a bad choice for it, there is even Svelvet which I think could be a good starting point.

I wouldn’t be surprised if this is because of the improved support[1] for writing types as JSDoc comments in TypeScript 5.0

[1] https://devblogs.microsoft.com/typescript/announcing-typescr...

Why it's superior? Because it's faster?

I believe Windmill is all svelte: https://app.windmill.dev/

As well as Bloomberg and the NYT sites, and Brave search.

I'm sure there are more, but for some reason people aren't talking about it a ton yet, and it's definitely not as ubiquitous as React