Rust UI 框架 Makepad 作者亲授，邀您来 GOSIM Workshop 见证

Rust 生态中开源的 UI 框架也有很多，知名的如 tauri、slint，但是 makepad 你听说过吗？当我听完今年 RustNL 大会的 Makepad: Designing modern UIs with Rust - Rik Arends - RustNL 2023[1] 分享之后，我愿意称其为 Rust 最强 UI 框架。恰逢 9.23-24日 在上海的 GOSIM Workshop 也邀请到了 Makepad 作者亲临现场，所以，这篇文章也为你提前揭秘 Makepad 。

在《2023 年上半年移动应用程序开发框架调研报告》中，Igalia 工程师于 2023 年上半年在研究了 Capacitor、React Native、NativeScript、Flutter 和 Ark 等移动应用程序开发框架之后，确定了以下模式：

1. 所谓的“声明式”UI 开发风格已经普遍获胜。过去 5 年，Android 和 iOS 原生平台以及跨平台框架逐渐摆脱了传统的“命令式”风格。

2. 即使是领先的框架也不成熟。场不处于平衡状态。由此推论，现在正是竞争解决方案进入市场的最佳时机。

3. 移动设备上的 JavaScript 与 Web 上的 JavaScript 不同。跨平台应用程序开发框架必须选择一种语言；大多数人选择JavaScript。这为浏览器和已建立的开发社区的技术重用提供了机会，但也带来了与语言本身和该社区的实践相关的挑战。实现快速启动以及流畅、无卡顿的交互和动画促使某些框架做出与 Web 上不同的权衡。

4. 性能是一个框架问题。框架在“什么”和“如何”之间创建了分工：应用程序开发人员描述应该发生什么，并将其转化为良好的用户体验是框架的责任。框架用来确保良好性能的通用技术是编译。一些例子包括：React Native 中 JavaScript 的提前编译，或者 Flutter 中 Dart 的提前编译；Ionic/Capacitor 中 Angular 接口的提前编译；Flutter 新的 Impeller 渲染器中着色器的提前编译。

5. Flutter 代表了最先进的技术。Flutter 在两个主要方面脱颖而出：它直接渲染到 GPU，而不是使用本机或 Web 小部件，并且它使用自己的语言 Dart，而不是 JavaScript。相对于竞争对手，这两个选择都有利于良好的、可预测的应用程序性能，使其成为一个很好的默认选择。

解决 JavaScript 带来的一些挑战的另一种方法是完全切换语言。从这方面来说，在 Rust 之上实现 Flutter 是一个非常有吸引力的提议；简单地克隆 Flutter 的设计决策很可能会产生一个相当有竞争力的系统。

历史的弧线从 C 和 C++ 转向 Rust。鉴于移动开发平台必须有一些低级代码，因此有人赞成使用 Rust 编写代码，而不是选择在未来迁移。而我们今天介绍的 Makepad 框架，就是纯 Rust 实现的。

Makepad 创作背景

Makepad 的作者是 Rik Arends。这个名字也许很多人不熟悉，但是你一定听过 Cloud9 IDE 和 ACE 代码编辑器。

Cloud9 IDE 成立于 2010 年，在 2016 年卖给了亚马逊。它是一种云 IDE，一个基于云的开源集成开发环境。它支持超过40种语言，包括：PHP和Ruby，Python和JavaScript/Node.js。它几乎完全用JavaScript编写，并使用Node.js上后端。

Ace（全称Ajax.org Cloud9 Editor）是一个用JavaScript编写的独立的代码编辑器。其目标是创建一个基于Web的代码编辑器，与现有的本地编辑器（如TextMate、Vim或Eclipse）的功能、可用性和性能相匹配并加以扩展。它可以很容易地嵌入到任何网页和JavaScript应用程序中。Ace是作为Cloud9 IDE的主要编辑器和Mozilla Skywriter项目的继承者而开发的

Rik Arends 也是 Cloud9 IDE 和 ACE 代码编辑器的创始人。他在创造这两个产品的时候，使用基于 HTML/CSS/Javascript 的 常见 Web 前端技术，他认为使用 HTML 作为 IDE 的 UI 简直是疯了，他深受折磨。比如，他最想做的代码折叠动画，用 HTML 等前端技术做起来非常困难。

这里展示的就是 Rik 想做的代码折叠动画效果，是 Makepad 实现的 IDE  的效果。

你可以打开  https://makepad.dev/[2] 体验在线 IDE，按下 alt 或 option   来体验代码折叠效果。在本地构建 makepad studio 则需要按 esc 。

基于 Web 前端技术性能也非常慢，所以他就想用 Rust 重新实现一个 Native 的 UI 框架。

目前 makepad 的状态：IDE也做好了，也可以用VS Code，可以实时重载（live reload），做了基本的widget，可以demo 淘宝 微信 抖音 等app，目前已经支持 Mac/ Windows/Android/ iOS。

下面有一些 Makepad 做的 Example  效果：

无限分形

音乐合成器 makepad-example-ironfish

下面还有一些 Makepad Demo ，也支持浏览器，小伙伴可自行体验:

