maomi
介绍
入门
文档

maomi

严谨、高性能 Web 应用编程

#[component]
struct HelloWorld {
template: template! {
"Hello world!"
}
}
English | 简体中文

使用 rust 语言开发

编写 rust 代码、编译到 WebAssembly 、在浏览器中运行。
// 定义组件
#[component(Backend = DomBackend)]
struct HelloWorld {
// 添加组件模板
template: template! {
<div class:hello>
"Hello world!"
</div>
}
}
// 实现 Component trait
impl Component for HelloWorld {
fn new() -> Self {
Self {
template: Default::default()
}
}
}
// 添加样式
stylesheet! {
class hello {
color = rgb(232, 152, 86);
}
}

性能更优

maomi 有很好的全局性能，避免了常见性能陷阱。如同 rust 语言本身，在编写 maomi 应用时无需担心性能。
maomi
react
vue
节点树创建耗时
节点树更新耗时
组件抽象耗时
这项 DOM 操作性能测试基于 js-framework-benchmark

在编译期提示错误信息

类似于 rust 本身， maomi 在编译期提示代码错误。这些错误包括标签名错误、属性错误，甚至错误的样式 class 名。

通过 rust-analyzer 在 IDE 中辅助编程

如果安装了 rust-analyzer ，可以简单地跳转到组件标签、属性甚至样式 class 定义。

数据绑定

maomi 基于模板和数据绑定编程。
#[component]
struct HelloWorld {
template: template! {
<div class:hello>
// 在模板上使用 struct 字段
{ &self.hello }
</div>
},
hello: String,
}

约束性 CSS

maomi 支持一种特殊的样式表语法。它限制 CSS 的灵活性，使得样式表更容易维护。
stylesheet! {
class hello {
color = rgb(232, 152, 86);
if hover {
text_decoration = underline;
}
}
}

高性能服务器端渲染

maomi 支持服务器端渲染。它直接在服务器上运行原生 rust 二进制来生成 HTML 。这使得它比普通 JavaScript 代码高效得多。

内置 i18n 国际化支持

maomi 在核心设计时就考虑了国际化支持。可以简单地使用 TOML 格式的翻译文件来生成不同语言版本的编译结果。
阅读入门文档 >