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

本期介绍我们新的开源前端框架：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零件的代码，只关心通用UI零件的实现，比如按钮组件、模态框组件等。

每个组件，实际上是一个React的函数组件，是需要手写代码的。

但由于可以脱离业务，且组件是完全独立不允许相互关联的，所以每个组件都可以无条件复用在多个项目。

这里需要特别说明的是，这里的组件听起来跟组件工具箱一样，如headlessUI、ElementUI这些组件工具箱。

实际上，Trick2的组件是一种统一的封装标准，让每一个组件拥有统一的使用方式，允许单独调试开发。

里面除了可以使用预设的headlessUI的UI零件，也可以引入其他第三方UI零件。

当然，Trick2也提供了官方组件库，可以一键下载更新组件。

布局代码是具体页面的布局，只关心如何组织UI组件，也就是对组件摆放位置进行编排。

例如，一个页面中摆放了一个“标题”和一个“表单”，“表单”中摆放多个“表单项”和一个“按钮”。

布局代码，只需要标记组件摆放位置和嵌套关系，所以布局代码实际上是一个JSON配置，无需编写真正意义的代码。

由于Trick2的布局代码允许嵌套引用组件，所以组件的复用度将大大提升。

而且全局组件嵌套关系集中在一个地方，不会出现直接使用React或Vue时，可能出现的蜘蛛网式的混乱引用。

实际工作原理方面。

为了让UI组件独立封装，同一页面可多次复用某个UI组件，Trick2引入了React，作为封装UI组件的基础工具。

每个UI组件实际上是一个React的函数组件。

为了保持单个UI组件完全独立，灵活摆放/替换子组件，Trick2加入了插槽和模板选择机制。

每个UI组件会根据组件参数和通用模板语法，自动选择某个子组件作为模板，并放入预留的插槽中。

插槽机制，虽然听起来很复杂。实际上，就是_templ开头的组件参数，框架会自动替换为对应的子节点。

如例子中的_templ参数设置为child##0，则表示选择第1个子组件放入插槽中。这种插槽选择机制是框架的通用机制，在开发组件时不需要手工处理。

布局代码虽然是一个JSON配置，在页面真正运行时，代码生成器Christmas会将JSON配置生成为真正的代码。

3、逻辑部分

接下来是逻辑部分。

对于逻辑部分而言，就是多个逻辑功能的集合，对于单个逻辑功能而言，是多个步骤的集合。

以一个表单页面的提交功能为例，可以对其理解为，第1步“获取UI数据”；第2步“检查数据；”第3步“请求后端API”​。

​针对逻辑部分，Trick2将代码分离成了两层：模块代码、业务代码。

模块代码，是实际执行功能的代码，只关心通用功能的实现，拥有统一的使用方式，比如参数检查模块、API请求模块。

每个模块，实际上是一个Js函数，是需要手写代码的。

但由于可以脱离业务，且模块是完全独立不允许相互关联的，所以这部分代码可以无条件复用在多个项目。

当然，Trick2也提供了官方模块库，可以一键下载更新模块。

业务代码，是跟业务强关联的，只关心实现业务功能的步骤，也就是对模块使用顺序进行编排。

例如，第1步“获取UI数据”，第2步“请求后端API”。

​由于业务代码只需要编排模块使用顺序，所以业务代码实际上是一个JSON配置，无需编写真正意义的代码。

实际工作原理方面，逻辑部分的工作原理与后端框架Once2是一样的，都是加入了数据池。

数据池可以看作是一个功能流程的全局变量，所有模块都可以对其进行添加、删除数据。

​在功能逻辑开始时，将预设数据存放入数据池中。

功能逻辑调用模块时，需要设置模块参数以及将数据池传递给模块。

模块按模块参数执行任务时，根据模块参数从数据池获取数据或对数据池进行修改。

模块执行任务完毕后，检查模块是否报错，不报错继续下一步，否则中断逻辑。

当然报错中断只是默认行为，可以添加逻辑选择器以实现更加复杂的逻辑，如发生错误重试、发生错误启动异常逻辑等。

业务代码虽然是一个JSON配置，在页面真正运行时，代码生成器Christmas会将JSON配置生成为真正的代码。

4、UI与逻辑关联

接下来，是UI与逻辑关联。

为了关联UI部分、逻辑部分，Trick2加入了全局消息订阅机制。

每个UI组件实例都可以设置订阅ID进行监听，每个逻辑功能都自动生成了订阅ID进行监听。

UI组件参数可以绑定事件触发时的目标订阅ID，当事件触发时，自动触发某个UI组件实例或者逻辑功能。

逻辑功能可通过特定模块，对指定UI组件实例（根据订阅ID）进行设置，修改或者获取数据。

5、Trick2只是一种规则

Trick2实际上是一个多页面的React工程，引入了TailwindCSS、headlessUI作为预设的样式工具。

工程使用Webpack进行编译、打包。工程内无黑盒代码，任何问题都可以以React、Webpack工程的视角进行排查。

​总的来说，Trick2只是一种规则。

只做了一件事情，就是将代码分离成了模块代码和业务代码。

​模块代码是需要写实际代码的，是需要有一定前端开发经验的程序员才能胜任的。

我们希望这些工作能独立开来。

一方面模块可以单独调试开发，且无条件复用在别的项目。

另一方面，由于项目进度等原因，某些模块可能是临时开发或者存在缺陷的，以后可以单独替换这些模块。

​业务代码，由于使用Json配置替代了编码，且无需了解实际模块的运行原理，所以业务代码可以交由经验尚浅的程序员完成。

其中，若是想要做好页面布局的话，还是需要熟悉CSS相关知识的

业务代码以JSON配置替代，除了能加快开发效率。

更重要的是，可以约束业务代码编写，让业务逻辑更加清晰明了，避免每次排查BUG时，都需要先花很长时间理解逻辑，然后再逐一排查。

​当然，Trick2已经是一个比较完整的低代码框架内核，只是目前还缺少图形编辑界面，以后我们将继续推进。

总结

最后，Trick2已经放在了GitHub、Gitee。

我们也提供了完整的使用文档，感兴趣的小伙伴可以尝试一下，点个Star就更好了。

我知道，Trick2这种工程方式并不是大多数人熟悉的开发方式。

因为它是从软件工程出发的顶层架构，更看重项目过程、工程质量、项目成本、可持续迭代升级，而非仅仅是如何快速做出个什么能运行的就行。