4 ms·

I'm still super gung-ho about web components. The progressive browsers are committed to making it happen. The picture is not so bleak for custom elements: http

I'm still super gung-ho about web components. The progressive browsers are committed to making it happen. The picture is not so bleak for custom elements: https://caniuse.com/#feat=custom-elementsv1 https://caniuse.com/#feat=custom-elementsv1 Firefox also just announced that Shadow DOM arrived in a nightly: https://bugzilla.mozilla.org/show_bug.cgi?id=1460069 https://bugzilla.mozilla.org/show_bug.cgi?id=1460069 https://news.ycombinator.com/item?id=17172613 https://news.ycombinator.com/item?id=17172613 Contrary to popular belief, you can start using web components WITH just custom elements and WITHOUT shadow DOM! https://twitter.com/rob_dodson/status/961780022628331520 https://twitter.com/rob_dodson/status/961780022628331520 I jumped onto this bandwagon early and struggled with Polymer 2 and HTML imports (ugh!). Now they have made the same realizations and moving forward LitElement will lead the charge toward usable and lightweight web components: https://www.polymer-project.org/blog/2018-05-02-roadmap-update.html https://www.polymer-project.org/blog/2018-05-02-roadmap-upda... https://github.com/Polymer/lit-element https://github.com/Polymer/lit-element Here's how you can get started: https://github.com/Polymer/pwa-starter-kit/wiki https://github.com/Polymer/pwa-starter-kit/wiki It's not paradise, there are kinks to work out, but ultimately one can make production worthy apps with web components TODAY (polyfills available). You can sleep at night not worrying that your library will become the new jQuery someday: https://twitter.com/SaraSoueidan/status/999645120155746304 https://twitter.com/SaraSoueidan/status/999645120155746304

danShumway 8y ago
I know a lot of people are excited about them, but I still have problems with how web components are being designed. Custom elements feel like we're moving in the opposite direction from semantic markup - they just degrade into divs, so they're not particularly meaningful unless the DOM used to construct them is also descriptive and meaningful. So immediately we get Shadow DOM which hides a bunch of stuff from the end user. It's really clearly bad for accessibility and user control. Beyond that, it's not clear to me what problem we're solving: - Integrated templates into HTML: Okay, I get it, potentially useful. You don't need custom elements for that. - Blocking global CSS from styling your components: Valid, but this is a really hacky way to solve that problem. What we'd prefer is CSS boundaries that don't require JS to use. The main thing seems to be that people think the code looks cleaner than using divs and CSS classes. Which... great, I kind of agree. But why should I be so excited about what basically boils down to syntactic sugar? The one super useful, really exciting part of web components was HTML import. HTML imports would have been amazing. But that effort has been messed up as well - it relies on Javascript. We can already use Javascript to make AJAX requests and append content to the DOM. What we can't do is include a single header across multiple pages without building either a webapp or a preprocessor. I think Mozilla is in the right to have dragged their feet so much on this. Beyond shadow DOM, which I'm nonplussed about, what is now possible with modern web components that wasn't already possible 3-5 years ago?
aphextron 8y ago
Another +1 for web components. We have been using this paradigm exclusively for new features and it's really fantastic. Template literals eliminate the need for things like JSX and you can just use small simple libraries for state management and data binding. Keep every web component in it's own NPM module with it's own test suite and dependency resolution, and have a single package.json that describes your entire app.
- lioeters 8y ago
  Would you recommend any specific combination of libraries boilerplate/starter kit? (I suppose I should just search npm, GitHub..) I feel like there are almost too many libraries for, i.e., transforming template literals to HTML, data binding, state management, etc. I know "do one thing only", but it can be daunting to figure out an optimal integrated setup. Is there a popular/well-used set of tools for the kind of web-component based projects that you're describing? Polymer is one, I recall - wasn't too keen on it last time I looked at it, would prefer more minimal/modular..
  - deleted 8y ago
    [deleted]
