6 ms·

I love web components and am bullish on them breaking us out of the current frontend hellscape we have created for ourselves. I was recently able to give a shor

by burcs 2y ago

I love web components and am bullish on them breaking us out of the current frontend hellscape we have created for ourselves. I was recently able to give a short talk on the future of frontend, and it seemed like a lot of other people are hopeful for a way out as well. As far as performance we built out a data table for our DB GUI that can load in hundreds of thousands of rows and the scrolling through is still buttery smooth. We actually are getting ready to release our web component library, it's a bit early and rough around the edges but would love to get some more eyes on it! www.astra-ui.com

candiddevmike 2y ago
The only way to get out of the current front end hell IMO is if we get client side import: https://github.com/whatwg/html/issues/2791 https://github.com/whatwg/html/issues/2791
- askonomm 2y ago
  I mean <script type="module"></script> can do ECMAScript module imports.
- meiraleal 2y ago
  That's a solved problem. You can create a custom element for that with some 5 lines of code. Or use one ready: https://github.com/justinfagnani/html-include-element https://github.com/justinfagnani/html-include-element
  - PaulHoule 2y ago
    And that’s exactly what some people don’t want!
    - meiraleal 2y ago
      Some people will never be happy
- arcbyte 2y ago
  I'm aghast at the comments in that thread. They are truly asleep at the wheel. No wonder the front end is such a disaster with those mindsets running the show.
  - lelanthran 2y ago
    > I'm aghast at the comments in that thread. They are truly asleep at the wheel. And the wheel that they're at is the one in a clown car. Which is driving off a cliff. Just having a custom element `<my-include-html remote-src='...'>`[1] is enough to forgo 50% of the reason for using a front-end framework with a build-step. [1] One that executes scripts, allows `<style>` tags, etc.
- halfcat 2y ago
  Would this be different from using HTMX to load an HTML partial on page load? Something like: <div hx-trigger="load" hx-get="/header.html"></div>
stavros 2y ago
Why aren't web components there/more popular yet? They seem like a fantastic solution
- burcs 2y ago
  The cynic in me wants to say it’s because they aren’t VC backed so there’s no main catalyst driving them. I don’t think a lot of people know about them, or if they do they have just heard about it in passing and have never actually used them. Whatever the reason is they have a marketing problem that’s for sure.
  - throwawayha 2y ago
    Lots of open-source things got adopted without VC backing. There's a lot more options now, it would be good to have a way to have the best stand out.
  - stavros 2y ago
    Ah, well that's encouraging, if the tech itself is good, it means I can start using them more.
- j45 2y ago
  New developers follow social proof often instead of learning from first principles. Web Components are seriously cool and worth looking at.
  - stavros 2y ago
    Excellent, thank you!
  - evilduck 2y ago
    Social proof does tend to follow employment opportunities. If you're a new dev you don't have the luxury to make principled choices in technology, you're more worried about housing and food security and maybe paying back student loans. Asking new developers to trend-set the industry would be deeply unfair. If we want them to learn from first principles then entry level jobs should have first principles opportunities available.
tomjen3 2y ago
Why would I used them over something like a Vue component?
- throwawayha 2y ago
  Vue is great but it's a personal preference and interpretation for you. It's not about better or worse for you, maybe for the average person.
- burcs 2y ago
  They are framework-agnostic, meaning you're not locked into Vue, React, Angular, or any specific framework. They work natively in the browser, which makes them reusable everywhere, now and in the future.
  - throw310822 2y ago
    > They are framework-agnostic This is a selling point only if your job is producing component libraries. Otherwise, if you're an application developer, you'll be using a framework anyway.
    - apotropaic 2y ago
      Not entirely true. Making UI parts of your app using web components can future proof and prevent getting stuck on a framework.
