←back to thread

The Failed Promise of Web Components

(lea.verou.me)
367 points lemonberry | 6 comments | 30 Sep 20 15:59 UTC | HN request time: 1.636s | source | bottom
Show context
c-smile ◴[30 Sep 20 19:32 UTC] No.24642754[source]▶
> Can we fix this?

Sure, by returning to basics.

Let's assume that Web Component is a DOM element with a code associated with it + lifecycle events.

Here is how Components are done in Sciter ( https://sciter.com )

1. CSS has got `prototype` property:

   div.my-component { prototype: MyComponent url(script/components.js); }
where MyComponent is the name of class in JS, url (optional) is an URL where this MyComponent can be found.

2. In script that custom component is usually represented by ES6 class (+ decorators)

    class MyComponent extends Element {
       // lifecycle event/method
       componentDidMount() {  }
       // lifecycle event/method 
       componentWillUnmount() {  }

       // component specific methods
       foo() { }
       bar() { }

       // event handlers - decorated functions
       @event("mousedown")
         onMouseDown(evt) { }

       @event("click", "button#submit")
         onSubmit(evt, button) { }
      
       @event("change", "input.name")
         onNameChange(evt, input) { }
    }
and that's it. Sciter lives with this schema more than 10 years - proven to be very convenient and flexible.

Yet simple: one property `prototype` + simple wiring of lifecycle events.

replies(2): >>24643504 #>>24645818 #
1. cdata ◴[01 Oct 20 00:23 UTC] No.24645818[source]▶
This is literally what a custom element is. Assuming your @event decorator is built upon the EventTarget interface:

  class MyComponent extends HTMLElement {
    // lifecycle event/method
    connectedCallback() {}
    
    // lifecycle event/method
    disconnectedCallback() {}
    
    @event("mousedown")
    onMouseDown(evt) { }
    
    @event("click", "button#submit")
    onSubmit(evt, button) { }
      
    @event("change", "input.name")
    onNameChange(evt, input) { }
  }
That said, custom elements don't cost $310 for an indie license. Instead, they are free and available in every web browser.
replies(1): >>24646208 #
2. c-smile ◴[01 Oct 20 01:21 UTC] No.24646208[source]▶
> @event decorator is built upon the EventTarget

In Sciter it is not. @event there is not calling Element.addEventListener but declares event handlers as static table associated with class.

Essentially components are attached to DOM elements by calling Object.setPrototypeOf(element, MyComponent) - no memory allocation is happening (modulo code in componentDidMount) - very fast and lightweight.

Yet, in your sample, you've missed the call of customElements.define(), that alone is limiting use cases quite a lot.

> custom elements don't cost $310 for an indie license.

Sciter is free, as browsers too, components in SDK, hundreds of them, are free too. You will need to pay $310 only if you need source code of Sciter Engine itself.

Sciter is like a browser in that respect, try to request source of MS Edge or Google Chrome for any money - good luck with that.

replies(1): >>24646756 #
3. cdata ◴[01 Oct 20 02:47 UTC] No.24646756[source]▶
The web components in Chrome and Edge are both implemented in the open source Chromium project. So, it is free for all to read, use and modify as they wish (in accordance with the terms of the license https://chromium.googlesource.com/chromium/src/+/master/LICE...)
replies(1): >>24647216 #
4. c-smile ◴[01 Oct 20 04:00 UTC] No.24647216{3}[source]▶
Here is running campaign to Open Source Sciter: https://www.kickstarter.com/projects/c-smile/open-source-sci...

By donating there you can help to make it happen, your move?

That will be real Open Source. Edge and Chrome are not Open Source, they are users of it.

replies(1): >>24647533 #
5. xmprt ◴[01 Oct 20 05:07 UTC] No.24647533{4}[source]▶
Holding open source hostage to a $100,000 goal doesn't sound like "real" open source to me either. And you're still going to offer it under either GPL or paid commercial licenses. Chromium is released under a BSD license which is a lot more permissive.

It's totally fine to make money but when people have valid critiques you shouldn't turn around and try shaming competitors about something that you're not even doing.

replies(1): >>24651954 #
6. c-smile ◴[01 Oct 20 15:24 UTC] No.24651954{5}[source]▶
Yes, it is BSD, but who pays for Chromium development?

By financing that BSD project that organization is buying the right to define Web standards by its own.

BSD is just a business model for them : you wine her, you dine her, you buy her. Such an Open Source, eh?