> writing complex React components feels more like admin; a constant worry that I'll miss a dependency in my useEffect call and end up crashing my browser session. I don't understand this worry, but I guess that happens when you try to do everything with hooks, the way I settled in my approach is to use React components just for the view without hooks, nor lifecycle logic, just dumb components with ocasional local st…
Comparing Svelte and React
91–100 of 338 posts
Re: Comparing Svelte and React
#92Earlier quoted context omitted.
> Svelte has 2 primitives that replace all of this: readable and writable. You can create a writable store and you call `.update` or `.set` like react setState. Want to separate your update logic from your component logic like in redux? Easy, just export functions to update the store instead of calling `.update` in your components. This sounds very similar to the experience of using MobX. I evangelize it as an altern…
It is also fucking magic. I love it when it works, but I have no idea why it doesn’t when it breaks. The same is not true for Redux, which is so simple I can build a house with it.
1) Observables are properties on objects; when their getter is called, it becomes "tracked" (subscribed to) by the currently-running tracked function. When their setter is called, it publishes to all subscribers. This happens through JS proxies for plain objects, and class decorators for class instances.
2) A tracked function is anything that must be re-evaluated when an observable it depends on is modified. This includes React render functions, computed functions, and any other side-effects you've created via autorun(), reaction(), etc. Though the idea is to avoid side-effects, so 90% of the time it's just render functions and computed functions. In these cases it amounts to a cache-clear on a pure function: "the return value will be different, so re-evaluate it and use the new return value". A computed function is an observable property getter that's also a tracked function (it doesn't have a corresponding setter; instead, it publishes when it's published to).
3) Tracking works by a) marking global state before a tracked function is run, b) making note of any observables that report back during that time, c) clearing the global state (and subscribing to the observables) when the tracked function completes. Because this is done temporally based on before/after the function has executed, any nested function calls get treated exactly the same as the top-level function call. There's no special magic necessary for that.
That's about all there is to it. Everything else in the library is just another permutation on these concepts.
Re: Comparing Svelte and React
#93Earlier quoted context omitted.
> even the difference between passing by reference vs value You can only pass by value in JS so maybe that's why. It is a bit confusing because of how objects work that it feels like you are passing by reference. You are passing reference as the value.
When it comes to primitives you can only pass by value, but with objects and arrays you can only pass by reference . And this applies to comparisons too: when comparing objects or arrays you are comparing by reference , not deeply by their inner values. If you want to compare them deeply you have to take some additional steps to make that possible, and all of the different strategies for doing so have different trade…
Re: Comparing Svelte and React
#94Earlier quoted context omitted.
This sounds really interesting, don't get me wrong, but it also shows just how insanely novel and complicated modern frontend dev is. Let's break down the terminology: - hooks - useEffect - useHistory - useSelector - dispatch - action - useDispatch - ducks - Actions - Epics (Observables) - Sagas (generators) - Reducers Most of those terminologies don't come from a general programming paradigm, but are the domain lang…
Not to mention terms that do come from a general programming paradigm, but have a very narrow practical / framework-specific use within frontend dev that makes it even harder for beginners (e.g. "thunk" might be a general term, but I bet most people googling it are just trying to get some Redux tutorial to work, and will end up going down dozens of rabbit holes trying to understand the general concept) I really hate…
Don't feel to bad for them, that's our entire craft. `while(true)` and sorting algorithms are not.
Re: Comparing Svelte and React
#95I'm a big fan of Svelte. I've raved about their documentation before, but it bears repeating: this should be the gold standard. You can read it all in a day. There are examples to follow right next to the documentation. Svelte is both succinct and powerful. I find this in contrast to React which is often baffling and incoherent. I say this as someone that has used React professionally for 6 years. They've changed the…
How is Svelte "just JavaScript" when it uses custom templates and file types?
Re: Comparing Svelte and React
#96See https://routify.dev/ and https://routify.dev/guide/installation/install-to-existing-p...
Re: Comparing Svelte and React
#97Earlier quoted context omitted.
I'm not sure I agree with your framing of the precise terminology ("passing a reference to an object, by value" vs "passing an object by reference"), but it also isn't important. What's important is this: let a = { foo: "bar" } let b = { foo: "bar" } console.log(a === b) // false and this: let a = { foo: "bar" } let b = a b.foo = "blah" console.log(a.foo) // "blah" This is the kind of misunderstanding that causes ins…
> I'm not sure I agree with your framing of the precise terminology ("passing a reference to an object by value" vs "passing an object by reference") The distinction is that, if JS truly was pass-by-reference for objects, you could change what the reference was pointing to. But you can't. I agree with you that objects/references are a stumbling block for new programmers in JS. You have to understand how these things…
That's only true if you're passing the pointer by reference. That's different from passing the object itself by reference.
I did just look up the C++ semantics and learned something: technically reference-arguments don't have to be implemented by the compiler as pointers, though in practice they mostly are. So in that sense it's technically more correct to say that JS works with object pointers and not references. But we're really getting quite deep into the weeds at that point.
https://stackoverflow.com/questions/5893873/pass-by-referenc...
Re: Comparing Svelte and React
#98> writing complex React components feels more like admin; a constant worry that I'll miss a dependency in my useEffect call and end up crashing my browser session. I don't understand this worry, but I guess that happens when you try to do everything with hooks, the way I settled in my approach is to use React components just for the view without hooks, nor lifecycle logic, just dumb components with ocasional local st…
I’m glad you’ve found something that works for you, but the fact that each react dev has their own complicated way to build a web app is exactly what made me leave react.
Re: Comparing Svelte and React
#99I'm a big fan of Svelte. I've raved about their documentation before, but it bears repeating: this should be the gold standard. You can read it all in a day. There are examples to follow right next to the documentation. Svelte is both succinct and powerful. I find this in contrast to React which is often baffling and incoherent. I say this as someone that has used React professionally for 6 years. They've changed the…
Re: Comparing Svelte and React
#100Earlier quoted context omitted.
When it comes to primitives you can only pass by value, but with objects and arrays you can only pass by reference . And this applies to comparisons too: when comparing objects or arrays you are comparing by reference , not deeply by their inner values. If you want to compare them deeply you have to take some additional steps to make that possible, and all of the different strategies for doing so have different trade…
Everything in JavaScript is passed the same way, whether primitive values or objects. Trying to graft a distinction between pass-by-value and pass-by-reference on top of this single passing method is unlikely to do anything other than confuse people learning JavaScript.