5 ms·
I don’t follow… in what sense is this JavaScript? <button on:click={incrementCount}> Specifically, what is on:click? It doesn’t look like JavaScript, and
by erikpukinskis 3y ago
I don’t follow… in what sense is this JavaScript?
<button on:click={incrementCount}>
Specifically, what is on:click? It doesn’t look like JavaScript, and it doesn’t look like the DOM. It looks like a new language which is specific to Svelte.
Or what about this… is this JavaScript?
$: doubled = count * 2;
Or…
{#if user.loggedIn}
<button on:click={toggle}> Log out </button>
{/if}
Or…
<button on:click|once={handleClick}> Click me </button>
I am willing to believe that all of that is ergonomic in some way, but it doesn’t appear to me at first blush as very JavaScript-y, or explicit. I see a lot of black box stuff controlled by a declarative API.
- diob 3y agoReminds me of Angular
- Bilal_io 3y agoAngular template syntax is correct HTML syntax. It's nothing like the examples abovd.
- russelg 3y agoYou're telling me on:click={toggle} is nothing like (click)="toggle()"?
- wirahx 3y agoit's not. `toggle` is a pointer to a function name and "toggle()" appears to be an expression which is parsed and then executed (scary). you can on on:click={() => toggle()} in svelte which is more similar, but it isn't parsed and executed, it is a pointer to an anonymous function which is directly executed. on:click={toggle()} in svelte would run the function immediately (probably not what you want) and return the result as the handler for the on:click so quite different, really.
- ttfkam 3y agoNot a pointer to a function. In JS, functions are first class objects. You might as well say toggle() is an invocation of a pointer to a function. <div onclick="toggle"> has existed since the dawn of JavaScript in Netscape Navigator 2.0 Beta Gold. Your complaint about the syntax is in fact baked into the foundations of the web.
- Bilal_io 3y agoOne is syntactically correct HTML, and the other is not. That's was the only point of my comment
- diob 3y agohttps://angular.io/guide/binding-overview https://angular.io/guide/binding-overview Haven't looked at angular since 2015 to be honest, but it still seems like they do weird html stuff to me, such as: <ul> <li *ngFor="let customer of customers">{{customer.name}}</li> </ul> or <label>Type something: <input #customerInput>{{customerInput.value}} </label>
- Bilal_io 3y agoI agree with you, it looks weird, but my point was that it's correct HTML syntax, even though you cannot expect it to work if you open an Angular template in a browser, but an HTML parser can tell you it's syntactically correct.
- ttfkam 3y agoAngular will soon be migrating to the Svelte style of conditional flow control. https://github.com/angular/angular/discussions/50719 https://github.com/angular/angular/discussions/50719
- rmuratov 3y agoAuthor means explicit after compiling.
- wirahx 3y ago> I don’t follow… in what sense is this JavaScript? > <button on:click={incrementCount}> it's not. it's html. incrementCount is a pointer to a javascript function. > Or what about this… is this JavaScript? > $: doubled = count * 2; Yes. $: is a javascript label. We use it to indicate that a function should be reactive - if the count variable changes, the right hand will be rerun and double updated. > <button on:click|once={handleClick}> Click me </button> html again. the |once is a modifier to click which detaches the handler after a single use. It's a directive in the html markup (still valid html) which the compiler picks up and converts into node.removeEventHandler.
- lucideer 3y ago> which the compiler picks up I think this is the crux of the gp's question. The browser doesn't support explicit behaviours for "on:click" or "|once" (the "$" label is a cool trick I'd forgive the gp for not recognising as native JS) - it may be "valid" HTML but it's not "just HTML" (nor just JS), it's a DSL.
- ttfkam 3y agoIt does support onclick though. This isn't a far off derivation. Also "|once" is a whole lot cleaner and more terse than the "once" variant of addEventListener, to be sure. Anyone who already knows HTML and native event handling could pick this up in less than 5 minutes. Good enough.
- MrJohz 3y agoWhile this is all technically true, I don't think it's all that helpful a thought process to have when approaching Svelte. Yes, Svelte files are syntactically valid HTML, Javascript, etc, but they have very different semantics. Take the ability to reference functions in HTML - this is simply not possible in normal HTML, where inline event handlers instead are passed Javascript expressions to evaluate. It's definitely a useful feature, but it's very clearly outside of the normal realm of HTML. This goes further with Javascript: here the semantics differ considerably, with labels in normal Javascript doing nothing except when dealing with loops, and labels in Svelte are a form of reactivity. You've also got things like dollar signs interacting with stores, and other semantic differences. As Rich Harris says, Svelte is a language.