You often hear engineers comparing Web Components with React. Here's my take on it.
Web Components are spec. Your web framework isn't.
...
For further actions, you may consider blocking this person and/or reporting abuse
Except not for Safari. From developers.google.com/web/fundamen...
chromestatus.com/feature/467014692... with links to every major browser vendor status on the subject.
What's the solution here?
github.com/ungap/custom-elements-b... Enjoy :)
Thanks, but are we supposed to ignore Safari development team arguments then as not having much basis?
github.com/w3c/webcomponents/issue...
No, Safari development team has some valid points, however the rest of the browsers have decided to implement customized built-in elements. Why should Apple engineers continue to resist over implementation details at the cost of failing to enhance Accessibility features for the greater community? Customized built-in elements made it into the spec. At some point they should just accept it.
I don't have an answer to this. Maybe @webpadawan can chime in?
I do like polyfill author's comment github.com/w3c/webcomponents/issue...
Just wondering if safe to bring to my platform production code. We would like to extend
articleelement to starters.That GH thread should maybe be published as an e-book. Still wondering if I should read all of it.
It is better to ask @webreflection who is the author of the customized builtin elements polyfill about how much is it safe to use in production.
The only thing I'm not sure about is whether Safari already supports
customElements.upgradeused in that polyfill: github.com/ungap/custom-elements-b...If we are comparing Web Components to React, is there a create-react-app comparison?
Yes, almost all of the major UI web component based frameworks have this. A couple examples might be:
Angular:
Vue:
*EDIT: However, as Steve suggests, you shouldn't bloat your project unnecessarily with an application framework if all you need is just one or two simple web components.
Some of the web component libraries have that sort of thing:
github.com/ionic-team/stencil-comp...
github.com/CaptainCodeman/web-app-...
FWIW you don't need a lot to get started and IMHO create-react-app serves the most general of use cases so tooling like that can be hazardous for some projects. With web components all you need is a template index.html and some JavaScript and CSS. There are some polyfills, but they are minimal. None the less a starter project would be a decent idea or a CLI with scaffolding all the better. Parcel is primed for this kind of thing, so is Webpack. Rollup is even a fantastic idea here now that it can code spilt.
Thanks for those links.
I was looking around this past weekend for something that supported at least the following: TypeScript, Webpack, and Hot Module Reloading to make an app using Custom Elements. I only had an hour or two so I didn't want to write the Webpack config myself 😅 I ended up bailing because I couldn't find anything that looked like it was being actively developed.
Those two libraries you mentioned, neither has been touched for some months which makes me nervous relying on something that doesn't have an active community behind it.
Until there is a better community and tooling around Web Components, I will continue to sit back and watch.
I find this very interesting as someone who codes a lot of build tooling when something doesn't exist. Tools like create-react-app and Angular CLI only really serve generic use cases. The moment you want to do something else the tool doesn't you most likely have to roll your own, or extend the tool as is the case with Angular CLI.
It takes a lot of time to roll your own, so I sympathize, but if there were a tool for bundling Web Components it probably would only handle the most generic use cases.
My current workflow can be cherry picked from Readymade UI, a web component SDK I've been building just for kicks.
github.com/readymade-ui/readymade
My dev build is currently just TypeScript. I run
tscin--watchmode. In TypeScript 3.3--watchis using an incremental watcher by default.typescriptlang.org/docs/handbook/r...
The dev build isn't bundled, but I like that. It's fast.
The prod build uses rollup because well rollup is so easy to configure compared to anything else for me. Then I postprocess the output even more with PostHTML. PostHTML is a wonderful tool that transforms HTML templates. That's how I inlined nearly everything in the Github pages documentation for Readymade UI.
readymade-ui.github.io/readymade/
HTML Modules are coming and they will be a game changer.
Have you guys taken a look at Stencil?(stenciljs.com/docs/introduction)
React is just one framework you can use for implementing web components. I feel like this article aids and confuses rather than disputes the current trend of treating React as its own component entity rather than as one implementation of web components
Edited to hopefully clarify.
Very cool, thanks @steveblue
I would love to take advantage of web components, but my understanding is that the polyfills are flaky and that there aren’t enough component libraries out there that are built directly on web components (yet). I guess I’m just holding out till things stabilize a bit. But the future is very exciting. Btw, if someone does know of a web component library that has all the major UI widgets... I would be very very interested.
The primary one that comes to mind is Ionic. Their latest version is all web components, built with Stencil (their typescript-powered WC compiler). Not a lot of other pre-built options though.
This is a useful list: open-wc.org/faq/component-librarie... and lots more just around the corner...
@steveblue , Very nice read but its time to update your article (browser support caniuse.com/?search=web%20components)! Also, consider your statement about state machine, since an event driven architecture with web components needs none: dev.to/weedshaker/dom-and-the-even...
Updated to reflect Microsoft Edge supporting custom elements v1.
Chromium based Edge will fully support CEs, as does Safari since 10.1. The PF are for pre-Chromium Edge and IE11. So, you really can use Web Components today.
Informative discussion guys. Only 5 days ago Vue 3.2 release incorporated a very easy way to create web components. blog.vuejs.org/posts/vue-3.2.html