Thread by @AdamRackis

Ok who's interested in learning more about Svelte? I spent a few hours this morning tinkering, and I think I got enough done to understand and share some big picture things.

tl;dr - it's weird at times, but extremely flexible and reactive, with great perf.

Here goes!

1/

Don't expect any kind of cool, flashy demo. That takes time I don't have; I'll try to show enough code to demonstrate some core concepts.

@HenrikJoreteg's "spreadsheet programming" is 💯—update 1 bit of state, have everything cascade. That's the goal. That's everything. Any JS framework that doesn't support that, seamlessly, shouldn't be taken seriously or considered.

React shines here. But so does Svelte.

@HenrikJoreteg Ok here goes. In Svelte, if you want to have a piece of state you make a store. The store has a value, and a method to set a new value. Stores can compose one another, and views / html can bind to store values.

Let's dive in.

@HenrikJoreteg Use case will be: text input updates a piece of URL state. These URL changes automatically propagate to a new set of query values. As those query values update, new GraphQL queries are fired as a side effect, with the results showing up in a view.

So basically web dev 101.

@HenrikJoreteg Here's the store to hold the current url search state.

This code is copy pasted from my React code base. The ONLY Svelte here is on lines 19 and 21 (ya ya, and also line 1 😑).

Make a store, update it when needed. That's it.

@HenrikJoreteg I won't show the code to update the url. Just a textbox with some DOM events.

Eh what the hell, I'm not on a Tweet budget here.

Oh, and yeah, the ../../.. is hideous. I just never bothered to update my webpack config to support "util/history"

Few hours work here, like I said

@HenrikJoreteg So we have searchState, which is a store that always has current search values (variables), sync'd w/ url. As they change, we want to fire a GraphQL query.

That's what a derived store is for.

Check the (great) docs, but as variables change, the callback is fired with a `set` fn

@HenrikJoreteg And yes, you can have a derived store be fed from multiple stores, not just one. There's a number of overloads - svelte.dev/docs#derived

@HenrikJoreteg A derived store is pretty useless w/o a view to bind to. Let's turn there.

Line 9 calls the GraphQL utility.

Line 14 is there things get a little weird.

$:

is the syntax that tells Svelte to react to Store changes. Ie, `$<store>` reactively gets the current value)

@HenrikJoreteg So line 14,

$: books = delve($results...)

basically creates a MobX computed (or Redux Selector, if you prefer) that auto syncs with the derived store returned from the GraphQL helper.

@HenrikJoreteg Line 27 reactively de-references the store right in the html. That's the equivalent of touching a MobX observable inside a component's render() (assuming the component's decorated with @observer, of course).

@HenrikJoreteg @observer And that's about it. It works. Including the back button.

It looks like complete ass, but styling is left as an exercise for the reader.

@HenrikJoreteg @observer Needless to say, the Svelte ecosystem is still a work in progress. Don't expect Apollo GraphQL bindings for Svelte, etc. (that said, it DOES ship with animation bindings, which for those of us who've felt like mental midgets trying to grok react-spring, is hella exciting)

@HenrikJoreteg @observer Anyway, @Rich_Harris somehow did all this shit on his own, in his spare time, without any kind of Patreon funding. He's. A. Fucking. God.

Can someone at Google, Adobe, etc please hire him, give him a huge pay raise (won't be hard to beat NY Times) w/ work time to refine this?

@HenrikJoreteg @observer @Rich_Harris Oh shit - sorry @HenrikJoreteg - you've been on this whole thread. Sorry about that! 😉

I forgot to add: those derived stores cleanup ON THEIR OWN. When nobody is subscribing TO the derived store, the derived store stops subscribing to its input stores. So side effects stop happening automatically when the component unmounts, and the gc can do its thing 💪😎

Oh I should probably also include a link to the source 🤓

github.com/arackaf/bookli…