I re-invent the wheel - a rant.

programming web dev
21

@steve.mills I wounder how the rendring speeds are between react and web components. I enjoy web components and hope for a new popular standard.

22

If you use a documentFragement rather than innerHTML to append your component on connectedCallback the rendering speed of the web component will be as fast as vanilla JS can get.

FYI you don’t have to use shadow DOM at all with web components. It does have a big performance hit. Shadow DOM is designed for cross origin components where you don’t want styles to clash.

Also you don’t even have "mount" a component with innerHTML or documentFragment.
If you don’t have dynamic content just use the custom-elementas a wrapper for static HTML and a hook for your JS logic.

I tend to use custom-elements for the labeling benefit and connectedCallback for event listeners.

What I would really find useful is HTML imports with Slots IF http push worked reliably.
e.g.

<head>
  <link id = "body" rel="import" href="/templates/body.html">
<link for = 'body' rel="import" href="/data/body.json">
</head>

We used to have html imports in 2013 (deprecated 2020) (a bit different from above).

You can do something similar server side or SW, by streaming partials to the browser.
e.g. (part of a basic stream)

let files = ['head.html', 'css1.html', 'body.json', 'tail.html']

let unSettled = files.map(x => fetchIt(x));
    for await(let [i, val] of unSettled.entries()){
        let type = files[i].split('.').pop();
        let res = await val;
        if (type == 'json') {let json = await streamJSON(res.body)}
        else { let HTML = await streamHTML(res.body)}
}
23

I’ve come to realize that with all the CSS and JS frameworks in existence, it seems that all try to reinvent the wheel to do the same exact thing; it boils down to which you like best.

I feel overwhelmed by all the various solutions out there, so I feel compelled to reinvent the wheel myself, further adding to the myriad of choices. I feel like I’m relearning things every 6 months because of how drastically some of these tools change how they operate.

By the time we all hop on board with the latest trends, they’re already obsolete and something shiny and new is on the horizon :smiling_face_with_tear:

1 Like
24

I don’t subscribe to frameworks.

If your after a structure to your CSS the best I have seen by far is Andy Bells CUBE CSS methodology.

It goes nicely very with his Every Layout CSS Components.

If you want to use web components with React you can (BTW you don’t need Shadow DOM)

If you want to build framework agnostic code this video is pretty decent (as well as the channel)

If your vanilla all the way, this guy takes it to the extreme:

On a side note, I’m building a browser based SSG/ page builder which utilizes CSS in JS , Web Components/ Custom- elements, HTML partials.

2 Likes
25

Vanlia web components did not have good testing libraries. Has that changed? Compared to react.

26

I think there’s a few out there.

TBH I don’t really use web-components like react does. I use object destructuring and template literals. I also use animations a lot so my testing is a lot more about FPS.

27
28

It’s funny… A lot of the plain (no library) web component/ custom-element tutorials/ demos out there are from Java/ Ruby developers.

I think they see web components as the new <applets>.

There’s also a library called Stencil JS that “compiles” web components into the various framework equivalents.

29

This video is gold.
The guy really knows what he’s doing with web components.
It’s not really a beginners video but for developers who use frameworks it could be useful.

There’s a lot of use of private fields, getters, setters and even some use of slot ect.

He’s also got a small framework/ library for web components.
I haven’t used it so IDK how good it is.

I think some people cant feel comfortable developing without abstracting everything as much as possible… :smile: