Live data from Hacker News

How we use web components

github.blog

31–40 of 84 posts

Re: How we use web components

#31
I have a very dumb question. I'm currently trying to implement web components into a pretty basic flask site, and I'm really having trouble. Does anyone know any resources about basic implementation that I can review?

I was interested in Lit, and am try to bundle that, but it's not working at all, and I really feel like I'm missing something.

Re: How we use web components

#32

For my sideproject ( https://profilehunt.net ) I have been using a somewhat similar approach. I use Github ViewComponents ( https://github.com/github/view_component ) for componentization of Rails views. It helps with more modular views which are easier to debug (errors usually point directly to the line in view code, unlike Rails views). I use StimulusJS ( https://stimulus.hotwire.dev/ ) for Javascript interactivity…

I am still wondering if ViewComponent will ever officially make it into Rails.

Re: How we use web components

#33

For my sideproject ( https://profilehunt.net ) I have been using a somewhat similar approach. I use Github ViewComponents ( https://github.com/github/view_component ) for componentization of Rails views. It helps with more modular views which are easier to debug (errors usually point directly to the line in view code, unlike Rails views). I use StimulusJS ( https://stimulus.hotwire.dev/ ) for Javascript interactivity…

How do u append stuff to the DOM, new Hotwire or Rails ujs?

Re: How we use web components

#34

At my work web components were purposed recently for creating a ui component library of which I was skeptical. On the whole I was skeptical of web components viability and future but this post relieves some of that tension. The other thing I was worried about was that it was planned to after writing this web component lib, to wrap these components in React. Does anyone have any experience or insights into a React wra…

The Lit team has a labs project called @lit-labs/react that will automatically create a react wrapper:

https://www.npmjs.com/package/@lit-labs/react

Re: How we use web components

#35
post #31

I have a very dumb question. I'm currently trying to implement web components into a pretty basic flask site, and I'm really having trouble. Does anyone know any resources about basic implementation that I can review? I was interested in Lit, and am try to bundle that, but it's not working at all, and I really feel like I'm missing something.

You can get lit-specific advice on their Slack. The link is on their docs site

Re: How we use web components

#36

For those who have used tools like Hotwire, what has your experience been like? How does it compare to something like Vue or React?

They aren't really comparable I think, you should compare Hotwire to old Turbolinks + Rails/ujs. Hotwire will make it feel like a SPA but it is not a SPA. Probably for many websites this is enough, but I wouldn't write a computer game with Hotwire.

Re: How we use web components

#37

For my sideproject ( https://profilehunt.net ) I have been using a somewhat similar approach. I use Github ViewComponents ( https://github.com/github/view_component ) for componentization of Rails views. It helps with more modular views which are easier to debug (errors usually point directly to the line in view code, unlike Rails views). I use StimulusJS ( https://stimulus.hotwire.dev/ ) for Javascript interactivity…

How do u append stuff to the DOM, new Hotwire or Rails ujs?

Clicking on buttons triggers Ajax request via stimulus controller (this takes care of CSRF and session) and fetches just the required HTML from route and appends using innerHTML (https://developer.mozilla.org/en-US/docs/Web/API/Element/inn...).

an example following is an event listener in a JS controller.

  openAddJob(event) {
    this.openDialogAddClasses();
    this.modalPanelTarget.innerHTML = MODAL_SPINNER_HTML;
    $.ajax({
      type: "GET",
      url: `/job_items/new_form`,
      success: function (repsonse) {
        this.modalPanelTarget.innerHTML = repsonse;
      }.bind(this),
      error: function (repsonse) {},
    });
  }

Currently there is a lot of scope for DRY a lot of things in the app but will be doing that once I have more feature tests coverage.

Re: How we use web components

#38
post #27

At my work web components were purposed recently for creating a ui component library of which I was skeptical. On the whole I was skeptical of web components viability and future but this post relieves some of that tension. The other thing I was worried about was that it was planned to after writing this web component lib, to wrap these components in React. Does anyone have any experience or insights into a React wra…

Super easy to incorporate with React. Just use react to pass attributes, like so: class App extends React.Component { render() { return ( ) } } In your webcomponent just make sure you listen to changes to that attribute like so: static get observedAttributes() { return ['custom-attribute'] } Then you can decide how the component changes whenever that attribute is updated by using the `attributeChangedCallback` functi…

Issues arise when trying to pass objects or add event listeners for custom events due to how React specifically handles this stuff. You often have to use refs

Re: How we use web components

#39

I do pretty much everything with Web Components these days. It's so nice to be able to pick things I need from different frameworks, like Ionic, vaadin, Shoelace, etc... and they all just work together. I tend to implement vanilla web components, I enjoy managing the life cycle and don't find it particularly burdensome. Of course. Lit-html is a big reason why that's easy to do. I use it for rendering. I generally avo…

I don't know if it's on purpose, but ApplicationState is a lot like Redux, except the action dispatching mechanism has been replaced with setting state properties directly. I'd still prefer the dispatch mechanism since it means you can have additional, reusable logic in the reducer.

Re: How we use web components

#40
post #6

How well do web components work in the context of SEO and pagespeed scores?

I think they're generally intended for use in SPA/PWAs. I doubt the shadow dom is particularly crawler friendly. Also, they aren't great at SSR though some frameworks try to fix that. It would also depend a lot on how you were using/designing them. If you were using slots and putting content inside of a custom tag, and just using that tag for display concerns, SEO would be just fine, though you may lose some semantic…

Shadow DOM is crawlable for a few years now
Post reply on HN