实现

版权声明

• 文章作者: flytreeleft - flytreeleft@crazydan.org
• 文章链接: https://duzhou.crazydan.io/docs/development/framework/ui/tech
• 版权声明: 本文章采用许可协议《署名 4.0 国际 (CC BY 4.0)》。 转载或商用请注明来自渡舟平台！

阅读提醒

本文还在编辑整理中，后续可能会发生较大变动，请谨慎阅读！

实现要点：

• 先考虑上层 DSL 以何种规则进行差量，再考虑如何对差量结果做形式变换，并生成运行产物

样式 DSL 展开与合并

注意，形式变换仅发生在从 UI DSL 编译为目标运行产物的时期，开发和设计期均在 UI DSL 的结构上做差量运算。

可能也不需要做 XLib 的形式变换，可以参考 XLib 的解析逻辑，编写专门的 Loader 即可。

• 通过 io.nop.xlang.xpl.xlib.XplLibHelper#loadLib 可以动态加载 XLib
• 可参考 io.nop.xui.utils.XuiHelper#getControlTag 以根据名字获取 XLib 标签
• 参考 io.nop.xlang.xpl.IXplTag#generateNode 实现 XLib 传参与执行
• 参考 io.nop.xui.vue.VueNode 模拟 Vue 语法节点

运行时构建引擎

• 通过 Nop CodeGen 根据合并后的 UI DSL 按照运行时产物源码模板生成运行时产物源码， 最终，再由运行时相关的构建器编译出目标环境可执行的运行时产物

---

• 跨平台方案
  • Lynx: 一套帮助 Web 开发者复用现有经验，通过一份代码同时构建移动端原生界面与 Web 端界面的技术方案。 有着高性能、多功能的渲染引擎、性能优先的双线程 UI 编程范式、以及基于 Rust 的现代工具链等诸多特性
  • Dioxus: is the Rust framework for building fullstack web, desktop, and mobile apps. Iterate with live hotreloading, add server functions, and deploy in record time

Web 端

• 针对不同的 Web 框架（如 Svelte、Vue 等），编写 Nop CodeGen 模板代码
• 对复合样式生成 class，并记录 class 名，存在复用的复合样式以 class 组合方式应用到 DOM 节点上，从而实现对 class 的复用
• 采用 Yoga 布局引擎对 DOM 节点做独立的布局控制，其具备跨平台性，可用于移动设备
  • 官网
  • 具体使用参考《Yoga layout 如何应用到 Web 开发中？》
  • 通过 Yoga 自定义布局，并定义为布局组件

Android 端

• 不同的 Page 对应不同的 Activity，页面路由对应的便是 Activity 的跳转

最佳实践

Web 端

• 对于表格的奇偶行的样式设置，采用动态表达式实现，不采用 css 选择器
• 对于表格布局，通过 css 对单元格的右/下边框设置透明的 border 来实现行/列方向上的 gap