• makepad-example-fractal-zoom[3]

• makepad-example-ironfish[4]

• makepad-example-simple[5]

• makepad-example-numbers[6]

• makepad-chatgpt-demo[7]

Makepad 架构介绍

makepad[8]，可以用来构建本地 UI，也可以通过 WebAssembly 支持 Web UI。

makepad 框架由两部分组成：

• Makepad Framework ，是 UI 框架，完全由 GPU 渲染，并且支持 实时设计（Live design ）的一种新颖的功能。

• Makepad Studio，一个具有实时设计感知能力的 IDE 原型，可以检测到 DSL 代码更改，而不是 Rust 代码的更改，从而使得应用程序能够自动更新自身。它是基于 Makepad Framework 来构建的。

makepad Framework 介绍

makepad framework 由三个主要组件组成：

• makepad platform，是 makepad 框架的主要平台抽象层。platform[9]  为框架的跨平台而提供了主要的平台抽象层。它包括了具备键盘、鼠标和触摸输入的窗口系统、着色器编译器和图形 API、网络支持、视频捕获 API、音频 API ，最重要的是 Live System ，一个用于实时感知设计的 DSL。

• makepad draw，构建于 makepad platform 之上，用于 UI 绘制，支持（即时模式） 2D 和 3D 绘制。draw 包括了turtle 布局系统，Turtle布局系统是一种GUI布局管理系统,它模仿Logo编程语言中的turtle图形概念。组件被放置在一个无形的turtle上,然后根据turtle的移动和方向来确定组件的位置和布局，makepad 提供 turtle stack 来高速绘制大量用户界面。

Turtle有一个当前位置和方向,组件根据turtle的状态来定位。可以通过turtle的移动和转向操作来控制组件的布局,就像控制一个turtle在屏幕上绘图一样，支持相对定位和绝对定位。良好的封装,组件不需要关心自身的坐标和布局,只需要跟随turtle的移动，适合动态布局的场景。

• makepad widgets，构建于 Makepad Draw 之上，提供了一组基本的 Widgets。Widgets 是混合渲染模式。Makepad的UI DSL不依赖于单一的巨大解释器。相反，它是根据每个 Widget 进行定义的，每个 Widget 都可以确定自己的渲染模型，无论是即时模式、保留模式，还是通常的混合模式。

看点：makepad Live System

Live System 是可以运行时更新 Makepad 的 DSL，基于 Rust 过程宏来实现的一种实时机制。Makepad 采用一种混合架构来支持 Live System。对于 UI 布局和风格，需要运行时实时更新，而应用程序的基本逻辑是不需要实时更新的。

上面视频是关于 Live System 的演示，项目是 news_feed 

下面是一个代码示例：

上面是 Makepad 提供的 Live System DSL ，使用 live_design! 定义了一个可以修改颜色的按钮。

#[derive(Live)] 为 Button  结构体自动实现 Live trait，这是 Button Widget 和 Live System 互动的基础。#[live] 指明了需要实时更改的那个字段 color。

live_design!  宏里 Button: {{Button}} 定义了一个  Live DSL 对象 Button ，它“继承（inherit）”自结构体 Button 。

通过为 IDE 提供一种机制， Live System 实现了实时编码的功能：

1. 与正在运行的应用程序建立连接

2. 检测正在编辑的代码是否属于同一个实时 DSL 的一部分

3. 将新的 Live DSL 代码作为字符串发送给正在运行的应用

4. 将新的 Live DSL 重新应用到相应的结构体中

Live DSL 类似于 JSON 这样的序列化格式，但它比 JSON 特性更丰富。比如支持继承、Hook等。更多细节可以去上海的 GOSIM workshop 现场让 Rik 亲自告诉你。

Mobile Rust Workshop  日程介绍

9月23日 Makepad 与 Osiris

• 《使用 Makepad 构建应用 ：编程教学》，由 Makepad 创始人 Rik 亲自授课。Rik 同时也是 Cloud9 IDE 的创始人，在使用多年的 Web 前端技术之后，他选择了 Rust ，去创建一个完全 Native 的 UI 框架 Makepad ，以达到他心目中对 UI 的至高追求。

• 同时，他也会带来 《深入理解Makepad：Makepad 架构与设计思路》，这应该是一场不容错过的精彩分享，如果你看过他在 RustNL 大会上的分享的话，我想你一定会想要到现场的。

• 《 Makepad 性能基准测试》，你肯定也想知道使用 Makepad 框架创建的应用程序与 Android 本机编写的类似应用程序相比性能如何？你想知道这个问题就来现场吧，来自FUTUREWEI 的 Edward 会告诉你答案。

• 《如何从零构建自己的Makepad 小窗体》，简直是 Makepad 专场是不是？本场由来自WYEWORKS 的工程师 Jorge 带你现场编码。

