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

181–190 of 200 posts

Re: Ways to make a web component

#181

Post by nogridbag »

nonbirithm wrote: post #82

"Compare coding style, bundle size and performance of 33 different ways to make a Web Component." I thought this was a joke at first. But it suddenly made sense in the context of modern web frameworks and micropackages and all these different ways of doing the same thing. But wait, I thought. Surely it was a typo and they meant to type "3" and fat-fingered it instead? But no. It really is 33. Which one of those 33 wo…

I was surprised by the low number too. I'm much happier being a backend developer where I have a choice of over 400 frameworks in over 30 programming languages:

https://www.techempower.com/benchmarks

Re: Ways to make a web component

#182

Post by sergeykish »

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

CSS pollutes global without or shadow root. Even simpler variant:

    
      -
      
      +
Custom elements is just a mutation observer with callbacks, can be used with DOM 0 as well:

    class MyCounter extends HTMLElement {
      connectedCallback() {
        this.attachShadow({mode: 'open'}).innerHTML = `......`
      }
    }
    customElements.define('my-counter', MyCounter)

Re: Ways to make a web component

#183

Post by sergeykish »

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.

Custom Elements was born in jQuery era, all it does is calls

    $('#myTable').DataTable()
automatically, there was tiny polyfill

Re: Ways to make a web component

#184

Post by sergeykish »

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.

XML:

    ...
XSLT:

    
      ...
      
        
          -
          
          +
XSLT looks ugly but only because we should not edit plain text XML (same for markup). is a limited version of XSLT.

Re: Ways to make a web component

#185

Post by pzmarzly »

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…

Alternatives exist in:

Ruby https://docs.stimulusreflex.com/

Python https://github.com/jonathan-s/django-sockpuppet

PHP https://laravel-livewire.com/

Re: Ways to make a web component

#186

Post by DonHopkins »

BigJono wrote: post #172
jjcm wrote: post #167

I've been working on a webcomponent based reddit/patreon competitor for about a year now, and one thing I found was how incredibly easy it was to spin up my own micro framework. I would highly encourage people to give it a shot. It's just going back to basics and working with class-based inheritance. It will take you a day to write out the basic functions you will need for 95% of your components, and you'll be left w…

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.

Re: Ways to make a web component

#187

Post by robertoandred »

kzzzznot wrote: post #176
allover wrote: post #109

Earlier quoted context omitted.

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

Aren’t form validation and http also separate libraries for React?

Only if you need form validation or http options the browser doesn't provide...

Re: Ways to make a web component

#188

Post by robertoandred »

bob1029 wrote: post #122

I have a server-side rendering approach that can get instantaneous paint of arbitrarily-complex views after pulling down index.html and exchanging a single pair of websocket messages. Once the initial page is loaded, redraws are as fast as you can get packets between the machines plus 2-3ms for decoding. It involves some very unorthodox methodologies and has latency constraints (similar to Google Stadia hosting model…

I assume that "narrow range of applications" doesn't include applications that use text, images, or selectable/interactive elements.

Re: Ways to make a web component

#189

Post by clairity »

shhsshs wrote: post #146
clairity wrote: post #45

Earlier quoted context omitted.

that's pretty close to what i'm thinking of, but still has some limitations (from https://vuejs.org/v2/guide/single-file-components.html ): • Global definitions force unique names for every component • String templates lack syntax highlighting and require ugly slashes for multiline HTML • No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out • No build step…

You may be misunderstanding (or I’m not understanding your intent). Single-file components were made specifically to overcome those issues, as mentioned on the page you linked.

apologies, i did misread the page i quoted from. it does seem like i need to explore these single-file vue components more.

Re: Ways to make a web component

#190

Post by clairity »

ww520 wrote: post #163
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…

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).
Post reply on HN