Lit - 适合 Ruby on Rails 默认栈的前端组件框架

一个 Web 应用的界面内容根据交互复杂程度可以分为三类：

纯内容，例如商品详情页。
轻交互，例如购物车。
重交互，例如 CMS 的后台编辑器。

对于不同的应用，以上内容的比例可以不一样。例如文档管理工具大部分是纯内容和轻交互，而 figma 这样的在线设计工具则大部分是重交互。

如果用 Ruby on Rails 开发，纯内容用服务端模版渲染，轻量交互用 hotwire 组合，但重交互没有默认推荐工具。好消息是从 Rails 7 开始前端部分已经解耦，可以使用任意喜欢的框架和工具。

一种看法是拥抱大前端生态，前后端分离。Rails 的 API 模式可以很好支持这种开发方式。不过我个人不喜欢这种方式，分离之后实际上要维护两个项目以及项目间的协调问题，大大增加复杂度。更多原因在我以前的博客前后端分裂中提到过。基于这个理由我也不喜欢现在主流的 React 和 Vue 框架，因为它们都着力于全栈，最终都会导向前后端分离。

我希望有一个符合现代开发模式，同时能跟现有的后端框架协作的前端框架。最近我觉得 Lit 可能就是答案。

Lit 是 Google 维护的前端组件框架，它以 Web Component 标准为基础，提供了声明式模版、相应式属性等现代框架功能。

下面通过一个例子直接体验 Lit 的功能，定义一个计数器组件：

import { LitElement, html } from 'lit';

export class MyElement extends LitElement {
  static properties = {
    count: { type: Number },
  };

  constructor() {
    super();
    this.count = 0;
  }
  render() {
    return html`
      <p><button @click="${this._increment}">Click Me!</button></p>
      <p>Click count: ${this.count}</p>
    `;
  }
  _increment(e) {
    this.count++;
  }
}
customElements.define('my-element', MyElement);

然后可以在页面上使用组件：

<my-element></my-element>

实际效果可以看 https://lit.dev/docs/components/events/ 的展示。

这里要注意的有：

在页面任何生命周期内都可以像原生浏览器组件一样调用自定义组件，不需要手动绑定。
模版内通过 @click 声明绑定了事件行为。
当组件属性更新后，组件自动重新渲染并更新内容。
不需要 JSX 实现了类似功能。

这里可以看到其他框架的影子，不同的是它基于原生自定义组件，对服务端渲染更友好。我最近开始将 Lit 用于一些复杂交互的组件，带给我不少惊喜，就像填补了心中一块空洞。不过也遇到一些坑，等我更熟悉之后再做分享。

如果你也在寻找一个组件框架，并且不满足于主流的框架，Lit 值得一试。