---
title: "看板开发：组件、状态与依赖 · Metrix.Bar"
description: "使用原生组件、JavaScript 状态、可选依赖与 App 校验工具开发 Metrix.Bar 看板。"
canonical: "https://metrix.bar/zh/docs/tech-stack"
language: "zh-CN"
---

# 看板开发

> 构建原生组件树、管理状态并为 .bar 看板选择可选依赖。

## 从原生组件树开始

看板在常驻 Worker 中执行 JavaScript，由 `render(env)` 返回原生组件树。普通对象即可构建界面；[官方 GitHub 看板](https://metrix.bar/dashboards/github-repo.bar)提供包含输入、凭据、取数与交互的完整示例。

简单状态可用模块变量维护。复杂看板可使用独立状态库订阅变化并调用 `$metrix.invalidate()`。订阅与定时器应在 `render()` 外初始化一次。

## 可选库

Preact `h` 搭配 HTM 可提供无需构建的模板。Vue `h` 和 React `createElement` 也可构造树，但节点必须使用 `Column`、`Text`、`Button` 等原生组件名称。Worker 没有浏览器 DOM、React Hooks dispatcher 或框架组件生命周期。原始 JSX 需要外部编译。

远程 ESM 需要在 `<permissions>` 声明 CDN origin。请固定版本并只导入所需模块。声明的模块会在导入时下载，后续运行可使用缓存离线加载。导入限制与扩展 API 见[文件格式](/zh/docs/bar-format.md)。

## 格式化与运行时 API

解析、格式化与数据计算在 Worker 风格环境中完成（全局环境为 `self` / `globalThis`，无 `window` 或 `document`），默认提供 `fetch`、streams、`performance`（单调高精度时间）与 `Date` 等 Web 标准子集。按需通过 `<script apis="...">` 启用可选扩展能力（如 `localStorage`、`matchMedia`、`screen`、`caches` 或 `intl`）；桌面专有能力通过 `$metrix` 提供。定时器句柄为 Node 风格对象，`Buffer` 为 Node 风格扩展；环境不具备完整 Web Worker 或 Node.js 兼容性。`Date` 使用宿主时区，无法识别时回退 UTC。Date 原型本地化方法不会被修改，请显式调用 Intl 构造函数。

使用高级组件或桌面 API 前，从当前 App 的鉴权端点 `GET /v0/types` 获取类型声明。通过[本地 API](/zh/docs/local-api.md)校验源码、运行隔离检查并查看渲染结果。