Tenon系列 —— 从零开始的“渐进式”低代码平台

974 阅读6分钟

本系统中文名为榫卯,译名Tenon(下文将以Tenon代称)。这个名字诣在用户使用Tenon时可以像榫卯一样精细搭配,以更原始的方式进行组合。Tenon提供丰富物料的同时也在系统设计层面做到了高度自由化的实现,用户可以系统提供的丰富钩子中实现自定义逻辑,再搭配上Tenon自研的同构物料系统搭配自研编译器,使得Tenon在不同平台上运行变得可能。并且,Tenon提供渐进式的低代码服务,用户可以选择进行页面级别或系统级别的接入,当用户只需要轻量的页面级服务时,Tenon可以做到针对页面级别的管理,当用户需要系统级服务时,Tenon也有系统级SDK支持。综上所述,Tenon在实现高度自由化的同时,提供渐进式服务,使得用户可以选择让Tenon负责软件级的辅助运维。

想直接看代码的可以直接这边请👉 Github地址 ⭐(暗示)

体验地址👉 Tenon,算了不暗示了,觉得不错GitHub点颗星呀!

Tenon系列文章

Tenon

概要

Tenon是我耗时近半年完成的系统,是一个完全从零开始搭建的低代码平台,同时他也是我本科的毕业设计。虽然说在设计和实现上还有很多可以完善或改进的地方,但是从功能上来说现在的Tenon已经是具有一定可用性的了,所以我决定在掘金上把Tenon分享出来,大家一起探讨学习,共同进步呀~

Tenon是一个由多个包构成的比较复杂的系统,我将会分成几篇文章来分别介绍Tenon的不同功能及设计或实思路,下面来列一下我的发文计划,如果不鸽的话

1. 概要(本文)——主要介绍一下Tenon,预告一下发文计划,并简单的介绍一下Tenon的架构设计。

2. Tenon的主程序介绍——Tenon的主程序是供Tenon的直接用户使用的系统,基于web平台连接用户与Tenon的内部功能。

3. Tenon的Node框架以及基于该框架开发的后端

4. Tenon的同构物料库以及Tenon-Engine

5. 整理与总结

一些截图预告

image.png

image.png

image.png

image.png

Tenon架构设计

先放一张项目结构图

image.png

Tenon采用MonoRepo的方式来管理,直接使用的pnpm的workspace偷了个懒,packages下放置各模块的包,apps是基于Tenon做的demo应用。先简要介绍一下各个包的用途。

Tenon-CMS 该包主要实现Tenon提供给用户使用的前端功能。Tenon-CMS相当于一个入口,用户可以通过这个入口操作Tenon内部封装好的功能。Tenon-CMS主要使用Vue来搭建页面,为了保障系统的可拓展性及用户体验,系统需要在路由阶段多做加载提示处理。为了保障性能,系统需要对页面布局粒度做懒加载,这样可以防止加载用户不需要的代码,导致拖慢了页面性能,用户体验受损。

Tenon-BFF 该包主要实现Tenon提供给Tenon-CMS端后台支持的功能。Tenon-BFF将Tenon-CMS端所需要的借口封装在Tenon-Node- Framework提供的Controller中,将数据持久层相关操作封装在Service中。并且Tenon-BFF作为中间层,会引入Tenon-Materials为Tenon-CMS提供物料支持。

Tenon-Engine 该包为Tenon的核心包之一,提供Tenon自身的组件服务,包括但不限于schema的处理,Tenon组件的事件处理,Tenon组件属性的动态绑定处理,Tenon组件定义的schema处理并提供一些封装好的schema,Tenon组件的事件调用钩子,Tenon组件的生命周期钩子,Tenon组件的属性绑定钩子,Tenon组件的静态注入钩子,Tenon组件的配置转换,Tenon组件的状态管理以及Tenon组件类。

Tenon-Materials 该包为Tenon的核心包之一,作为Tenon的物料仓库存在。Tenon-Materials主要负责两个功能,提供不同平台的物料,提供不同平台的物料初始化方法供Tenon-CMS端或Tenon-SDK调用。每个物料主要有四个文件组成:组件配置文件、组件文档文件、组件逻辑文件、组件视图文件。不同平台的初始化方法就是通过内部实现的模板编译器对组件的视图文件做处理生成AST,并且把组件配置和组件文档及组件逻辑与之结合并封装为一个组件的元数据,当这个组件被渲染页面上时,会通过Tenon定义的不同平台的渲染方式来解析视图配置并运行相关逻辑功能,从而将一个物料转换为一个Tenon组件并进一步的渲染到页面上。

Tenon-Flow 该包为Tenon的构建流程包,提供Tenon调试启动以及产物构建功能。为了方便的管理多个项目之间的启动以及更新,Tenon-Flow利用IPC进行进程通信来有序的规划各个服务的启动,并且Tenon-Flow也可以在开发完成后负责整个项目的产物构建功能。

Tenon-Shared 该包为Tenon的工具包,提供各个包中都会用到的一些工具函数。比如对各种设计模式的封装,对不同数据结构的处理,包括但不限于:字符串操作,劫持作用域操作,数组操作,对象操作以及一些自定义Typescript工具类型。

Tenon-SDK 该包为Tenon的核心包之一,为用户在各平台接入Tenon应用的能力,Tenon-SDK会将Tenon的核心功能做封装,用户可以调用该包提供的方法去激活Tenon应用,用户根据在编辑器上获取到的ID去激活Tenon应用,Tenon在校验过该ID后会将对应配置返回给SDK,从而在运行时激活程序。

Tenon-Internal-Components 该包为Tenon的物料辅助包,Tenon- Materials中的物料可以声明该包中注册过的内部组件并使用其提供的所有功能。借助这种能力,可以让物料的开发变得更加简便,并且使物料与组件库解耦。

Tenon-Node-Framework 该包为Tenon的核心包之一,其基于Koa套件封装了一个基于装饰器的分层Node框架。该框架提供内置Controller,Service两大类装饰器,用户可以根据这些装饰器自定义接口以及服务。并且Tenon-Node-Framework提供了内置的中间件系统,用户可以使用Middleware中间件去对请求做中间处理。

先简单的介绍到这里吧,下一篇Tenon系列 —— Tenon技术栈分解以及编辑器设计见~