• 《身临其境的应用体验》，身临其境的用户体验对应用程序的要求远不止用户界面。与本地系统应用程序集成以管理联系人或文件，对传感器数据做出反应并提供适合目标设备的信息，或适应本地通知系统。在这一环节中，我们将找出杰出应用的显著特征，研究它们的框架如何提供用户界面以外的系统 API 访问，以及 Rust 生态系统如何从中学习。最后，我们将讨论 Osiris 项目如何尝试提供一个框架，将系统 API 暴露给 Rust 应用开发者，我们可以从网络中学到什么，以及你可以如何为这项工作做出贡献。

9月24日  Diosxus / Ylong Runtime / Taffy / Servo

• 《一次编写，随处运行：使用 Diosxus 构建应用程序》，这又是一场现场编码课，由 Diosxus[10] 作者亲自所授。你将见证一个基本应用程序的创建，学习如何整合后端功能、在线部署应用程序、捆绑桌面使用以及模拟移动操作。

• 《TAFFY：通过开放源代码让死亡的依赖复活》，由来自 Bevy 开源项目的工程师 Alice 带来的分享。Diosxus 和 Bevy都在依赖 Taffy[11] UI 库，但它们遇到了一个问题：它所使用的 UI 布局库在其开发公司被收购后已被废弃多年，而且充满了严重的错误。本讲座将介绍我们是如何利用开源技术分叉、修复和维持这个复杂的库的。

• 《Ylong 异步运行时》，来自华为开源的 Rust 异步运行时 Ylong[12]，探索 Rust 的异步机制和第三方社区并发框架。深入研究移动领域对异步框架的需求以及现有移动框架的不足。

• 《你可以参加浏览器平台的开发》，还记得 Servo[13] 吗？Servo 是一个用 Rust 编写的实验性网络引擎。它的代码库很小，社区也很友好，这意味着对于那些想涉足网络浏览器工程世界的人来说，它是一个理想的项目。本讲座将介绍在自己的电脑上构建和运行 Servo 的基础知识，你将收获关于 Servo 如何开发和贡献等知识。

GOSIM 介绍

GOSIM(Gobal OpenSource Innovation Meetup) 全球开源创新汇[14] 是由 WasmEdge Runtime 创始人 Michael Yuan 和 CSDN 创始人兼董事长蒋涛共同发起的开源社区平台。

在这个数字时代，障碍不断被打破，视野持续拓展，GOSIM 为所有开源爱好者照亮了前行的道路。这不仅仅是一个聚会，更是一场变革。通过促进全球合作，多样化技术生态，并分享无与伦比的知识，GOSIM 不仅正在塑造开源的现在，更是锻造其未来。对于那些坚信开源力量，认为它有潜力重新定义技术界限的人，GOSIM 正在召唤您。加入这场运动，成为开源变革的一部分。

GOSIM 由以下三大支柱组成：

• GOSIM 大会（Conference）：每年举办一次的这场会议是开源领域各个领域思想的汇聚之地。无论您是策略师、架构师、研究者，还是仅仅是一名开源爱好者，GOSIM 会议都为您提供了一个深入探索开源技术趋势、策略、治理和最佳实践的机会。

• GOSIM 工作坊（Workshop）：这是理论与实践相结合的地方。作为一个年度盛会，GOSIM 工作坊全面致力于实践行动 —— 开源项目设计、代码开发、黑客马拉松、竞赛以及深入讨论。这是专为那些希望积极塑造开源未来的项目领导者、开发者和维护者量身定制的活动。

• GOSIM 开源驿站（Fellowship）：除了每年的聚会，GOSIM 的核心是其全年无休的奖学金项目。这是一个持续的计划，支持开源项目的开发，得到了赞助者和资助的大力支持。‍

GOSIM Workshop：http://workshop2023.gosim.org/

GOSIM Conference：https://conference2023.gosim.org/

9月23-24日，GOSIM Workshop将在上海金茂君悦大酒店举办。GOSIM 会场将支持「同声传译」，小伙伴们可以放心购票参与，票价不高，学生票 99。立即抓住机会，参与这场年度开源盛会！

参考资料

[1]Makepad: Designing modern UIs with Rust - Rik Arends - RustNL 2023: https://www.youtube.com/watch?v=rC4FCS-oMpg

[2]https://makepad.dev/: https://makepad.dev/

[3]makepad-example-fractal-zoom: https://makepad.nl/makepad/examples/fractal_zoom/src/index.html

[4]makepad-example-ironfish: https://makepad.nl/makepad/examples/ironfish/src/index.html

[5]makepad-example-simple: https://makepad.nl/makepad/examples/simple/src/index.html

[6]makepad-example-numbers: https://makepad.nl/makepad/examples/numbers/src/index.html

[7]makepad-chatgpt-demo: https://github.com/makepad/makepad/tree/master/examples/chatgpt

[8]makepad: https://github.com/makepad/makepad

[9]platform: https://github.com/makepad/makepad/tree/master/platform

[10]Diosxus: https://dioxuslabs.com/

[11]Taffy: https://github.com/DioxusLabs/taffy

[12]Ylong: https://gitee.com/openharmony/commonlibrary_rust_ylong_runtime

[13]Servo: https://github.com/servo/servo

[14]GOSIM(Gobal OpenSource Innovation Meetup) 全球开源创新汇: https://www.gosim.org/

点击阅读原文，立即报名！