Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How we use web components

github.blog

Post reply on HN
Print view View original

41–50 of 84 posts

Re: How we use web components

#41

Post by pvsukale3 »

ksec wrote: post #32
pvsukale3 wrote: post #16

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.

It is very easy to add. Rails 6.1 introduced a way to use the m without a monkeypatch (https://github.com/rails/rails/pull/36388). But yeah having them natively inside Rails will help with greater adoption of components into Rails way.

Re: How we use web components

#42

Post by e111077 »

cageface wrote: post #17
rictic wrote: post #9

Earlier quoted context omitted.

You can totally write web components with Preact: https://preactjs.com/guide/v10/web-components/ From a quick skim of their docs, it looks like AMP still uses web components. The nice part about web components is that the users of a library don't have to care about how it's implemented, so switching to preact is a transparent change.

React still doesn't play seamlessly with WC right?

This site tells you which frameworks work well with custom elements. And if they play well with custom elements, then they're usually fine with web components

https://custom-elements-everywhere.com/#preact

Re: How we use web components

#43

Post by hardwaresofton »

lgessler wrote: post #18

Something I've never understood how to handle with vanilla web components: if there's some state that needs to be shared and kept in sync between multiple components, how do you do it? (For comparison, in React you can pass the state down as props from a common ancestor, and in Clojure frameworks all app state is in a giant object referenced by components as needed.)

So basically, the answer is to do it how you did before (shared global state or events etc)

I recently took the time to explore a new idea I haven’t seen explored before —- services as DOM elements:

https://www.vadosware.io/post/sade-pattern-services-as-dom-e...

Straight to the repo:

https://gitlab.com/mrman/services-as-dom-elements

The idea is simple, use references to get at other DOM elements that happen to act like whatever kind of store you need

Re: How we use web components

#44

Post by hardwaresofton »

Would love to see why they did not choose lit-element, it was one of the best I tried in a recent experiment of ~5 libs.

The big thing holding back webcompinents at this point is a data sharing strategy, and I think we could get away with actually using components to store and manage data:

https://www.vadosware.io/post/sade-pattern-services-as-dom-e...

The github repo (which also happens to contain how to write a web component in lit-element, slim.js, tonic, vue, svelte):

https://gitlab.com/mrman/services-as-dom-elements

Re: How we use web components

#45

Post by lemagedurage »

scoofy wrote: 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.

Check out https://open-wc.org/

Especially their code examples

Re: How we use web components

#46

Post by joelbluminator »

pvsukale3 wrote: post #37
joelbluminator wrote: post #33

Earlier quoted context omitted.

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({…

OK you kinda roll your own solution here, looks easy enough.

Re: How we use web components

#47

Post by sime2009 »

hardwaresofton wrote: post #44

Would love to see why they did not choose lit-element, it was one of the best I tried in a recent experiment of ~5 libs. The big thing holding back webcompinents at this point is a data sharing strategy, and I think we could get away with actually using components to store and manage data: https://www.vadosware.io/post/sade-pattern-services-as-dom-e... The github repo (which also happens to contain how to write a web…

> Would love to see why they did not choose lit-element

Most likely explanation: It simply didn't exist yet when they chose.

Also, lit-element requires elements use its own base class while Catalyst doesn't.

Re: How we use web components

#48

Post by e111077 »

hardwaresofton wrote: post #44

Would love to see why they did not choose lit-element, it was one of the best I tried in a recent experiment of ~5 libs. The big thing holding back webcompinents at this point is a data sharing strategy, and I think we could get away with actually using components to store and manage data: https://www.vadosware.io/post/sade-pattern-services-as-dom-e... The github repo (which also happens to contain how to write a web…

I think when they released Catalyst Lit was still in beta

Re: How we use web components

#50

Post by deergomoo »

I was really excited about web components until I discovered that slots and CSS isolation are a package deal.

Absolutely great for the developer that wants to ship pre-built components that cannot be affected by the CSS of the site they're used in; absolutely useless when you want to make re-usable components for your own app, where you very much want slot content to be styled using the CSS you already have.

Post reply on HN