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

191–200 of 200 posts

Re: Ways to make a web component

#191

Post by hoten »

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…

Would you consider comparing the results of a Lighthouse report?

Re: Ways to make a web component

#192

Post by cletusw »

clairity wrote: post #190
ww520 wrote: post #163

Earlier quoted context omitted.

You can use @import to include shared CSS files. HTML import is still pending in the standard committee; should come soon. For now HTML template needs to go with the Javascript. I usually structure a component like the following. The nice thing about WebComponent is everything is scoped to the component and you can have pretty generic names for things except the defined component name ("component1" in this case). /co…

interesting, i look forward to when html imports come about. it's strange that this most fundamental component weren't among the first things you could import (i guess plain old links subsumed some of that need).

HTML Imports were actually among the first (shipped in Chrome), but then ES Modules/import/export took off and now spec authors want to reconcile the two before standarizing.

Re: Ways to make a web component

#193

Post by johnmw »

staycoolboy wrote: post #40
sillysaurusx wrote: post #25

Earlier quoted context omitted.

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).

Except for the pure HTML5 solutions, everything else uses a JS framework.

I don't know why the sibling reply comment to this by golemiprague was killed.

My understanding is that he is correct - in terms of requiring a framework to be bundled with your code. Svelte is not a framework that needs to be bundled with your code, instead it injects helper code during the transpilation step and the result has no dependencies.

If I'm incorrect I'd appreciate the trigger happy person to explain why rather than killing this comment.

Re: Ways to make a web component

#194

Post by BigJono »

DonHopkins wrote: post #186
BigJono wrote: post #172

Earlier quoted context omitted.

Don't be stupid, how do you know those 26 lines of code are free of bugs? They're not battle tested and you're just re-inventing the wheel instead of following best practices.

That's right, we should all follow best practices and use 26,000,000 lines of Angular code, which has been written and debugged by thousands of people, battle tested and wounded and scarred in wars we've never heard of and don't care about, and that we will never get around to reading all of.

Those 26 million lines of code have been engineered over the better part of a decade to perfectly cater to every possible use case. To not leverage those productivity gains would be insane. You wouldn't build your own car would you?

(/s, btw)

Re: Ways to make a web component

#195

Post by georges_gomes »

hoten wrote: post #191
georges_gomes wrote: post #73

Earlier quoted context omitted.

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…

Would you consider comparing the results of a Lighthouse report?

Sounds good. Like have some sort of generic page with components and look for lighthouse score. I'm adding to the list!

Re: Ways to make a web component

#196

Post by orange8 »

rishav_sharan wrote: post #74
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…

I tried that using blocks, a few years ago. my biggest problem was simply that I still had to add all my templates to a single long html file. And that really feels suboptimal. I had a scaffolded page structure at top. and then dozens of template sections following it. and then as some templates are supposed to call other templates (form inside page section) there was a clear hierarchy but my html file was flat and i…

> my biggest problem was simply that I still had to add all my templates to a single long html file.

The alternative (atleast when using frameworks like React and Vue with packagers like webpack is having it all in a single long html file. Which is just shifting markup from html to js. The other alternative is to dynamically load the html via ajax calls.

> I had a scaffolded page structure at top. and then dozens of template sections following it. and then as some templates are supposed to call other templates (form inside page section) there was a clear hierarchy but my html file was flat

Here you could make use of the document.ready event, and a js script that automatically parses and saves all tag by id. That way, the templates calling other templates have a single source of truth for all dependent templates. You could also combine this will lazy loading via ajax calls.

> I really wanted to be able to breakup my html file into smaller composable ones without having to do that in JS. but there is no current solution for html importing other html files

There is no getting around JS if you want client side dynamic rendering - that's what its for. HTML is for static content, css for styling, JS for everything else.

Re: Ways to make a web component

#197

Post by deergomoo »

temp42 wrote: post #141
deergomoo wrote: post #131

Earlier quoted context omitted.

I would 100% be in favour of an alternative to the DOM designed specifically for building rich application UIs. With upcoming features like portals it could even be embedded within existing HTML documents, or vice versa. I’ve griped about this before, but I firmly believe that the trope of JavaScript developers needing a million dependencies and constantly reinventing the wheel stems from the fact that you have to do…

Not that it diminishes your general point, but are you aware of the datalist element? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...

Damn, I actually didn’t know about that! Looks like it doesn’t enforce values like a select does, but I think that would be a lot less work to patch over with JS than implementing a whole custom component.

Re: Ways to make a web component

#198

Post by hoten »

georges_gomes wrote: post #195
hoten wrote: post #191

Earlier quoted context omitted.

Would you consider comparing the results of a Lighthouse report?

Sounds good. Like have some sort of generic page with components and look for lighthouse score. I'm adding to the list!

Sweet, thanks!

Feel free to DM me if you need any help. twitter is in bio.

Re: Ways to make a web component

#199

Post by yellowsir »

6510 wrote: post #170
skratlo wrote: post #59

Earlier quoted context omitted.

Sums up "state of the art" web we're using right now = absolute mess, bail out if you can, save yourself, stay sane

Ignore what people say and just write everything yourself. https://jsfiddle.net/4qkpLw3c/ ghee, that was hard????

i like the keyboard support :) +1

Re: Ways to make a web component

#200

Post by edisonywh »

elcritch wrote: post #162
edisonywh wrote: post #86

Earlier quoted context omitted.

Have you heard about Phoenix LiveView? Sounds like what you want. It's a Rails-like framework written in Elixir (piggyback-ing off 30 years of BEAM), and LiveView changes the game by allowing you to build rich front-end application from your backend. The way it works is that it serves you static HTML on initial load (yay SEO), and then it establishes a websocket connection to the server (very efficient thanks for BEA…

Agreed, Elixir LiveView is a lot like what @sequoia describes. I use LiveView to handle creating the more complex logic, data handling (and caching) on the server. For UI layout you can get surprisingly far with mostly CSS nowadays with small events back to the server just changing a CSS class here and there. Oddly despite the server round trip, the responsiveness is great. Here’s a demo I built for a small wrapper a…

Right? I use LiveView with Tailwind, and for those little extra interactions, Alpine works amazingly well. Such a dream stack! Alpine was created by Caleb for LiveWire (inspired by LiveView), which is why it works so well too :)
Post reply on HN