使用Spring ViewComponent + htmx構建SpringBoot應用

Spring Boot 是一款出色的應用程式構建框架。然而，傳統的 Spring MVC 風格缺乏檢視（模板）和模型（資料）之間的凝聚力。

React、Angular 和 Vue 等 JavaScript 前端框架有一個共同特點。它們使用元件構建使用者介面。元件支援可重用性並定義清晰的 API。

在 Ruby 和 PHP 社群中，伺服器渲染的 UI 元件透過Laravel Livewire和Rails ViewComponent確立了自己的地位
ViewComponents 將模板所需的邏輯整合到一個類中，從而形成一個易於理解的內聚物件。

藉助開源Spring ViewComponent庫，Spring 開發人員可以享受 UI 元件的好處。

Spring ViewComponent 簡介
ViewComponent 是一個 Spring 託管 Bean。我們可以利用後端模式來進行使用者介面組合。

我們透過使用 @ViewComponent 註解註解一個類來建立 ViewComponent。

ViewComponent 類定義了相應模板的呈現上下文，該上下文稱為 ViewContext。
我們定義了一個實現 ViewContext 介面的公共巢狀記錄。

SimpleViewComponent.java

@ViewComponent
public class SimpleViewComponent {
    public record SimpleViewContext(String helloWorld) implements ViewContext {
    }

    public SimpleView render() {
        return new SimpleView("Hello World");
    }
}

ViewComponent 需要在同一軟體包中定義一個同名模板。
在模板中，我們可以訪問 ViewContext 記錄的欄位。

SimpleViewComponent.jte

@param SimpleViewContext simpleViewContext
<p>
${simpleViewContext.helloWorld()}
</p>

Spring ViewComponent 使用 Spring AOP 封裝底層 MVC 模型。

要渲染 ViewComponent，我們要將其注入控制器，然後呼叫端點對映中的渲染方法，並返回 ViewContext 結果：

@Controller
public class SimpleController {

  private final SimpleViewComponent simpleViewComponent;

  public TestController(SimpleViewComponent simpleViewComponent) {
    this.simpleViewComponent = simpleViewComponent;
  }

  @GetMapping("/")
  ViewContext simple() {
    return simpleViewComponent.render();
  }
}

與 HATEOAS 完美契合
Spring ViewComponent 非常適合構建超媒體驅動的網路應用程式。

當使用者與應用程式互動時，伺服器上應用程式的狀態就會發生變化。
現在，我們需要將 HTML 傳送回 DOM，以反映使用者介面的變化。

有了伺服器端渲染的 ViewComponents，我們就可以再次呼叫 ViewComponent 的渲染方法來交換該元件。

高階模式
使用 Spring ViewComponent 我們可以利用依賴注入來組成 UI，同時遵守開放封閉原則。
另一個有趣的主題是使用策略模式的宣告式 UI。我在這裡有一個示例儲存庫：github.com/tschuehly/svc-ui
最後，我們可以在 DOM 中交換特定於我們的領域和用例的元素的簡單概念之上建立更高階別的抽象。