jitl 2y ago
I looked at your docs: - renders very weird on my iPhone iPhone 15 Pro Max in Safari 18.0. Consider responsive design for smaller screen sizes to restyle the sidebar and set a body max-width instead of a width. You might not expect your users to develop on phones, but you might have a hard time with adoption if the docs are mobile hostile. - the “explore components” button at the bottom of the home page seems to link to nowhere - site claims “Learn from well-structured, accessible component implementations” as an advantage but I didn’t find any links to the implementation from the docs - site claims “No dependencies to manage or update” but isn’t astra-ui a dependency? It has a changelog (https://www.astra-ui.com/changes/ https://www.astra-ui.com/changes/). Likewise “Full control over the code and styling” I don’t understand how I can both have full control but also be taking a dependency on implementations provided by a library. I’m curious why you’ve decided to release this library? I’ve come to view open-sourcing internal software as useful to the company for a few specific reasons but to generally be a time-sink without much return unless it’s accomplishing a goal. Component libraries need to fight for general ecosystem adoption or there’s no audience and you might as well not publish at all.
- burcs 2y ago
  Really appreciate the write up here! Maybe rough around the edges is an understatement haha, we are actively working to make the docs here better. So a few things, these are very primitive components that can easily be updated and restyled. There’s a given that there will be a dependency when using a library, right? The thing is with this you don’t even need to npm install if you don’t want to. Just plug and play. As far as why… there isn’t much out there in terms of a web component driven component library and I think we’ve done some great stuff with ours. That plus we have customers embedding our components into their platform and it’s always helpful to see the source code. I hear you on the docs quality though we will work on that.
shortrounddev2 2y ago
I just rewrote my company's frontend ad code in webcomponents

by burcs 2y ago

candiddevmike 2y ago

The only way to get out of the current front end hell IMO is if we get client side import: https://github.com/whatwg/html/issues/2791 https://github.com/whatwg/html/issues/2791

askonomm 2y ago
I mean <script type="module"></script> can do ECMAScript module imports.
meiraleal 2y ago
That's a solved problem. You can create a custom element for that with some 5 lines of code. Or use one ready: https://github.com/justinfagnani/html-include-element https://github.com/justinfagnani/html-include-element
- PaulHoule 2y ago
  And that’s exactly what some people don’t want!
  - meiraleal 2y ago
    Some people will never be happy
arcbyte 2y ago
I'm aghast at the comments in that thread. They are truly asleep at the wheel. No wonder the front end is such a disaster with those mindsets running the show.
- lelanthran 2y ago
  > I'm aghast at the comments in that thread. They are truly asleep at the wheel. And the wheel that they're at is the one in a clown car. Which is driving off a cliff. Just having a custom element `<my-include-html remote-src='...'>`[1] is enough to forgo 50% of the reason for using a front-end framework with a build-step. [1] One that executes scripts, allows `<style>` tags, etc.
halfcat 2y ago
Would this be different from using HTMX to load an HTML partial on page load? Something like: <div hx-trigger="load" hx-get="/header.html"></div>

stavros 2y ago

Why aren't web components there/more popular yet? They seem like a fantastic solution

burcs 2y ago
The cynic in me wants to say it’s because they aren’t VC backed so there’s no main catalyst driving them. I don’t think a lot of people know about them, or if they do they have just heard about it in passing and have never actually used them. Whatever the reason is they have a marketing problem that’s for sure.
- throwawayha 2y ago
  Lots of open-source things got adopted without VC backing. There's a lot more options now, it would be good to have a way to have the best stand out.
- stavros 2y ago
  Ah, well that's encouraging, if the tech itself is good, it means I can start using them more.
j45 2y ago
New developers follow social proof often instead of learning from first principles. Web Components are seriously cool and worth looking at.
- stavros 2y ago
  Excellent, thank you!
- evilduck 2y ago
  Social proof does tend to follow employment opportunities. If you're a new dev you don't have the luxury to make principled choices in technology, you're more worried about housing and food security and maybe paying back student loans. Asking new developers to trend-set the industry would be deeply unfair. If we want them to learn from first principles then entry level jobs should have first principles opportunities available.

tomjen3 2y ago

Why would I used them over something like a Vue component?

throwawayha 2y ago
Vue is great but it's a personal preference and interpretation for you. It's not about better or worse for you, maybe for the average person.
burcs 2y ago
They are framework-agnostic, meaning you're not locked into Vue, React, Angular, or any specific framework. They work natively in the browser, which makes them reusable everywhere, now and in the future.
- throw310822 2y ago
  > They are framework-agnostic This is a selling point only if your job is producing component libraries. Otherwise, if you're an application developer, you'll be using a framework anyway.
  - apotropaic 2y ago
    Not entirely true. Making UI parts of your app using web components can future proof and prevent getting stuck on a framework.

jitl 2y ago

I looked at your docs: - renders very weird on my iPhone iPhone 15 Pro Max in Safari 18.0. Consider responsive design for smaller screen sizes to restyle the sidebar and set a body max-width instead of a width. You might not expect your users to develop on phones, but you might have a hard time with adoption if the docs are mobile hostile. - the “explore components” button at the bottom of the home page seems to link to nowhere - site claims “Learn from well-structured, accessible component implementations” as an advantage but I didn’t find any links to the implementation from the docs - site claims “No dependencies to manage or update” but isn’t astra-ui a dependency? It has a changelog (https://www.astra-ui.com/changes/ https://www.astra-ui.com/changes/). Likewise “Full control over the code and styling” I don’t understand how I can both have full control but also be taking a dependency on implementations provided by a library. I’m curious why you’ve decided to release this library? I’ve come to view open-sourcing internal software as useful to the company for a few specific reasons but to generally be a time-sink without much return unless it’s accomplishing a goal. Component libraries need to fight for general ecosystem adoption or there’s no audience and you might as well not publish at all.

burcs 2y ago
Really appreciate the write up here! Maybe rough around the edges is an understatement haha, we are actively working to make the docs here better. So a few things, these are very primitive components that can easily be updated and restyled. There’s a given that there will be a dependency when using a library, right? The thing is with this you don’t even need to npm install if you don’t want to. Just plug and play. As far as why… there isn’t much out there in terms of a web component driven component library and I think we’ve done some great stuff with ours. That plus we have customers embedding our components into their platform and it’s always helpful to see the source code. I hear you on the docs quality though we will work on that.

shortrounddev2 2y ago

I just rewrote my company's frontend ad code in webcomponents