Re: [w3c/webcomponents] Non-class based example of customElement.define() (#587)

Dude, this is just insane. Reading this thread I have more questions than answers. I know, this comment is long and probably belongs on a personal blog instead of a github issue, but let me explain where I come from:

I'm developing front end things for four years now and the moment I started, AngularJS was the biggest thing for beginners, but React became more popular over time. The last few times I worked with AngularJS I really hated it and it's size and it's slowness and it's shrinking community. So I thought: "Hey, let's try React, right?" Unfortunately the way things work in React are just to complex or weird for me to comprehend, it seems. Also, I thought the whole JSX thing is unnecessary. I mean, since we are moving to creating everything in .js files, why do we still use html-ish syntax for it instead of directly creating elements with the DOM APIs we have? Why do we use something like styled components with literally the same CSS syntax instead of just doing it the Javascript-camelCase way (`element.style`)? There is so much parsing and transpiling going on in the background, I don't know why anyone ever thought, **this** is the way we should make web components in Javascript in the future. To be fair, I don't know how much it impacts the performance, but even just from a logical perspective, why don't we really only use Javascript?

So, although I really don't have the time for it, I started "newh" (**n**ever **e**ver **w**rite **h**tml), a framework for creating components and elements only using Javascript syntax. And guess what, I wouldn't write this comment, if it was simple.

My final question is now: In a sane javascript environment, like es6+babel, what is the fastest and/or preferred modern way to create custom `HTMLElements` and append it to any other `HTMLElement` when needed? I'd really love to use es6 classes, but at the moment it's just not possible, it seems. You have to use the old `document.createElement` which does some weird `HTMLUnknownElement` stuff that seems unsafe and that I don't quite understand.

My dream is this:

```javascript
import { Component } from "newh";
import myChildComponent from "./my-child-component.js";

const myParentComponent = new Component({
    tag: "my-parent-component",
    attrs: {
        id: "my-id",
        class: "my-class"
    },
    style: {
        color: "blue",
        backgroundColor: "red"
    }
}, [myChildComponent]);

document.body.appendChild(myParentComponent);
```
where the `Component` constructor takes two arguments, a general settings object and a single child component or an array of child components. The output would be:

```html
<html>
    <head>
    </head>
    <body>
        <my-parent-component
            id="my-id"
            class="my-class"
            style="color: blue; background-color: red;"
        >
            <my-child-component>
            </my-child-component>
        </my-parent-component>
    </body>
</html>
```

To my understanding, something like this is only possible with `document.createElement()` and `element.appendChild()`, and not with extending the `HTMLElement` class. And with "possible" I mean possible while using babel to support older browsers. Imho, this isn't a babel problem. Babel mostly transpiles correctly. There's just a lack of tools and libraries for web components focusing on normal environments. It doesn't matter if this cool new standard is implemented in the newest of the newest browser versions, I'm still on Vivaldi (chromium v64) because the newest official chromium 32bit build for Linux is 1 year old and on v62, so this really is the newest browser I could get for this machine. Now consider the users we develop for, a lot of them have even older browsers and don't even know that there is a way to activate experimental features on some weird chrome:flags page.

This whole thing is just frustrating. I really like the idea of web components and doing more things on the Javascript side, but the way it is presented to us developers is just miserable. Like "Hey, we have a cool new standard/concept of doing things on the web here! Go and use it, it's super cool! Oh and yeah, for the last 5 years we didn't came up with any usable universal polyfill, shim or framework to actually work with it. Lol."

Now you could say: "Why arent **you** trying to do a polyfill then?" Well, then please first update the damn docs for these web component and `customeElements` and `HTMLElement` APIs. There is not even one useful page to learn what you can and cannot do and what you should be able to do. Everything we have are some small examples, using HTML code to implement components. Things are really moving too fast here. As always in the software world. But this time it's just crazy how little the creators and implementers of this standard/concept care, to make this transition as easy as possible.

My last few days were just horrible because of this. I thought I could quickly dive into this, but I can't. No one with a normal brain can. It's just too messy right now. Seems like I will use AngularJS for another year, or at least until this situation gets way better than it is now.

Godspeed, please don't mess it up, peace.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/587#issuecomment-369072525

Received on Wednesday, 28 February 2018 00:06:56 UTC