Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ways to make a web component

webcomponents.dev

Post reply on HN
Print view View original

21–30 of 200 posts

Re: Ways to make a web component

#21

Post by mshenfield »

First contentful paint (FCP) is basically the same (+-10ms) from React down to a raw HTMLElement. I guess at some point appending elements to the DOM is the bottleneck, rather than the overhead of parsing JS and the efficiency of said JS.

To get a faster FCP, statically rendering the component to HTML and re-hydrating it in the client (using Gatsby, for example) seems like it will have a bigger impact than the WebComponent library used. Unless the client is bandwidth constrained of course.

Re: Ways to make a web component

#22

Post by yitianjian »

asutekku wrote: post #7

Super cool, thanks for this! Now regarding the results: Are there any actual usecases where one would choose Angular over some other library? From what i’ve seen from before and now this, i am not aware of a single reason why would anyone choose to use it, if they are not constrained by legacy codebase or if there are no stubborn developers who swear by it.

1) These are benchmarks just using a counter - a lot of libraries perform really well using these minimal POCs but fail complete in real world applications (whether due to library performance, missing features, etc.)

2) This is sticking Angular inside a WebComponent with the minimal amount to make a counter - but you wouldn't take a heavy library to make a counter. Imagine React + Redux + Redux-Observables + StyledComponents just to make a counter. It's like hitting a nail with a ICBM.

Re: Ways to make a web component

#23

Post by eeJah9to »

I've rewrote the frontend of one of my personal apps from react to webcomponents lately. For me, the most interesting aspect was that it's part of standards, requiring no dependency, so it means that I can use this app for decades without having to maintain it.

For the same reason, only the first example in this page would do for me (the one based on standard without using any library). But I suppose that for actually publishing something, such library would be needed, if anything for polyfills for older browsers (but then again, we don't expect published work to stand for decades without changes, so maybe the call for standardized technology is not as strong there).

Re: Ways to make a web component

#24

Post by spankalee »

hn_throwaway_99 wrote: post #17
spankalee wrote: post #15

Earlier quoted context omitted.

This isn't a collection of ways to "build components for the web" though, it's a set of ways to build "web components" the W3C component standard that ships natively in all modern browsers. Even those these components are built with different libraries, they are all interoperable and require no framework to use them, so I'd say this points to the defragmented future of web development.

Edit: D'oh, I misread it, sorry. You misread this post. The left panel has all the different popular libraries and frameworks that can be used to build a web component, including things like React, Svelte, Vue, etc.

I actually helped contribute to this list. If you look at the React, Svelte, and Vue, examples, they are specifically being wrapped as standard web components.

Re: Ways to make a web component

#25

Post by sillysaurusx »

badsectoracula wrote: post #20

I'm not into web development at all so this sounds very new to me, but aren't components in general meant to be self-contained so that they can be reused as "building blocks" for larger applications (or pages, i guess)? Doesn't using a framework in this case mean that you also have to at least bundle that framework with the component? What happens if you want 10 components that each use a different framework? Or some…

Nope, your thoughts are all essentially correct. The answer is “yes” to all of them; even the ones where it seems that “yes” would be contradictory.

Bundle everything? Yep. Self contained? Yep. 10 components that open connections to 10 different severs? Yep.

The web is so massive that there is a way for pretty much everything (though for some reason webdevs try not to admit this).

Re: Ways to make a web component

#26

Post by ceo_tim_crook »

[deleted] wrote: post #18
nend wrote: post #3

Alternate title: The fractured state of web UI design explained using a simple counter. I say that only slightly in jest, as it is a neat way to show all (or most) of your options. Although it doesn't have my at-the-moment favorite way to make web components, blazor/web assembly. For me, it's made front-end development fun again, which I haven't enjoyed in a long time.

[deleted]

https://fsbolero.io

Re: Ways to make a web component

#28

Post by the-dude »

eeJah9to wrote: post #23

I've rewrote the frontend of one of my personal apps from react to webcomponents lately. For me, the most interesting aspect was that it's part of standards, requiring no dependency, so it means that I can use this app for decades without having to maintain it. For the same reason, only the first example in this page would do for me (the one based on standard without using any library). But I suppose that for actuall…

> so it means that I can use this app for decades without having to maintain it.

That seems highly optimistic to me.

Re: Ways to make a web component

#29

Post by tashoecraft »

badsectoracula wrote: post #20

I'm not into web development at all so this sounds very new to me, but aren't components in general meant to be self-contained so that they can be reused as "building blocks" for larger applications (or pages, i guess)? Doesn't using a framework in this case mean that you also have to at least bundle that framework with the component? What happens if you want 10 components that each use a different framework? Or some…

So for the angular implementation, the compiler will only include the necessary parts of the framework with the web component. So you’re only including the bits you need for the component to be usable.

There are ways you can coordinate the components and their dependencies to rely on the same versions, but this will probably assume they are your components.

Svelte does something kind of similar where it doesn’t share the same bits between components, but according to the creator it the theoretical point at where it would be more beneficial to have share is so far off to be pointless. So presumably if you have something that efficient you won’t have to worry so much, I think we are a ways away

Re: Ways to make a web component

#30

Post by afarrell »

nend wrote: post #3

Alternate title: The fractured state of web UI design explained using a simple counter. I say that only slightly in jest, as it is a neat way to show all (or most) of your options. Although it doesn't have my at-the-moment favorite way to make web components, blazor/web assembly. For me, it's made front-end development fun again, which I haven't enjoyed in a long time.

> fractured

Compared to the myriad ways for different cultures to make chicken with rice, this is nothing.

Post reply on HN