Overslaan naar hoofdinhoud

Frontend bundler 26.01

Openen in ChatGPT

De frontend bundler stelt een webforJ-klasse in staat om gebruik te maken van het npm ecosysteem, componenten te schrijven in React, Svelte of Lit, en SCSS te authoren, allemaal vanuit een Java-project zonder dat er een Node-toolchain hoeft te worden geïnstalleerd of uitgevoerd. Een klasse benoemt de frontend die het nodig heeft met een annotatie, en de build installeert de pakketten, compileert de bronnen en laad het resultaat wanneer een component van die klasse wordt aangemaakt.

De bundler draait als onderdeel van de webforJ build plugin, die je eenmaal toevoegt aan je Maven- of Gradle-build. De mechanismen voor het compileren van een specifieke soort bron, SCSS, Less, Tailwind, en de rest, zijn het werk van extensies.

Wanneer je de bundler nodig hebt​

webforJ draait zonder bundler. Als je al een script of een stylesheet hebt en je wilt deze aan een component of de app koppelen, doen de asset annotaties dat zonder bouwstap, zonder npm en zonder compilatie.

De bundler verdient zijn plek wanneer de frontend meer is dan een statisch bestand:

  • Je wilt een pakket van npm, bij naam en versie, geïnstalleerd en gecompileerd in je app.
  • Je wilt een component in React, Svelte of Lit schrijven en deze vanuit Java consumeren.
  • Je wilt SCSS, Sass of Less authoren, of Tailwind-hulpmiddelen compileren.
  • Je wilt frontend tests uitvoeren als onderdeel van de build.

De bundler is het standaardpad voor dat werk, en het doet alles wat de asset annotaties doen, zodat een project dat het aanneemt de eenvoudigere optie niet verliest.

Het toevoegen aan een bestaand project​

De bundler is op instapbasis, dus je kunt het toevoegen aan een app die al de asset annotaties gebruikt en het alleen gebruiken waar je het nodig hebt.

  1. Voeg de webforJ build plugin toe aan je Maven- of Gradle-build. Het beheert Bun voor jou, dus er is geen Node-toolchain te installeren.
  2. Author je frontend-bronnen onder src/main/frontend.
  3. Declareer wat een klasse nodig heeft met @BundlePackage en @BundleEntry.

Je bestaande @StyleSheet, @JavaScript, en de andere asset annotaties blijven onveranderd werken, zodat je een bron naar de bundler kunt verplaatsen wanneer je een pakket, een gecompileerde bron of een test wilt, en de rest ongemoeid kunt laten.

Een klasse aan een entry binden​

@BundleEntry bindt een klasse aan een frontend entry, en @BundlePackage declareert de npm-pakketten die die entry importeert. Beide leven op de klasse, zodat de frontend die een view nodig heeft met de view meereist.

GreetingView.java
@Route("/greeting")
@BundlePackage(value = "lit", version = "^2.0.0")
@BundleEntry("greeting/hello-greeting.ts")
public class GreetingView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public GreetingView() {
    self.add(new Element("hello-greeting"));
  }
}
greeting/hello-greeting.ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement("hello-greeting")
class HelloGreeting extends LitElement {
  render() {
    return html`<p>Groeten vanuit webforJ</p>`;
  }
}

De entry registreert het hello-greeting aangepaste element en is verantwoordelijk voor de rendering. De Java-kant consumeert het met new Element("hello-greeting") en luistert naar de gebeurtenissen. De build compileert de entry, installeert lit, en laad de uitvoer wanneer /greeting wordt gerenderd.

Onderwerpen​