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 等移动应用程序开发框架之后,确定了以下模式:
所谓的“声明式”UI 开发风格已经普遍获胜。过去 5 年,Android 和 iOS 原生平台以及跨平台框架逐渐摆脱了传统的“命令式”风格。
即使是领先的框架也不成熟。场不处于平衡状态。由此推论,现在正是竞争解决方案进入市场的最佳时机。
移动设备上的 JavaScript 与 Web 上的 JavaScript 不同。跨平台应用程序开发框架必须选择一种语言;大多数人选择JavaScript。这为浏览器和已建立的开发社区的技术重用提供了机会,但也带来了与语言本身和该社区的实践相关的挑战。实现快速启动以及流畅、无卡顿的交互和动画促使某些框架做出与 Web 上不同的权衡。
性能是一个框架问题。框架在“什么”和“如何”之间创建了分工:应用程序开发人员描述应该发生什么,并将其转化为良好的用户体验是框架的责任。框架用来确保良好性能的通用技术是编译。一些例子包括:React Native 中 JavaScript 的提前编译,或者 Flutter 中 Dart 的提前编译;Ionic/Capacitor 中 Angular 接口的提前编译;Flutter 新的 Impeller 渲染器中着色器的提前编译。
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 实现了实时编码的功能:
与正在运行的应用程序建立连接
检测正在编辑的代码是否属于同一个实时 DSL 的一部分
将新的 Live DSL 代码作为字符串发送给正在运行的应用
将新的 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 的核心是其全年无休的奖学金项目。这是一个持续的计划,支持开源项目的开发,得到了赞助者和资助的大力支持。
9月23-24日,GOSIM Workshop将在上海金茂君悦大酒店举办。GOSIM 会场将支持「同声传译」,小伙伴们可以放心购票参与,票价不高,学生票 99。立即抓住机会,参与这场年度开源盛会!