Thread by @AdamRackis

I know I've been heavy on the Svelte hype lately. Some folks have been asking for specifics, which is pretty reasonable. So while my League Client patches, here's a thread of actual Svelte features that make me happy.

1: Uni-directional prop flow as religion is a shitty religion.

A solid component model, with props being passed downward is great. That was the huge value proposition of React. But there are times when this over-complicates matters.

We've all been there. We have some state that a child component needs to control. So what do we do? We define the state in the parent, and pass a setter, or reducer to the child, which the child then calls with the new value. We've all done this a million times.

Make no mistake, this is not a setter in the OOP sense, where we're encapsulating setting logic to do validation and such. We're just passing a raw setter (likely created by useState) down, which the child can dump whatever they want into.

This is obnoxious boilerplate. With Svelte, you can just bind parent's state to the child's state and be done. No setter.

Parent.svelte:

<script>
let value
</script>

<Child bind:childsVal={val}

then Child creates childsVal.

Simple.

svelte.dev/tutorial/compo…

2: Refs are simpler

In svelte, refs are just variables

<script>
let domNode
</script>

<div bind:this={domNode} />

Hey guess what: domNode now holds the div. That's it.

Oh but you don't just want a reference to the dom node, you wanna do stuff, right? With Cleanup? Well...

3: Actions

Usually you need to get a reference to your dom node, set up some third party util / jQuery UI plugin, whatever. And do teardown on unmount.

In Svelte this is all packaged into actions 😍🍺

svelte.dev/tutorial/actio…

You can even pass props / args to your action to have it re-call when certain things change, so you can update your third-party util (it'll call the update function you provide).

Wrangling this with effects would be a pain in the ass.

svelte.dev/docs#use_action

4: Slots

I discussed them here. One of my favorite features.

https://twitter.com/AdamRackis/status/1318350963942502407

5: Built-in animations. As a first-class citizen.

From easy sugar you can add to elements to make them fade in, to raw springs like you use in React. Also flip animations! If you don't know what that is, cycle through the Svelte tutorial starting here:

svelte.dev/tutorial/tween…

Is there ANYTHING Svelte can't do?

Sure. Your portal capabilities are *slightly* limited. You can't do deferred un-mounting like you can with React (no way to imperatively access a component's <slot> to re-render elsewhere).

1/

Also those wonderful

in:fn
out:fn

transitions (seriously animating nodes as they mount and unmount is baked into Svelte - I still can't believe that)

Doesn't work w/ Springs. Tho Rich and I been chatting about pre-computing springs & converting to transition form...stay tuned

The above are for incredibly narrow use cases, and I'm struggling to imagine how big of a web app you'd need for it to matter. Especially given the spring pre-computation thing. If that works, and can be automated, it'd solve the 1 remaining use case I have that's not 100% solved

Oh and please don't ask me if I've tried Vue yet. I have not. It seems really really good. But I'm gonna spend some serious time honing deep expertise with Svelte for awhile, contributing to the ecosystem, etc.

That's just how I like to explore OSS stuff 🙃

On addendum: if your gut reaction is "two-way binding sucks" -- that's fine. You don't have to use that feature. You can pass a setter function down to a child component just like you do with React.