You Don't Need to “Learn” Svelte: Embracing the Simplicity of JavaScript

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by ahipple on Monday September 04, 2023 @11:20AM (#37381333)

> It doesn't throw a bunch of alien syntax at you, expecting you to decipher it like an ancient scroll

Sounds promising, but the first examples contrasts a React `useEffect` hook (a simple function call, into which you pass a callback and a dependency array) with

    <script>
        $: {
            console.log("Count Changed!", count)
        }
    </script>
    
    <!-- html -->

Which prompted in me roughly these questions:

- Is this actually just JavaScript?

- Oh, is `$` a label? [I googled this to confirm it is]

- I thought JavaScript didn't have a `goto` statement? [I googled this to confirm it doesn't]

- How does this ever get invoked? [I still don't know the answer to this question -- MDN says that labels can only be used with `break` and `continue` statements]

- Does it get invoked only when `count` changes?

- If so, how?

- If not, how do I specify the dependencies?

It might 'just work', but it's also not 'just JavaScript'.

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by Tade0 on Monday September 04, 2023 @11:33AM (#37381470)

> How does this ever get invoked?

Initially the same way it would without the $: { ... } wrapper - that is true both for Svelte and vanilla JavaScript.

> Does it get invoked only when `count` changes?

It's invoked whenever a named variable that is mentioned in the block is explicitly assigned to.

That's the whole "magic" here really. It's "just" JS in the sense that there's no additional syntax introduced that would make it incompatible with any of the available JS parsers, so by extension TS parsers as well.

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by ahipple on Monday September 04, 2023 @11:48AM (#37381617)

Sure -- I did run that code in a JS REPL and saw that it invoked the block immediately, but that isn't necessarily what I want if I'm writing reactive code. I then tried typing `break $` and `continue $` and got SyntaxErrors for my trouble, confirming my hypothesis that this couldn't be plain JavaScript of the sort I was familiar with.

> It's invoked whenever a named variable that is mentioned in the block is explicitly assigned to.

This makes sense in the sense that it's a contract that I can accept and use, but it does imply the existence of a parsing pipeline & runtime of unknown (to me) complexity & capabilities -- exactly the sort of thing a prospective user of the framework would need to learn about sooner or later.

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by Tade0 on Monday September 04, 2023 @12:27PM (#37382019)

Well, yeah - there's a reason why it's called a framework-compiler.

In any case you can always just look into the unminified output where you'll see how your code is instrumented - it even includes comments detailing which variables are being dirty-checked.

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by js2 on Monday September 04, 2023 @11:39AM (#37381537)

[delayed]

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by chrismorgan on Monday September 04, 2023 @11:36AM (#37381512)

> Is this actually just JavaScript?

JavaScript syntax, yes, but with Svelte semantics rather than JavaScript semantics. Everything else follows from that point. It gets invoked by the Svelte compiler transforming it. In order to work, `count` must have been defined as a property (`let count` or `export let count`), so that the compiler can run that code again when `count` changes. Reactive dependencies are specified purely by mention of their names. (Well, there’s stores too, via the $ prefix on variable names.)

> It might 'just work', but it's also not 'just JavaScript'.

You are completely correct.

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by pier25 on Monday September 04, 2023 @12:13PM (#37381860)

It's Almost Just JavaScript™ :)

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by DoesntMatter22 on Monday September 04, 2023 @01:48PM (#37382981)

> - I thought JavaScript didn't have a `goto` statement? [I googled this to confirm it doesn't]

Goto is not a statement. It's a function. Frameworks can have functions...

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by chrismorgan on Monday September 04, 2023 @03:51PM (#37384269)

Goto is control flow. You can’t do control flow with function calls in the sorts of languages we’re talking about, so goto has to be built into the language, typically as a statement.

(In some of these languages you can do awful hacks like using hooks intended for debuggers <https://entrian.com/goto/> or rewriting bytecode <https://github.com/snoack/python-goto>, and frankly what Svelte does is quite similar, just implemented as a compilation step rather than at runtime.)

[ Parent | on HN ]

Re:You Don't Need to “Learn” Svelte: Embracing the Simplicit... by DoesntMatter22 on Monday September 04, 2023 @06:19PM (#37385668)

I assumed this was talking about the goto statement in Svelte which is navigation method. If not that's fine

[ Parent | on HN ]