8 ms·

Svelte: $derived can now be overwritten

51 points by jedeusus 2y ago

arcanemachiner 2y ago
As someone who has not used Svelte 5: What is the significance of his change?
- braebo 2y ago
  https://github.com/sveltejs/cli/issues/487#issuecomment-2743253910 https://github.com/sveltejs/cli/issues/487#issuecomment-2743...
  - deleted 2y ago
    [deleted]
  - OJFord 2y ago
    And for catching up on what a 'rune' is.. that's the `$derived` and `$effect` there, basically $-prefixed built-in things? Has that entirely replaced `$:` or is it as well as? Svelte seems to have got more complicated since I last used it!
    - tiltowait 2y ago
      Honestly, it's simpler than it was. There were many cases in which `$:` wouldn't work the way you might expect; meanwhile, $derived et all seem to always work without a hitch. It definitely looks less elegant, but I like it much more. https://svelte.dev/blog/runes https://svelte.dev/blog/runes
- m00dy 2y ago
  before this change, derived values were readonly (it makes sense because, if you change the derived value, what's going to happen to the underlying value ?) but now they are writable.
yewenjie 2y ago
People who have migrated a large enough production codebase to Svelte 5, what's your devex like?
- pinoy420 2y ago
  [dead]
- dvrp 2y ago
  pretty good. some people in my team don’t like svelte magic and wish we were using react but others say, and i quote, “damn this is clean” or “almost effortless it just works” and i’ve seen again and again engineers ramp up pretty fast compared to my Knockout, Angular, or React times… Pretty happy! Just wished they didn’t change their “magic” so often, but it’s the price to pay for innovation—if we can even call frontend development that, which I think we should but many frontend haters around here
  - pier25 2y ago
    I'm guessing Svelte 5 will last many years. Maybe they'll release v6 to drop old stuff but I don't think the runes paradigm will change any time soon. Plus they need to invest some serious work onto SvelteKit...
- snide 2y ago
  I'm almost finished with a large, complex app written with Svelte 5, web sockets and Threlte (Three JS) [0]. Previously, I'd written React for about a decade, mostly on the UI side of things. I vastly prefer Svelte, because of how clean the code feels. There's only one component per file, and the syntax looks and writes deceptively like vanilla JS and HTML. There's a bit of mind-warp when you realize Svelte doesn't want you passing components with props as props into another component. Svelte gives you "Snippets" instead, which work for some reusability, but are limited. It sort of forces simplicity on you by design, which I like. Most of React's deep nesting and state management doesn't exist in Svelte and is replaced with simple, better primitives. The bigger gain though for me was Svelte(kit) vs. Next JS. It's very clear what is on the server and what is on the client, and there's none of that "use client" garbage with silly magic exports for Next JS things. The docs are great. Svelte's biggest disadvantage is that the UI library ecosystem isn't as large. For me that wasn't as big of an issue because it was my expertise, but everyone else looking for a drop in UI library will find the Svelte versions a little worse than their React counterparts. Because svelte is compiled, it also is by default very snappy. I think choosing Svelte would likely give most devs a speed boost vs. the spinner soup that I've seen most React projects become. A lot of that is going to be in the skill of the programmer, but I love how fast my app is. [0]: https://bsky.app/profile/davesnider.com/post/3lkvum6xtjs2e https://bsky.app/profile/davesnider.com/post/3lkvum6xtjs2e
benatkin 2y ago
Wow, the optimistic UI example is so simple: https://svelte.dev/docs/svelte/$derived#Overriding-derived-values https://svelte.dev/docs/svelte/$derived#Overriding-derived-v... I wonder what Ryan Carniato, the author of Solid, thinks of it.
- mightyham 2y ago
  Implementing a settable derived primitive like that is already possible in SolidJS userspace. You can roll your own or simply use https://primitives.solidjs.community/package/memo#createwritablememo https://primitives.solidjs.community/package/memo#createwrit....
- eyelidlessness 2y ago
  He’s been discussing writable memos for Solid 2.0 off and on for a bit. While the other response is right that you can roll your own, it seems pretty likely this will be a first class thing in Solid too.
deleted 2y ago
[deleted]
joseneca 2y ago
Agh, I understand why runes were implemented, but I still can't get myself to like them. It feels like Runes take away from what made Svelte Svelte (the simple, concise syntax), and changes like this seem like slow concessions back in that direction anyway.
- impulser_ 2y ago
  You just have to build a big project with Svelte 5 and you will come to like them. A lot of magic is okay for simple application, but when you want to build anything that scales Svelte before runes was just horrible. With Svelte 5 and Runes you can look at any component and instantly know what it does. You couldn't do that with Svelte 4 unless you wrote the whole code yourself.
  - pier25 2y ago
    I agree. I ported a non trivial project last year from 4 to 5 and runes are a game changer.
  - afavour 2y ago
    I think that's actually the core of the problem. It's the right choice for big projects. But Svelte was an absolute joy to use when brewing up a small or medium size project that you want to just work first time. Runes are the right choice for the library, but there is still a loss there.
    - biker142541 2y ago
      Not sure I agree. I’ve built numerous small projects in Svelte 3 & 4, sharing that same joy many of us had! Stores were generally amazing. I was highly skeptical of runes upon the original announcement and very cursory usage during beta phase. When I finally got to porting a couple simple projects, I shrugged “this isn’t too bad, but what’s all the fuss?”. I ported a mid size project and it really clicked. Then I went to build a brand new small project, and I found myself in love with runes. Having spent the time to get under the hood (especially using them as classes), being able to leverage them during the design phase really sped me up and facilitated cleaner/better state management.
randysalami 2y ago
I’m currently building the back-end for my startup in C# using EventStoreDB and CQRS. I have an initial front-end application written in Svelte from two years ago as a PoC. It was a treat writing and designing it and I can’t wait to do a second pass with all these awesome Svelte updates!
_benton 2y ago
My experience with using Svelte 5 in production the last few months is that while runes are an upgrade to the magic of previous Svelte versions, it's still too much magic to easily reason about complicated state. This seems like it just adds to the mental overhead. Harris says it's "sacrificing a little bit of purity in service of pragmatic goals" but I don't find it very pragmatic to be debugging glitches, lost reactivity etc which I find myself doing exponentially more as our project grows. The compiler definitely makes simple code snippets look pretty but there was a reason the magic syntax didn't find itself in Vue[1], which in my limited experience has a much more intuitive reactivity model. 1: https://news.ycombinator.com/item?id=37592471 https://news.ycombinator.com/item?id=37592471
orefalo 2y ago
I love runes, I love svelte 5, I love sveltekit. Together, they offer a seamless entry into development, allowing you to swiftly grasp concepts akin to JS/HTML. Other options require a significant learning effort. Wish it came earlier...
hbbio 2y ago
Since Svelte 5 was announced, we began using our own library for state management as we could not fully understand the semantics and were afraid of potential changes. If you're curious, here it is: https://github.com/okcontract/cells https://github.com/okcontract/cells It is compatible with both Svelte 4/5 and more importantly pure TS libraries.

51 points by jedeusus 2y ago

arcanemachiner 2y ago

As someone who has not used Svelte 5: What is the significance of his change?

braebo 2y ago
https://github.com/sveltejs/cli/issues/487#issuecomment-2743253910 https://github.com/sveltejs/cli/issues/487#issuecomment-2743...
- deleted 2y ago
  [deleted]
- OJFord 2y ago
  And for catching up on what a 'rune' is.. that's the `$derived` and `$effect` there, basically $-prefixed built-in things? Has that entirely replaced `$:` or is it as well as? Svelte seems to have got more complicated since I last used it!
  - tiltowait 2y ago
    Honestly, it's simpler than it was. There were many cases in which `$:` wouldn't work the way you might expect; meanwhile, $derived et all seem to always work without a hitch. It definitely looks less elegant, but I like it much more. https://svelte.dev/blog/runes https://svelte.dev/blog/runes
m00dy 2y ago
before this change, derived values were readonly (it makes sense because, if you change the derived value, what's going to happen to the underlying value ?) but now they are writable.

yewenjie 2y ago

People who have migrated a large enough production codebase to Svelte 5, what's your devex like?

pinoy420 2y ago
[dead]
dvrp 2y ago
pretty good. some people in my team don’t like svelte magic and wish we were using react but others say, and i quote, “damn this is clean” or “almost effortless it just works” and i’ve seen again and again engineers ramp up pretty fast compared to my Knockout, Angular, or React times… Pretty happy! Just wished they didn’t change their “magic” so often, but it’s the price to pay for innovation—if we can even call frontend development that, which I think we should but many frontend haters around here
- pier25 2y ago
  I'm guessing Svelte 5 will last many years. Maybe they'll release v6 to drop old stuff but I don't think the runes paradigm will change any time soon. Plus they need to invest some serious work onto SvelteKit...
snide 2y ago
I'm almost finished with a large, complex app written with Svelte 5, web sockets and Threlte (Three JS) [0]. Previously, I'd written React for about a decade, mostly on the UI side of things. I vastly prefer Svelte, because of how clean the code feels. There's only one component per file, and the syntax looks and writes deceptively like vanilla JS and HTML. There's a bit of mind-warp when you realize Svelte doesn't want you passing components with props as props into another component. Svelte gives you "Snippets" instead, which work for some reusability, but are limited. It sort of forces simplicity on you by design, which I like. Most of React's deep nesting and state management doesn't exist in Svelte and is replaced with simple, better primitives. The bigger gain though for me was Svelte(kit) vs. Next JS. It's very clear what is on the server and what is on the client, and there's none of that "use client" garbage with silly magic exports for Next JS things. The docs are great. Svelte's biggest disadvantage is that the UI library ecosystem isn't as large. For me that wasn't as big of an issue because it was my expertise, but everyone else looking for a drop in UI library will find the Svelte versions a little worse than their React counterparts. Because svelte is compiled, it also is by default very snappy. I think choosing Svelte would likely give most devs a speed boost vs. the spinner soup that I've seen most React projects become. A lot of that is going to be in the skill of the programmer, but I love how fast my app is. [0]: https://bsky.app/profile/davesnider.com/post/3lkvum6xtjs2e https://bsky.app/profile/davesnider.com/post/3lkvum6xtjs2e

benatkin 2y ago

Wow, the optimistic UI example is so simple: https://svelte.dev/docs/svelte/$derived#Overriding-derived-values https://svelte.dev/docs/svelte/$derived#Overriding-derived-v... I wonder what Ryan Carniato, the author of Solid, thinks of it.

mightyham 2y ago
Implementing a settable derived primitive like that is already possible in SolidJS userspace. You can roll your own or simply use https://primitives.solidjs.community/package/memo#createwritablememo https://primitives.solidjs.community/package/memo#createwrit....
eyelidlessness 2y ago
He’s been discussing writable memos for Solid 2.0 off and on for a bit. While the other response is right that you can roll your own, it seems pretty likely this will be a first class thing in Solid too.

deleted 2y ago

[deleted]

joseneca 2y ago

Agh, I understand why runes were implemented, but I still can't get myself to like them. It feels like Runes take away from what made Svelte Svelte (the simple, concise syntax), and changes like this seem like slow concessions back in that direction anyway.

impulser_ 2y ago
You just have to build a big project with Svelte 5 and you will come to like them. A lot of magic is okay for simple application, but when you want to build anything that scales Svelte before runes was just horrible. With Svelte 5 and Runes you can look at any component and instantly know what it does. You couldn't do that with Svelte 4 unless you wrote the whole code yourself.
- pier25 2y ago
  I agree. I ported a non trivial project last year from 4 to 5 and runes are a game changer.
- afavour 2y ago
  I think that's actually the core of the problem. It's the right choice for big projects. But Svelte was an absolute joy to use when brewing up a small or medium size project that you want to just work first time. Runes are the right choice for the library, but there is still a loss there.
  - biker142541 2y ago
    Not sure I agree. I’ve built numerous small projects in Svelte 3 & 4, sharing that same joy many of us had! Stores were generally amazing. I was highly skeptical of runes upon the original announcement and very cursory usage during beta phase. When I finally got to porting a couple simple projects, I shrugged “this isn’t too bad, but what’s all the fuss?”. I ported a mid size project and it really clicked. Then I went to build a brand new small project, and I found myself in love with runes. Having spent the time to get under the hood (especially using them as classes), being able to leverage them during the design phase really sped me up and facilitated cleaner/better state management.

randysalami 2y ago

I’m currently building the back-end for my startup in C# using EventStoreDB and CQRS. I have an initial front-end application written in Svelte from two years ago as a PoC. It was a treat writing and designing it and I can’t wait to do a second pass with all these awesome Svelte updates!

_benton 2y ago

My experience with using Svelte 5 in production the last few months is that while runes are an upgrade to the magic of previous Svelte versions, it's still too much magic to easily reason about complicated state. This seems like it just adds to the mental overhead. Harris says it's "sacrificing a little bit of purity in service of pragmatic goals" but I don't find it very pragmatic to be debugging glitches, lost reactivity etc which I find myself doing exponentially more as our project grows. The compiler definitely makes simple code snippets look pretty but there was a reason the magic syntax didn't find itself in Vue[1], which in my limited experience has a much more intuitive reactivity model. 1: https://news.ycombinator.com/item?id=37592471 https://news.ycombinator.com/item?id=37592471

orefalo 2y ago

I love runes, I love svelte 5, I love sveltekit. Together, they offer a seamless entry into development, allowing you to swiftly grasp concepts akin to JS/HTML. Other options require a significant learning effort. Wish it came earlier...

hbbio 2y ago

Since Svelte 5 was announced, we began using our own library for state management as we could not fully understand the semantics and were afraid of potential changes. If you're curious, here it is: https://github.com/okcontract/cells https://github.com/okcontract/cells It is compatible with both Svelte 4/5 and more importantly pure TS libraries.