[mvolkmann]

You can do complicated things with Svelte stores, but in my experience most of the time you only need something like this using a writable store:

<script> import {writable} from 'svelte/store'; const person = writable({name: 'Mark', zip: 63304});

  function handleChange(event) {
    const name = event.target.value;
    person.set({...$person, name});
  }

</script>

<input on:input={handleChange} value={$person.name} />

<div> Hello, {$person.name} at {$person.zip}! </div>

Of course if person is only used inside this component, you would not use a store. If it is used in other components, you would typically define and export the store in another .js file and import it everywhere it is needed.

My point is that this is a very simple way to share state between components and nowhere near as complex as the page you shared might indicate. That's because you do not need to use derived stores or custom stores. The simple writable store works in most cases.

[pier25]

Right but this is still a lot of code for changing the name of a person.

Also, this works with pojos and primitive values. What happens when you add class instances, relationships, children, etc?

For example in a project I was working I had geometrical figures in my reactive data model. With classes I could simply do:

    rectangle.getArea()

With MobX this was super simple to implement. If I wanted to change the position of the rectangle I would simply modify the x and y observable properties.

[mvolkmann]

@pier25 You got me curious about this. I've never seen this done with Svelte, so I decided to try it. Check this out: https://github.com/mvolkmann/svelte-with-classes/blob/master....

The key is that when you update a Svelte store you must return a new value. It's enough to just return the value you updated. You see that happening here on lines 16 and 21.

I take your point that this is not as transparent as when using observables. But at least you can use classes that have relationships and call methods that modify the objects when those objects are in Svelte stores.

[pier25]

Exactly but this could become complicated pretty quickly.

Right now you have 1 update operation for an XY translate. What if you wanted to be able to change multiple properties of more complicated classes? You'd need more boilerplate for each update.

Like I said in a previous comment, my favorite approach right now is what Mithril and Imba do: no reactivity. You change your state and when you're done you tell the rendering engine that the state has changed.

https://mithril.js.org/redraw.html

https://www.imba.io/guides/essentials/state-management#state...

Since this is all vanilla you can do pretty much anything you want with your state. Mutable, immutable, etc. You don't need to add the weight and overhead of something like MobX/Redux/Vuex and you can add as much or as little bureaucracy/boilerplate as the project requires.

[mvolkmann]

It seems like both Mithril and Imba do some form of DOM diffing. It’s easy because you just tell it to update the DOM using the latest state. Imba in particular says it has a really fast way to do that. But isn’t it that case that no matter how fast they can make it, it is still doing way more work than an approach that can determine what parts of the DOM need to be updated without DOM diffing?

[pier25]

Mithril uses a vdom so yes it's doing diffing. It's certainly slower than Svelte but it's still plenty fast for most use cases.

https://krausest.github.io/js-framework-benchmark/current.ht...

Most importantly Mithril is very lightweight. Check the startup metrics on those benchmarks. This is not a totally fair comparison since Mithril includes a router and an http client and the others do not. Still, it manages to be among the best.

Imba uses memoization and, much like Svelte, direct DOM manipulation.

https://www.imba.io/guides/advanced/performance

Imba was used to build Scrimba (an online code tutorial/editor) which is very impressive.

https://scrimba.com/

I couldn't get past the Ruby-esque syntax, but it is a very impressive effort.

[PaulMaly]

You can create a custom store in Svelte and do almost the same:

import { writable } from 'svelte/store';

export default function(state) { const { subscribe, set, update } = writable(state);

  return {
   subscribe,
   getArea() { ... }
  };

};