开发框架

aihtml · 用 Erlang 函数写网页

页面由「预制件」函数拼装而成,服务端输出完整的静态 HTML,浏览器端由 Stimulus 控制器增强,样式用 Tailwind CSS。按钮的点击直接由 Erlang 函数响应:每个事件一次无状态请求,响应是要应用的 DOM 操作。

渲染依赖 beamai_render:转义与安全标记与 Jinja 模板一致,渲染结果可以直接放进 Jinja 模板。前端产物预先构建好随 release 打包,使用方不需要 Node.js。

Erlang 写页面,Erlang 接点击

Erlang:按钮与它的点击处理
ah_button(<<"删除">>, Id, [borderless],
          [on(click, {?MODULE, delete, #{id => Id}})])

action(delete, #{id := Id}, _Event, Ctx) ->
    ok = todo_db:delete(Id),
    aihtml_action:remove(Ctx, {id, [<<"todo-">>, integer_to_binary(Id)]}).

功能

能做什么

  • 函数即页面

    ah_* 构建函数与等价的 record 写法拼装页面,aihtml:render/1 输出 iodata;页面就是普通的 HTTP handler 输出。

  • 无状态交互

    点击、输入等事件一次 POST,由 Erlang 函数处理并返回 DOM 操作(替换、形变、移除、改属性……);服务端不保存会话,任意节点处理任意请求。

  • 服务端推送

    页面订阅主题,服务端经 SSE 推送与 action 相同的 DOM 操作;每页一条 EventSource,主题带签名,断线重连后自动从数据层补齐。

  • 112 个组件与四轴主题

    组件与主题移植自 sigil:DataGrid、Calendar、NodeGraph、图表、Markdown 编辑器等 111 个组件,加上服务端渲染的 markdown_view;外观、配色、排版、外形四个主题轴自由组合。

  • 对 SEO 友好

    页面元信息(description、canonical、hreflang、Open Graph、JSON-LD)由服务端写入;图表旁带隐藏数据表;分页、日历等导航是真正的 <a href>,每个状态都有自己的 URL。

  • 国际化

    组件文案按语言放在 JSON 文件里,内置中文与英文;日期格式、上午 / 下午、一周起始日随语言切换。

规格

技术规格

运行环境Erlang/OTP 27+(使用 OTP 自带的 json 模块),rebar3
组成aihtml(核心库)、aihtml_cowboy(可选的 cowboy 端点)、aihtml_example(演示站)
前端Stimulus 3 + Tailwind CSS v4,严格类型的 TypeScript,Vite 打包,不依赖 jQuery;随 release 预构建
服务器核心库不依赖 cowboy;其他服务器实现 action 与推送两个端点即可
许可Apache License 2.0

常见问题

你可能想问

需要写 JavaScript 吗?

一般不需要。页面和交互都用 Erlang 写,浏览器端的组件行为由库自带的 Stimulus 控制器完成;前端产物已预先构建,使用方不需要 Node.js。

一定要用 cowboy 吗?

不必。核心库不依赖 cowboy,aihtml_cowboy 只是现成的端点;换别的 HTTP 服务器,实现 action 与推送两个端点即可。

和 beamai_render 是什么关系?

aihtml 的转义与安全标记来自 beamai_render,与 Jinja 模板一致,所以 aihtml 渲染出的片段可以直接放进 Jinja 模板里。

许可协议是什么?

Apache License 2.0,可用于商业项目。

开源

Apache 2.0 协议开源

引擎、测试、基准与设计文档都在仓库里,欢迎读、改、提 issue。

相关框架

beamai_render · Erlang 的模板与 Markdown 渲染引擎

Mustache 与 Jinja2 两套模板在构建期编译成 Erlang 模块,运行期渲染就是一次函数调用;外加移植自 markdig、带 30 个扩展的 Markdown 引擎。零依赖。