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

101–110 of 200 posts

Re: Ways to make a web component

#101

Post by spankalee »

non-entity wrote: post #99
rishav_sharan wrote: post #60

It infuriates me that the concept of composable web pages using small templates/components is not baked into the html spec and supported by browsers. Every bit of code that we write in any programming language is made of composable bits which can be imported into other bits of code. But we cannot do anything similar with html. every time any attempt at having composable component based html is made, it gets mired dow…

I could have sworn several years ago, before React, Vue, Angular X started to pick up, that WebComponents were supposed to be that. That people were talking about how browsers would have built-in support for WebclComponents. I could be remembering wrong though.

Browsers do have built-in support for web components. You can extend HTMLElement in every current major browser.

Re: Ways to make a web component

#102

Post by c17r »

clairity wrote: post #31

is there any reason you can't write a web component with a block, a block, and a bunch of html? the wedging everything into js is messy, to say the least. it seems the main benefit is being reusable and tightly scoped, but with randomized class names, you could tightly scope the aforementioned bundle as well. even better would be if html added 'for' attributes to and tags, like labels have, so you could target nodes…

Saw this idea on a previous HN comment thread and was intrigued by the idea.

Re: Ways to make a web component

#103

Post by mshenfield »

georges_gomes wrote: post #73
mshenfield wrote: post #21

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 WebCom…

Co-author of the blog post here. My mistake is to call it FCP. This local benchmark only shows the performance of: - parsing the javascript code - creating the DOM node That was the only goal. We should have network simulation for the next update of the blog post to show some additional color. Good idea :thumbsup: Static + re-hydrating is actually built in Web Components (technically). "Only" tooling like Gatsby or N…

Thanks for clarifying! That's a fair point about web components having the capacity to be statically rendered and re-hydrated.

Re: Ways to make a web component

#104

Post by bob1029 »

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.

Blazor is fantastic. We've been using Blazor server-side for about 8 months now. The part that still hurts my brain is when I realize I am basically done with a new feature after I finish writing my business service. I can just inject & call it from the blazor component and directly draw whatever data without any mapping layer required.

I may have forgotten how to write controllers and juggle headers/query strings... It's really nice. Remember, every hour you spend writing some controllers or debugging query strings/serialization/status codes/et.al. is an hour not spent on your core business features.

Re: Ways to make a web component

#105

Post by agquick »

Our company had been looking to move our project away from Knockout.JS and on to Vue/React. I started playing around with native Web Components just because I like the idea of not being locked into a single framework.

However, I also wanted to keep using observables/computeds so I wrote a quick library that ties MobX with Native Web components, but has a Vue-like binding syntax.

Yes I know it’s yet another library, but it mainly just provides for a simple way to use MobX (an established library) with Web Components (a browser standard), and nothing else. It’s still very new but it works and I’d love feedback.

Example fiddle: https://jsfiddle.net/agquick/d0tsqar6/ Github: https://github.com/agquick/elemx.js

Re: Ways to make a web component

#106

Post by georges_gomes »

Joeri wrote: post #80
georges_gomes wrote: post #75

co-author of the blog post here. Thank you @kjhughes for sharing our work here :pray: I don't know you but I love you already :heart: :) I'm trying to comment where I have something to bring. If you have questions or maybe a list of things that you would like to see in the next update, please shoot at me! Many thanks

Many thanks for this, it's an excellent resource. A suggestion for a next iteration: it would be nice to see which approaches work in IE11 / legacy edge. From looking into web components it seems those browsers are the major stumbling blocks, and I know stencil has an ability to polyfill things on those browsers, but I don't know about the other solutions.

Thanks for the nice words :thumbsup: I'm adding polyfills/IE11 analysis in the TODO list! Great idea.

Re: Ways to make a web component

#107

Post by pierrebeaucamp »

bdcravens wrote: post #100
pierrebeaucamp wrote: post #95

Earlier quoted context omitted.

You're looking for XHTML

I don't recall components being in the XHTML spec.

Not in the 1.0 spec, but 1.1 brought modules. For example, MathML can be used as an XHTML module.

Mind you, there isn't exactly a 1:1 mapping between modules & web-components, with the former being 20 years old at this point.

Re: Ways to make a web component

#108

Post by aylmao »

Note: if you're building your whole page on top of a library, a larger library isn't necessarily bad.

If a library is larger because it does more, useful things, and this means you have to write less and/or smaller components, in a complex app the tradeoff is probably worth it.

Re: Ways to make a web component

#109

Post by allover »

sequoia wrote: post #67
spankalee wrote: post #54

Earlier quoted context omitted.

> Doesn't using a framework in this case mean that you also have to at least bundle that framework with the component? You should depend on any dependencies (including frameworks), but you shouldn't bundle them, exactly so that when an app is bundled it can do the efficient thing and share dependencies. > What happens if you want 10 components that each use a different framework? One reason to now use frameworks, but…

I downvoted this because these are (in my opinion) entirely theoretical and not practical answers. This reminds me of the "React is better than Angular(js) because look how compact and clean the API is compared to Angular!" type arguments. This implies that "React apps" are going to be less complex than Angularjs apps but the reality is anything but: large React applications tend to be just as heavyweight and hard to…

> large React applications tend to be just as heavyweight and hard to understand as Angular ones once you need a router, state manager, and 20 or 30 other "compact" libraries to do what you're trying to do.

I largely disagree with the comment you're replying to in its oversimplification of things, however, this simply isn't true. 'Create React App' plus 'React-Router' is literally all you need for the vast majority of applications.

And you don't need "20 or 30 other compact libraries", unless what you're doing is specialised and requires them.

The idea you need "a state manager" is an unfortunate fallacy, due to React/Facebook's history by accidentally implying a Flux-like solution should be added to augment React, when in fact so much more could be achieved by simply following React's component model, and React's built-in mechanisms for managing state.

Re: Ways to make a web component

#110

Post by jhk4 »

spankalee wrote: post #98
rishav_sharan wrote: post #60

It infuriates me that the concept of composable web pages using small templates/components is not baked into the html spec and supported by browsers. Every bit of code that we write in any programming language is made of composable bits which can be imported into other bits of code. But we cannot do anything similar with html. every time any attempt at having composable component based html is made, it gets mired dow…

The web components set of specs and proposals includes HTML Modules, Declarative Custom Elements, and Template Instantiation, the combination of which would give you exactly what you're asking for.

HTML Modules never shipped which is the biggest hole in the current Custom Elements ecosystem.
Post reply on HN