adam bien's blog

Simplest Possible WebComponent with JAX-RS Backend 📎

A Java class:


public class Hello {

    public String greeting;

    public Hello(String greeting) {
        this.greeting = greeting;
    }
}

exposed via a JAX-RS:


import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

@Path("/hello")
public class HelloResource {

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public Hello hello() {
        return new Hello("hello, component");
    }
}

can be easily accessed from a vanilla WebComponent:


class HelloComponent extends HTMLElement { 

    async connectedCallback() { 
        const response = await fetch("/hello");
        const { greeting } = await response.json();
        this.innerHTML = `
            <h2>${greeting}</h2>
        `;
    }

}
customElements.define("hello-component",HelloComponent);

...declared in a HTML page


<!DOCTYPE html>
<html lang="en">
<head>
<body>
    <hello-component></hello-component>
    <script src="app.js" type="module"></script>
</body>
</html>

No dependencies, no migrations.

See you at Web, MicroProfile and Java EE Workshops at Munich Airport, Terminal 2 or Virtual Dedicated Workshops / consulting. Is Munich's airport too far? Learn from home: airhacks.io (e.g.: webcomponents.training).