Is vaadin implemention's based on web componenet?

Elhanan · October 14, 2024, 7:03am

I’ve seen a lot of hate for them in recent times, and that kinda worries me.

rbrki07 · October 14, 2024, 8:25am

Interesting topic. To give some context: https://www.youtube.com/watch?v=UrS61kn4gKI

Elhanan · October 14, 2024, 8:55am

that’s exactly what triggered me to ask

Jouni1 · October 15, 2024, 2:48pm

For a user of Vaadin, that’s an implementation detail, something you don’t need to worry about. The standards aren’t going anywhere, so in that sense web components are a safe bet, just as implementing a web app using HTML, CSS, and JavaScript is.

That said, do you have any specific concerns regarding web components?

Tatu2 · October 17, 2024, 12:01pm

I watched that video like week ago or so. There are some in-accuracies there, although I rate the creator of the video one of the better frontend developers out there.

For example you can use slots with web-components, you can use part selector with css, and in web component implementation you can set a string to inner html, if your really want to have html content in your property.

I.e. you can do this

github.com

TatuLund/rich-tooltip-demo/blob/main/src/main/java/com/example/tooltip/views/masterdetail/MasterDetailView.java#L84


      
          
          add(splitLayout);
          
          // Configure Grid
          
          LitRenderer<SamplePerson> firstNameRendererLit = LitRenderer
                  .<SamplePerson> of(
                          "<div style='width: 100%; height: 100%;' id='${item.nameFor}'>${item.firstName}</div><rich-tooltip for='${item.nameFor}' text='${item.nameTooltip}'>")
                  .withProperty("firstName", SamplePerson::getFirstName)
                  .withProperty("nameFor", item -> "name" + id++)
                  .withProperty("nameTooltip",
                          item -> "<span style='color: coral'><b>Name</b>: "
                                  + item.getFirstName() + " " + item.getLastName()
                                  + "</span><br><b style='color: white'>Occupation</b>: <i style='color: white'>"
                                  + item.getOccupation() + "</i>")
                  .withFunction("onClick", item -> Notification.show(item.getFirstName()+ " clicked!"));
          
          grid.addColumn(firstNameRendererLit).setHeader("First Name")
                  .setAutoWidth(true);
          grid.addColumn("lastName").setAutoWidth(true);
          grid.addColumn("email").setAutoWidth(true);

By doing this

github.com

TatuLund/rich-tooltip-demo/blob/main/frontend/components/rich-tooltip.js#L151


      
            }
          
            constructor() {
              super();
              this._boundShow = this._debounce(this.show.bind(this), 200);
              this._boundHide = this._debounce(this.hide.bind(this), 200);
            }
          
            ready() {
              super.ready();
          	this.$.tooltipOverlay.innerHTML = this.text;
              this.$.tooltipOverlay.addEventListener('vaadin-overlay-open', () => this._tooltipOpenChanged(true));
              this.$.tooltipOverlay.addEventListener('vaadin-overlay-close', () => this._tooltipOpenChanged(false));
            }
          
            connectedCallback() {
              if (!this._targetElement) {
                this._targetElement = this.parentNode.querySelector(`#${this.for}`);
              }
              this._attachToTarget();
              super.connectedCallback();

And it seemed to be one of the things the author of the video very much liked to do. Well, it is totally other thing whether it is good to thing to do, especially as in my simple example I am not bothering to use DOMPurify to sanitize it. But that it is another discussion.

There are naturally some good points in the video. 3rd party libraries surely are free to evolve faster and more flexible manner than standards.

And yes, we use Polymer and Lit in Vaadin to make our life easier with web components.

rbrki07 · October 19, 2024, 7:44am

Interesting thoughts, thank you for sharing!

To me it seems, that this is likely one of the bigger concerns in the video. From the perspective of a developer that is using Vaadin, I don’t feel uncomfortable with this.

Nicely said, and I would also agree on that.

Tatu2 · October 19, 2024, 9:32am

Yes. It has been long time struggle to find things that can stand the challenge of the business application life cycles. Something that is hip and tandy today can last only couple of years, i.e. it may be deprecated just in time a large scale business application project has reached first production deployment phase. And then it should be still maintained next 10 or so years. It is very hard.

E.g. we have now taken React as part of our tool chain. I guess we believe that it will be around for some time, so it makes sense to make such bet. Note, even with Hilla, even when you use React, ouyr components still are web components implemented with Polymer under the hood. So web components vs. React discussion is not that they are mutually exclusive. In Hilla they are friendly together.