Comment by noir_lord

5 years ago

Not to mention it takes reactivity to new heights while adding amazingly little actual syntax.

When property changes, the fetch refires, loading appears until the fetch resolves then it displays whatever array someFetch resolved to.

I came from Vue and that plus the way Svelte does stores (literally nothing special about them) was a breath of fresh air.

    <div>
        {#await someFetch(property)}
            <div>Loading...</div>
        {:then data}
        
            {#each data as item, index}
                <div>{item}</div>
            {/each}
    
        {/await}
    </div>

13 comments

noir_lord

Aeolun 5 years ago

But what does ‘#await someFetch’ actually do? The thing I like most about react is that it’s just executing plain Javascript most of the time.

dmitriid 5 years ago
> The thing I like most about react is that it’s just executing plain Javascript most of the time.
Then explain what hooks do ;)
Hooks are decidedly not Javascript (even if they look like Javascript), and are a much more weird construct than {#await promise}
- _hzrk 5 years ago
  
  No, they are JavaScript, it is array based programming wrapped in a reactive functional-declarative approach. Simply array of objects cascading with state. {#await promise} is more cryptic than any useHook function implementation.
  
  4 replies →
noir_lord 5 years ago
https://svelte.dev/tutorial/await-blocks Explains it better.
- hunterb123 5 years ago
  
  His point is you don't have to read some project's documentation to know how some "await blocks" work.
  With JSX you can use native JS features instead, you only need to know the language.
  For example, instead of looking up how to loop in the template syntax, you use an iterator.
noahtallen 5 years ago
Not just most of the time — all of the time! JSX is converted to plain JS (react.createElement) before it gets to the browser.
- tuukkah 5 years ago
  
  Isn't it actually the opposite? Svelte code is compiled to plain JS whereas React has a large runtime.
  
  1 reply →

wruza 5 years ago

I’m neither of (react, vue, svelte) guy, but isn’t that snippet equivalent to some:

  div
    Await promise={mypromise}
      div Loading…
      {res => res.map(…)}
      div Error: {err => err.message}

(writing in pug-like because I can’t stand closing these tags on the phone)

Isn’t it easier in both react and vue to create Await component with children=(ifwaiting, ifresolved, ifrejected) than suffering all over the code?

Edit: I messed data flow up in the error handler, wontfix but you get the idea