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

111–120 of 200 posts

Re: Ways to make a web component

#111

Post by nona »

edisonywh wrote: post #86
sequoia wrote: post #70

Web components to me represent the architecture I’d like to have. I think a good arch could be: 1. Build a rails/django type site, make everything work vanilla http+html etc. 2. Create standalone web components for the places you need some more interactivity, like type-ahead search box, “click to add” type thing, or a datatable So most of your performance stuff could be handled/improved on the server, focus on aggres…

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…

Another one worth a mention is StimulusReflex https://docs.stimulusreflex.com/

Real-time stimulus + rails.

Re: Ways to make a web component

#112

Post by aylmao »

georges_gomes wrote: post #78
staycoolboy wrote: post #43

It would be great to include metrics on: 1. size of framework javascript required to load first 2. tooling to compile. For example, the Vue.js works without tooling, but the React w/Class requires command line tools to build before the site is ready. That's a HUGE difference, IMHO.

co-author here. 1. The bundle size barcharts shows the component size (in light blue) and the framwwork size (darrk blue) 2. The Bundle Analysis chapter contains a description of the build tooling use for each component. Vue can be used without build tooling if you choose to use the Vue lib with the compiler included but we use the pre-compiled way for max performance and smaller Vue runtime (without compiler).

> Vue can be used without build tooling if you choose to use the Vue lib with the compiler included but we use the pre-compiled way for max performance and smaller Vue runtime (without compiler).

+1. And likewise, you can use React without a build step too, though of course it is slower. [1]

[1] https://shinglyu.com/web/2018/02/08/minimal-react-js-without...

Re: Ways to make a web component

#113

Post by crazygringo »

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…

Your frustration is understandable, but so too is why they never were -- HTML was never intended to be a programming language or component-based.

HTML was originally meant to be page-based. And pretty much everything added to it (CSS, JavaScript) is scoped to the page. (Some data storage like cookies is scoped to the domain.)

So shoehorning a "component" model to what is fundamentally page-based is essentially an impossible task to do elegantly. Either you wall components off in sandboxes and break the entire premise of the page having control ("why can't I modify the style of my component anymore with the page's CSS?!"), or your components are extremely leaky and accidentally stop working because of page-level CSS and JavaScript interfering.

So we have a ton of different component models that use different tradeoffs.

Obviously if HTML/CSS/JavaScript were being built from scratch today as a platform for apps, it would probably be designed extremely differently, very much around contained components. But that's not what it grew out of historically.

Re: Ways to make a web component

#114

Post by georges_gomes »

agquick wrote: post #105

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, b…

I love this creativity :) We should have you in the next update of the blog post!

Re: Ways to make a web component

#115

Post by aylmao »

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…

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

I mean, you can also do that with React. Just don't update the library. The reason a web-component for decades without maintenance is because you won't be using all the new features— same thing.

Re: Ways to make a web component

#116

Post by clairity »

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…

thanks for sharing your experience, and agreed that being able to compartmentalize in separate, composable files is a desirable feature.

Re: Ways to make a web component

#117

Post by fuubi »

staticvar wrote: post #64
staticvar wrote: post #61

Earlier quoted context omitted.

I appreciate how Web Components are not opinionated meanwhile Component libraries are free to innovate and build on the Web Component foundation.

There are also simpler ways to write vanilla Web Components. Here's an example of the counter component written in what I find a simpler fashion. https://gist.github.com/rjsteinert/779d94dfc886723c2967a6f5f...

That looks very clean - cool! I applied the redux pattern to WebComponents a while ago https://gitlab.com/f.parrillo/web-components/-/tree/master/s... .

Re: Ways to make a web component

#118

Post by spankalee »

jhk4 wrote: post #110
spankalee wrote: post #98

Earlier quoted context omitted.

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.

HTML, CSS, and JSON Modules are currently blocked by Import Conditions, which is going for stage 3 at the next TC39.

Re: Ways to make a web component

#119

Post by georges_gomes »

jerf wrote: post #85
georges_gomes wrote: post #77

Earlier quoted context omitted.

Yes, the counter is simple. One reason is obviously that writing something in 30+ different framework that you need to "learn" is quite some work :) (10x more that I initially thought :D) The other reason is that a simple component actually amplify the cost of the framework. And if you think about it, with a more complex component, what you have is more HTML, more CSS and more JS but they are essentially always the s…

"One reason is obviously that writing something in 30+ different framework that you need to "learn" is quite some work :)" Ah, this is where you can use the Internet to your advantage. If you ask for help in advance, you generally won't get it, but if you post something broken or dodgy people will come out of the woodwork to correct you. So you don't need to work so hard to be correct. Just post something. Anything.…

It's amazing but you are probably right :D
Post reply on HN