Earlier quoted context omitted.
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.
Ways to make a web component
151–160 of 200 posts
Re: Ways to make a web component
#152It 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).
Can you go into any detail why vue components are so large in comparison to every other example in the `Estimated Bundle size` chart?
Re: Ways to make a web component
#153Earlier quoted context omitted.
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... .
Is gitlabs down?
No, broken link, the linked code isnt publicly accessible on Gitlab apparently.
Re: Ways to make a web component
#154Earlier quoted context omitted.
Browsers do have built-in support for web components. You can extend HTMLElement in every current major browser.
And such extension is a major PITA to do. The API is atrocious, like most of the DOM API is.
What's your suggestion for a better API?
You can't just say "React" though, you have to show how it actually integrates with the DOM that we have. "Throw away the DOM we have" isn't a realistic option either.
Re: Ways to make a web component
#155Earlier quoted context omitted.
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.
This is in fact the first example in the article.
Re: Ways to make a web component
#156It 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…
In other words, HTML is unabstractable. I've been wishing to be able to type this since 1997. my tag! Same with css. There are workarounds we use because abstraction is a requirement to code. Somehow the web components spec even seems like a workaround, for which we have many workarounds... and around and around we go :)
The first step of that kinda exists, is for HTML that shouldn't be rendered immediately. However, you need javascript to grab it and actually make it reusable.
Re: Ways to make a web component
#157is 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, using the template element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/te... I tried that for webcomponents, but I found more to my taste to actually have everything in my javascript file rather than to jump between files (it's not that messy if you keep your components smalls).
I experimented with this some years ago, building my own mini-framework for components. The main system provided a global hook that javascript within the template file could attach itself to, so everything for a single component did exist in a single file. So it is doable.
(I liked that part of my system, but I'd rewrite about half of it if I wanted to use it again)
Re: Ways to make a web component
#158Note: 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.
Webpack tree-shaking and automatically chunking into multiple tiny js files, which can be selectively loaded only when needed, is also super helpful here.
Re: Ways to make a web component
#159I'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…
Sums up "state of the art" web we're using right now = absolute mess, bail out if you can, save yourself, stay sane
The entire ecosystem got a bit too crazy for me as well, but there are a few sane places if you go looking. I settled on the Elm ecosystem after a long period of consideration. Probably the only good thing to come out of having too many options is the higher probability of finding one that suits your perspective.
Re: Ways to make a web component
#160I love the simplicity of StencilJS. Not sure why it's adoption is so low but those guys have put a lot of work. Much better than what Google is doing with Lit Element.
Thanks! I wouldn't say Stencil's option is low. It's being used in some pretty major apps today, like Apple Music, Amazon music, and powering the next version of AWS Amplify components. Not to mention powering every Ionic Framework component which is upwards of 15% of the app stores (not all use latest w/ WCs however). One downside to that is npm stats won't show dependency network effects with stencil because it is…
Whoops, meant popularity, not option