Skip to content

3.3模版设计

模板通常是比较完整的应用程序结构,可以快速创建一个具有基本功能的应用程序,并且可以根据需要进行修改和扩展,不再单单只有前端可见的内容,会与对应的业务绑定更深,比如电商、CRM、CMS 等。

模板中心

在设计低代码模板的时候,往往需要考虑以下几点:

  • 什么用户需要来使用模板?
  • 模板具体需要做哪些事情?
  • 怎么有效管理模板?

对此,我们的模板中心需要具备如下的能力:

  • 业务需求:了解目标用户的需求和场景,以便针对具体实施事物进行设计,从而带来更好的用户产品体验;
  • 灵活可用:设计易于使用的界面和流程,将复杂度收敛到底层维护,让用户能够更流畅的完成任务;
  • 可维护性:打造标准化、自动化的模板管理方案,能够更加方便的管理平台内的通用模板的创建、修改、发布等相关事宜。

功能设计

在设计初期,模板中心大体上需要具备以下几个功能:

  • 模板分类:为了方便用户查找和选择模板,模板中心需要进行分类,如按行业、领域、应用功能等分类,提供细致化的市场管理;
  • 预览查阅:用户可以先查阅模板的具体效果和功能,再决定是否进行安装使用;
  • 模板发布:需要设计将应用发布为模板的能力,使用者可以将自己的想法和经验发布到模板中心,更好地管理自己的应用,方便团队其他成员和自己复用能力;
  • 模板管理:需要设计管理员和用户相应的模板管理能力,可以对其进行删除和更新等行为。在这之上可以扩展相关数据能力,如收藏、喜欢、下载排行等 Rank 功能。

所以模板也可以看成更高级的复合物料,由当前领域的熟练工按照业务需求使用基础的物料配置一个模板,通过模板市场可以提供给不熟悉开发模式,或者对当前领域并不熟悉的人使用,如果熟悉淘宝装修的话,也可以理解一些设计功底好的运营配置好各种不同的营销店铺模板提供给小 B 商家使用。

模板工程

尽管低代码平台可以大大减少应用程序开发的时间和成本,但基于 Schema 配置出来的功能一定是平台内置的且要保持最大程度的通用性

低代码平台通常会提供运行时渲染和代码工程生成这两种产物结构,使得用户可以查看和编辑由平台生成的代码。这个机制可以是一个内置的代码编辑器,也可以是一种将代码导出为标准工程项目的功能。通过这种方式,用户可以在需要时查看和编辑代码,从而更好地控制他们的应用程序完成需求开发。

通常情况下,一个模板工程会包含一些通用的功能和模块,例如路由、状态管理、主题等,开发者可以在这个基础上进行扩展和定制。在低代码平台中,整个模板工程的基础模块通常会取决于产品的协议和工程的设计,基于这个基础之上才能保证后续生成的项目工程具备一定的扩展能力和可用性。

生成代码

此时就需要用到一个前端历史发展以来最常见的技术,也就是模板引擎。通过模板引擎定义好渲染规则来插入相应的内容,最后将其输出成为一系列的文件夹与文件,最后插入到模板工程当中,就可以进行打包下载了。

如果有同学做过通过 Swagger、OpenApi 等接口协议生成本地 Axios 接口和 TypeScript 的类型的同学获取就会比较清楚内部的一些实现逻辑:

当所有文件生成完毕后,就可以写入到本地目录。此时一个简单的接口代码生成器就完成了。

低代码平台的模板渲染也是一个道理,不过相比于生成接口请求而言,页面生成更加复杂,需要将国际化多语言、动态表达式、页面异步资源依赖、数据源等都做一个通用的生成处理。这里先简单做一个初步了解,后续在实现的时候会一步步去进行实现。

模板引擎对比

  • Handlebars.js:它使用基于标记的模板语言,支持条件、迭代、部分和帮助程序。它易于学习和使用,并且具有广泛的社区支持;
  • Mustache:也是基于标记的模板引擎,它的语法简单易懂,易于学习和使用。它支持条件、迭代和部分,可用于多种编程语言,并且有大量的社区支持;
  • EJS:基于 JavaScript 的模板引擎,它使用嵌入式 JavaScript 作为模板语言,支持条件、迭代和部分。它易于学习和使用,可以轻松地与 Node.js 和 Express.js 等 Web 框架集成;
  • doT.js:大小只有 4KB,渲染性能很好,支持原生的写法,无过多的三方依赖;
  • art-template: 是一个简单且超快的模板引擎,它通过范围预声明技术优化模板渲染速度,从而实现接近 JavaScript 极限的运行时性能。同时,它同时支持 Node.js 和浏览器;
  • Nunjucks: 它允许在应用程序中使用类似 HTML 的模板语言,从而快速生成动态内容。Nunjucks 支持变量、条件语句、循环语句、过滤器等基本语法,同时还支持继承、包含、宏等高级特性,可以用来创建复杂的模板结构。

共 20 个模块,1301 篇 Markdown 文档。