4 ms·

@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-c

@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/src/App.svelte 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 7y ago
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://mithril.js.org/redraw.html https://www.imba.io/guides/essentials/state-management#state-management 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 7y ago
  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 7y ago
    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.html 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 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/ https://scrimba.com/ I couldn't get past the Ruby-esque syntax, but it is a very impressive effort.

pier25 7y ago

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://mithril.js.org/redraw.html https://www.imba.io/guides/essentials/state-management#state-management 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 7y ago
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 7y ago
  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.html 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 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/ https://scrimba.com/ I couldn't get past the Ruby-esque syntax, but it is a very impressive effort.