Read on Twitter
I know I& #39;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& #39;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.
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& #39;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& #39;ve all done this a million times.
Make no mistake, this is not a setter in the OOP sense, where we& #39;re encapsulating setting logic to do validation and such. We& #39;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& #39;s state to the child& #39;s state and be done. No setter.
Parent.svelte:
<script>
let value
</script>
<Child bind:childsVal={val}
then Child creates childsVal.
Simple. https://svelte.dev/tutorial/component-bindings">https://svelte.dev/tutorial/...
Parent.svelte:
<script>
let value
</script>
<Child bind:childsVal={val}
then Child creates childsVal.
Simple. https://svelte.dev/tutorial/component-bindings">https://svelte.dev/tutorial/...
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& #39;s it.
Oh but you don& #39;t just want a reference to the dom node, you wanna do stuff, right? With Cleanup? Well...
In svelte, refs are just variables
<script>
let domNode
</script>
<div bind:this={domNode} />
Hey guess what: domNode now holds the div. That& #39;s it.
Oh but you don& #39;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
https://abs.twimg.com/emoji/v2/... draggable="false" alt="đ" title="LĂ€chelndes Gesicht mit herzförmigen Augen" aria-label="Emoji: LĂ€chelndes Gesicht mit herzförmigen Augen">https://abs.twimg.com/emoji/v2/... draggable="false" alt="đș" title="Bierkrug" aria-label="Emoji: Bierkrug"> https://svelte.dev/tutorial/actions">https://svelte.dev/tutorial/...
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
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& #39;ll call the update function you provide).
Wrangling this with effects would be a pain in the ass. #use_action">https://svelte.dev/docs #use_action ">https://svelte.dev/docs...
Wrangling this with effects would be a pain in the ass. #use_action">https://svelte.dev/docs #use_action ">https://svelte.dev/docs...
4: Slots
I discussed them here. One of my favorite features. https://twitter.com/AdamRackis/status/1318350963942502407">https://twitter.com/AdamRacki...
I discussed them here. One of my favorite features. https://twitter.com/AdamRackis/status/1318350963942502407">https://twitter.com/AdamRacki...
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& #39;t know what that is, cycle through the Svelte tutorial starting here: https://svelte.dev/tutorial/tweened">https://svelte.dev/tutorial/...
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& #39;t know what that is, cycle through the Svelte tutorial starting here: https://svelte.dev/tutorial/tweened">https://svelte.dev/tutorial/...
Is there ANYTHING Svelte can& #39;t do?
Sure. Your portal capabilities are *slightly* limited. You can& #39;t do deferred un-mounting like you can with React (no way to imperatively access a component& #39;s <slot> to re-render elsewhere).
1/
Sure. Your portal capabilities are *slightly* limited. You can& #39;t do deferred un-mounting like you can with React (no way to imperatively access a component& #39;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& #39;t believe that)
Doesn& #39;t work w/ Springs. Tho Rich and I been chatting about pre-computing springs & converting to transition form...stay tuned
in:fn
out:fn
transitions (seriously animating nodes as they mount and unmount is baked into Svelte - I still can& #39;t believe that)
Doesn& #39;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& #39;m struggling to imagine how big of a web app you& #39;d need for it to matter. Especially given the spring pre-computation thing. If that works, and can be automated, it& #39;d solve the 1 remaining use case I have that& #39;s not 100% solved
Oh and please don& #39;t ask me if I& #39;ve tried Vue yet. I have not. It seems really really good. But I& #39;m gonna spend some serious time honing deep expertise with Svelte for awhile, contributing to the ecosystem, etc.
That& #39;s just how I like to explore OSS stuffhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="đ" title="Auf den Kopf gestelltes Gesicht" aria-label="Emoji: Auf den Kopf gestelltes Gesicht">
That& #39;s just how I like to explore OSS stuff
