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

11–20 of 200 posts

Re: Ways to make a web component

#11

Post by Kuinox »

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.

Vue is great to make small webapp. Also wikipedia chose Vue to remake their UI IIRC. React is even simpler, but I really hate it for technical reasons.

Re: Ways to make a web component

#12

Post by spankalee »

alfonsodev wrote: post #2

It is very interesting that it includes the build size including compressed size, it makes me thing that one of the reasons that we don't have a popular repository of interchangable Webcomponents yet, is that if you commit to a framework to make things easier, then the size of the bundle is easier to justify if you keep all the components made within the same framework. Importing components that have been made with d…

This is a fine state to be in now. The first priority of web components is to make components interoperable, so that at least you can use components built with different libraries together.

Meanwhile, the size of modern rendering libraries has dropped significantly, an order-of-magnitude less than React/Angular. This will continue as JS and web platform APIs advance. Proposals like Template Instantiation would finally give the DOM a good pattern for fast updates and reduce sizes even further.

Re: Ways to make a web component

#13

Post by EGreg »

Kuinox wrote: post #11
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.

Vue is great to make small webapp. Also wikipedia chose Vue to remake their UI IIRC. React is even simpler, but I really hate it for technical reasons.

We are working to document Q.js out of our entire platform becauss it can be used to make much simpler to understand web components, which work seamlessly with SPA pages, events and more:

https://qbix.com/platform/guide/tools

https://github.com/Qbix/Platform

Re: Ways to make a web component

#14

Post by spankalee »

CivBase wrote: post #4

This is neat, but I wish there were more examples than just a counter. I would never use something like Angular, React, or Vue to implement something so trivial.

Yeah, the example is far too simple to exercise the libraries and would be much better implemented without a library at all.

But then, this is a great part about web components: you can implement a single component however you want, including with no dependencies, and still use it like you would have if you built it with a full-featured library. You can use it in Angular or React even.

Re: Ways to make a web component

#15

Post by spankalee »

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.

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.

Re: Ways to make a web component

#16

Post by M2Ys4U »

illumanaughty wrote: post #10
CivBase wrote: post #4

This is neat, but I wish there were more examples than just a counter. I would never use something like Angular, React, or Vue to implement something so trivial.

This distills the differences into the simplest possible example, which given the number of examples is incredibly useful. Also if you're in a React project, yes, you would use it for a counter. Obviously you wouldn't use React for just a counter, but it's a great way to show the basics of working with each option.

>Obviously you wouldn't use React for just a counter

You probably shouldn't, but there are a lot of people who reach for a React component to do anything on the web.

Re: Ways to make a web component

#17

Post by hn_throwaway_99 »

spankalee wrote: post #15
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.

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.

Re: Ways to make a web component

#18

Post by [deleted] »

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]

Re: Ways to make a web component

#19

Post by Bjartr »

sillysaurusx wrote: post #8

GPT-3 has an interesting contribution to this: https://twitter.com/sharifshameem/status/1284095222939451393... Tell it what you want in plain English, then it builds you a web component in a random language that happens to be React. I wonder if in the future we’ll be comparing the size of components generated by an ML model...

It's not random, it would have been part of the prompt, like his earlier prototype

https://twitter.com/sharifshameem/status/1282692481608331265...

Re: Ways to make a web component

#20

Post by badsectoracula »

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 of them use the same framework but different versions? What about the same version, does that get duplicated for each component or they get shared?

Also are these components meant to be "bundled" with your code or you are supposed to source them from their "home" server? In the latter case does that mean that a site using 10 components will open connections to 10 different servers (one for each component, assuming all components are from different developers)?

Or am i missing the point completely? TBH i think of "components" as in Lazarus, Delphi, .NET, etc (where you have reusable components like buttons, labels, input boxes, etc but also nonvisual stuff like timers, imagelists, etc).

Post reply on HN