DivisionSol 8y ago
This is one of the reasons I'm such a fan of Vue.js. Using the vue-loader, you write single-file 'components' which all their included templating, logic, and style. While not EXACTLY what the promise of "Web Components"/"Custom Components" offers, it is definitely a good step forward in thinking on how to modularize all the pieces of the front-end. https://vuejs.org/ https://vuejs.org/ https://github.com/vuejs/vue-loader https://github.com/vuejs/vue-loader
- deleted 8y ago
  [deleted]
- keyle 8y ago
  yep that and vue-cli and you have all the framework you need including a dev server and a test framework.
dmitriid 8y ago
> I'm still super gung-ho about web components. Please tell me how web components solve the issue described in the article, namely that one of UI? I am not even going to get started on the extremely limited capabilities of these components and the need for yet another batch of dozens of frameworks to make them even remotely useful.

danShumway 8y ago

I know a lot of people are excited about them, but I still have problems with how web components are being designed. Custom elements feel like we're moving in the opposite direction from semantic markup - they just degrade into divs, so they're not particularly meaningful unless the DOM used to construct them is also descriptive and meaningful. So immediately we get Shadow DOM which hides a bunch of stuff from the end user. It's really clearly bad for accessibility and user control. Beyond that, it's not clear to me what problem we're solving: - Integrated templates into HTML: Okay, I get it, potentially useful. You don't need custom elements for that. - Blocking global CSS from styling your components: Valid, but this is a really hacky way to solve that problem. What we'd prefer is CSS boundaries that don't require JS to use. The main thing seems to be that people think the code looks cleaner than using divs and CSS classes. Which... great, I kind of agree. But why should I be so excited about what basically boils down to syntactic sugar? The one super useful, really exciting part of web components was HTML import. HTML imports would have been amazing. But that effort has been messed up as well - it relies on Javascript. We can already use Javascript to make AJAX requests and append content to the DOM. What we can't do is include a single header across multiple pages without building either a webapp or a preprocessor. I think Mozilla is in the right to have dragged their feet so much on this. Beyond shadow DOM, which I'm nonplussed about, what is now possible with modern web components that wasn't already possible 3-5 years ago?

aphextron 8y ago

Another +1 for web components. We have been using this paradigm exclusively for new features and it's really fantastic. Template literals eliminate the need for things like JSX and you can just use small simple libraries for state management and data binding. Keep every web component in it's own NPM module with it's own test suite and dependency resolution, and have a single package.json that describes your entire app.

lioeters 8y ago
Would you recommend any specific combination of libraries boilerplate/starter kit? (I suppose I should just search npm, GitHub..) I feel like there are almost too many libraries for, i.e., transforming template literals to HTML, data binding, state management, etc. I know "do one thing only", but it can be daunting to figure out an optimal integrated setup. Is there a popular/well-used set of tools for the kind of web-component based projects that you're describing? Polymer is one, I recall - wasn't too keen on it last time I looked at it, would prefer more minimal/modular..
- deleted 8y ago
  [deleted]

DivisionSol 8y ago

This is one of the reasons I'm such a fan of Vue.js. Using the vue-loader, you write single-file 'components' which all their included templating, logic, and style. While not EXACTLY what the promise of "Web Components"/"Custom Components" offers, it is definitely a good step forward in thinking on how to modularize all the pieces of the front-end. https://vuejs.org/ https://vuejs.org/ https://github.com/vuejs/vue-loader https://github.com/vuejs/vue-loader

deleted 8y ago
[deleted]
keyle 8y ago
yep that and vue-cli and you have all the framework you need including a dev server and a test framework.

dmitriid 8y ago

> I'm still super gung-ho about web components. Please tell me how web components solve the issue described in the article, namely that one of UI? I am not even going to get started on the extremely limited capabilities of these components and the need for yet another batch of dozens of frameworks to make them even remotely useful.