这个国产编程语言，要把前端和后端统一了！

做过Web开发的同学肯定知道前后端分离，前端用JavaScript，后端用Java、Go之类的语言。前后端用接口交互，两者独立变化，感觉挺爽的。

但是，代价也不小，前端同学说“校验没问题啊”，后端同学却说“我这报错了”。两边代码一比对，规则用各自的语法各写了一遍，看着实现的逻辑差不多，行为却不一样。

更扎心的是，业务变更是家常便饭，今天加个字段，明天改个规则，每次都得在前端和后端同步修改。总有那么几次，改完前端忘了后端，或者后端改了前端没跟上，修 Bug 前还得先扯皮甩锅。

要是能用同一门语言写前端、后端和共享逻辑，全端复用就好了！

你可能会想，这不就是JavaScript/TypeScript 吗？

不不，我今天想说的是国产编程语言MoonBit，它不但可以“前后端通吃”，和JavaScript相比，还有些非常独特的优势。

0 1

前后端通吃的 MoonBit

MoonBit是如何实现前后端通吃的呢？在一个 MoonBit 项目里，只需要这样组织：

cmd/browser：前端入口，会被编译成 JavaScript，跑在浏览器

cmd/server ：后端入口，会被编译成原生二进制或者WebAssembly，跑在服务器

cmd/desktop ：桌面应用入口，将 CEF 与编译得到的 JavaScript、二进制文件或者 WebAssembly 混合打包

public和shared ：共享的资源和逻辑，包括 API 服务，UI 组件

看到关键点没有？

MoonBit 代码可以编译成JavaScript，原生二进制、WebAssembly。这种多后端编译能力，使得“按场景选择运行目标”成为可能。

比如我想开发一个简单的Todo应用：

以 MoonBit 的全栈框架 Rabbita 为例，我可以只用 MoonBit 来实现前端界面：

}

状态使用不可变数据结构来描述。在update回调内，程序根据消息来更新状态和触发副作用。所有的副作用由 UI 库管理，例如下面的 HTTP 请求。

}

这样不仅遵循了状态更新、副作用处理、视图渲染的关注点分离，而且副作用由框架自动向环境适配：todo 组件既可以作为单体应用跑在用户的浏览器上，也可以先由处理请求的服务器渲染初始 HTML 后，再转移到用户的浏览器中。

代码写好以后，用 moon build cmd/browser --target js 编译一下，这些MoonBit 代码就变成了操作 DOM 的 JavaScript 脚本。

同理，在后端用 MoonBit 代码来实现业务逻辑：

}

然后用 moon build cmd/server --target native 把它们编译成本地二进制代码，运行起来，就是一个Web 服务器。

至于共享的数据结构，例如 Todo ，也是用 MoonBit 编写：

} derive(Debug, Eq, ToJson, FromJson)

前端传给后端的 JSON、后端返回的数据结构，全由同一份类型保证。

后端和前端都可以声明对它的引用。 框架配套的 CLI 工具帮助开发实时预览、自动编译打包前后端产物。

以后需要修改，只需要修改一处，然后重新编译即可，这就彻底解决了不一致的问题。

0 2

MoonBit的独特优势

1.一套代码，按需部署

前面已经提到了，MoonBit 用一套工具链原生地支持编译到 Native、JavaScript 和 WebAssembly。

相比 JS 全栈方案，MoonBit 提供了更灵活的选择，你不再被锁死在 VM 里，不会受制于V8的上限，而是根据场景选择编译目标：

需要极致性能，编译成原生二进制，没有 JIT 预热开销，启动即满血；

需要轻量部署，编译成 WebAssembly，体积小、启动快，边缘节点友好；

需要跑在浏览器，编译成 JavaScript，与浏览器 API 无缝衔接。

2.优雅与实用的平衡

MoonBit 的语言特性尝试在优雅和实用间取得一种平衡。它既支持完整的模式匹配、函数式控制流、特征系统，又支持命名可选参数、内建正则等工程友好特性，这为 UI 应用的编写提供了不少的便利。

例如，UI 应用需要根据多个状态来计算视图，在 js 中可以在控制流中修改变量：

}

也可以用三元表达式，就是读起来痛苦：

    : "ignore";

在 MoonBit 里则可以避免不必要的可变性，靠模式匹配简洁地书写多个条件：

}

这里的模式匹配并不是“另一种 switch 语法”。它保证运行时效率不亚于手动优化的if else，还提供了Json、结构体、数组、bit 串等更灵活的匹配条件。

更重要的是穷尽性检查：只要增加了新的role类别, 编译器会检查前后端中相关的代码，告诉你哪里需要补充处理逻辑。

能放在let x = ...右边的 match 只是函数式控制流的冰山一角。例如列表推导式：

let active_view = [for todo in todos if !todo.completed => view(todo)]

在 JS 中怎么做大家已经很熟悉了：

const active_view = todos.filter(todo => !todo.completed).map(view)

有人曾吐槽："在 JS 中使用 .map() 和 .filter() 感觉像在自愿放弃性能"。在 MoonBit 中，列表推导式则和手写 for 循环一样高效。

对于UI 应用这种需要大量传递配置的场景，MoonBit 提供了一套实用的可选参数机制：

}

调用 config传递命名参数时，需要以origin=...的形式按任意顺序提供值。x~ : T表示必选，y? : T表示可选，可选参数还可以声明默认值。要传递的变量名字与参数一样时，可以简写成forward函数中的形式。

函数天然支持声明“哪些参数必须提供、哪些有默认值”，避免 JS 中额外的配置结构体、undefiend/null 占位和不必要的防御式编程。

你可能担心这些可选参数会有额外的运行时开销，实际上在 MoonBit 中，这些参数会被编译成普通的函数参数。

0 3

活跃的生态和真实的生产验证

你可能担心MoonBit比较新，配套不足，实际上MoonBit的生态已经相当完善了。

Rabbita 是社区使用最多的 Web UI 框架，受 React 和 Elm 启发，采用声明式与函数式设计。

MoonBack 是轻量级 Web 后端开发框架，供了直观的路由和 HTTP 请求处理能，支持原生的异步请求，同时支持 WebAssembly 和 Native（原生） 双后端编译。

Proton 是 MoonBit 的桌面应用框架，用 CEF 做渲染，但业务逻辑跑在原生线程上。Windows、macOS（含 Apple Silicon）、Linux 都有预编译运行时支持。

此外还有 LunaUI、Tutuca、MoUI、Mocket 等社区项目，覆盖了从 Web 应用到桌面端的主流场景。

MoonBit 这套工具链和库不只是能用，而且已经在真实场景里跑起来了。mooncakes.io 本身就是最好的验证，这是 MoonBit 官方包管理平台的前端，是用 Rabbita 编写的。这意味着 MoonBit 的 UI 框架能力，已经在数千开发者的真实产品上接受了检验。

0 4

结语

看完 MoonBit 这种一套工具链，按需编译的表现，让我想到了一句话：“天下大势，分久必合，合久必分”。

之前编程语言没有跟上软件架构的发展，导致了一个系统的前端、后端和桌面端被迫使用多种编程语言，四分五裂。

而 MoonBit 在一开始就考虑了这种情况，统一了编程语言，当然它在设计上很聪明，没有说向前端、后端倾斜，而是用一套工具链，一套类型系统、一个项目结构，根据场景发挥目标平台的优势。

如果你也厌倦了在语言之间来回切换、在 Bug 之间来回甩锅，不妨去试试 MoonBit，绝对会给你带来惊喜。

MoonBit 全栈开发：

https://github.com/moonbit-community/fullstack-moonbit

MoonBit 系列文章：