undefined | Better HN

0 pointsc-smile3y ago0 comments

It depends how really you use virtual DOM. React's "reconciliate whole world" approach can be excessive, yes.

But, for example in Sciter, vDOM works in [web] component cases that are similar to Svelte:

   class Beers extends Element {
     bottles;
     
     render() {
       return <span .bottles>{this.bottles}</span>
     }

     set value(v) {
       this.componentUpdate({bottles:v})
     }
   }

When you will do

   document.$(".bottles").value = 12;

it will update only what is needed. Pretty much Svelte style but with the convenience of vDOM.

class Beers extends Element { bottles; render() { return <span .bottles>{this.bottles}</span> } set value(v) { this.componentUpdate({bottles:v}) } }

0 comments

3 comments · 1 top-level

c-smileOP3y ago· 2 in thread

To make it even closer to Svelte, Sciter has native signal() implementation, so

   let bottles = signal(0);

   function Beers() {
       return <span .bottles multiple={bottles.value > 1}>{bottles.value} bottles of beer</span>
   }

   document.body.append(<Beers/>);

That can be updated by simply changing signal:

   bottles.value = 42; // Party time!

Note: this does not require any preprocessors or precompilations.

ttfkam3y ago

Let's compare lines of code, because more lines invariably leads to more bugs.

Contents of Beers.svelte:

    <script>
      export let bottles = 99;
    </script>
    
    {#if bottles > 0}
      <span class="bottles"
            on:click={() => --bottles}>
        {bottles} bottles of beer on the wall
      </span>
    {:else}
      <span class="bottles">
        No more bottles of beer on the wall
      </span>
    {/if}

Then to use it:

    <script>
      import Beers from './Beers.svelte';
    </script>

    <Beers />

No knowledge of Reactor's existence needed let alone the library's "signal" function. No functions needed at all. No bespoke syntax for the "bottles" CSS class. No vDOM API call. No extra "values" accessing property. It's >90% plain old HTML, CSS, and JS with literally the bare minimum of syntax to handle data binding.

Yes, it requires a compiler, but I would honestly astounded if you even noticed the compiler build time in dev mode. AND the deployed code is smaller. AND it's simpler for the dev to understand and maintain. AND it's likely faster at runtime.

The argument that Svelte adds mental overhead is manifest nonsense. If you like the vDOM, have at it. Follow your bliss. Some folks like hitting and kicking trees. Some folks prefer their coffee too hot to drink.

I for one want a web framework that makes web development as simple, straightforward, and powerful as possible. HTML, CSS, and the smallest amount of JS and HTML annotation imaginable.

c-smileOP3y ago

In Sciter you do not need any preprocessor at all, not even JS in your HTML:

    <style>
      div.beer {
        prototype: Beer url(/components/beer.js);
      }
    </style>
    <body>
       <div class="beer" />
    </body>

After that div.beer element will be instanceof Beer. In this case class Beer used as a [Web-alike] component.

2 more replies

j / k navigate · click thread line to collapse