【开源】低代码 前端网页框架，8年终于完成，Trick2，50%成本降低

大家好，欢迎来到停止重构的频道。

本期介绍我们新的开源前端框架：Trick2

忠于原生网页开发的Trick1，仍然需要花大量的时间编写UI模块，UI模块的复用度也很低。且无法以配置Json的方式代替业务代码编写，也就无法成为真正的低代码内核。

在经历了6年的十几个项目沉淀，我们找到了进一步发展的方向。

在过去2年里，我们做了一次彻底的颠覆性重构。

Trick2达成了停止重构的架构目标，所有代码都只写一次，可以成为前端网页的低代码内核。

Trick1能节省大概20%的人工成本那么。

Trick2将能节省大概50%以上的人工成本，如果模块积累足够多，节省的人工成本将更多。

我们按这样的顺序展开介绍：

• UI和逻辑分离
• UI部分
• 逻辑部分
• UI与逻辑关联
• Trick2只是一种规则

1、UI与逻辑分离

首先是UI和逻辑分离。

从宏观上讲，一个页面应该分离为两部分：UI部分和逻辑部分。

UI部分用于HTML页面描画，也就是页面布局、组件样式、元素动画等等。

逻辑部分用于逻辑功能执行，也就是数据检查、API请求等等。

2、UI部分

对于UI部分而言，就好比是一个沙盘，按指定位置摆放UI组件。

单个UI组件，也可以是一个小沙盘，在此摆放其他UI组件。

一个网页的UI，是由树形堆叠嵌套的沙盘组成的。

以一个表单页面为例，可以对其理解为，页面中摆放了“标题”、“表单”；“表单”中摆放了“多个表单项”、“按钮”；单个“表单项”中摆放了“标题”、“输入框”。

针对UI部分，Trick2将代码分离成了：​模块代码、业务代码。为了防止与逻辑部分混淆，这里我们取一个别名：组件代码、布局代码。

组件代码，是实际UI零件的代码，