FaceFlow 开发者概览
FaceFlow 开发者概览
FaceFlow 是 PageFace 内部的结构化无代码构建核心。
从技术角度来看,它更应被理解为一个由可重用对象、受控渲染和明确所有权边界组成的系统,而不是一个随意的页面编辑器。
核心技术模型
FaceFlow 由一小组具有不同职责的对象类型组成:
- 变量:用于轻量可重用片段
- 组件:用于可重用区段的契约
- 布局:用于共享页面外壳
- 页面:用于组装的体验
- 列表:用于动态集合驱动的输出
- 表单:用于结构化提交工作流
- 评论:用于受审核的信任内容
每种对象用于解决网站系统的不同层级。当这些边界清晰时,FaceFlow 在规模化时仍然可维护。
如何看待 FaceFlow
最清晰的思维模型是:
Variables -> small reusable fragments
Components -> reusable sections
Layouts -> page shells
Pages -> assembled experiences
Lists -> dynamic archives and collections
Forms -> lead and request workflows
Reviews -> trust and proof workflows这不仅仅是内容层级。这是一个架构层级。
对象边界
使用此决策模型:
- 当可重用单元较小且参数化时,使用 变量
- 当可重用单元是具有面向编辑器的模式(schema)的完整区段时,使用 组件
- 当关注点是围绕多个页面的页面框架时,使用 布局
- 当在组装最终路由或体验时,使用 页面
- 当内容选择和分页是契约的一部分时,使用 列表
- 当收集结构化提交时,使用 表单
- 当收集并发布受治理的公开反馈时,使用 评论
FaceFlow 中大多数技术漂移发生在某一对象开始承担另一个对象的职责时。
示例系统
Layout:
default-site-shell
Page:
/enterprise/
Components:
hero-banner
benefits-grid
demo-request-section
review-strip
Embedded systems:
<div data-form-embed="enterprise-demo-request"></div>
<div data-review-embed="customer-success-reviews"></div>
Variables:
[[site-announcement]]
[[sales-contact-badge]]该示例之所以能够保持可维护性,是因为每个关注点都有明确归属。
范围与变更影响
范围是 FaceFlow 中最重要的技术概念之一。
它控制可重用区段是表现为:
- 站点范围资产
- 布局系列资产
- 页面本地资产
当技术用户选择了错误的范围时,变更影响变得难以预测。一个本地区段可能会意外成为全局依赖,或者重复的页面内容可能在本应被共享之后仍然长时间保持重复。
模板层
FaceFlow 的模板通过 Facet 编写。
这意味着技术用户应理解:
- 字段输出
- 条件判断
- 循环
- 过滤器
- 变量嵌入
- 安全的区块组合
Example:
<section class="hero">
<h1>{{ title }}</h1>
{{#if summary}}
<p>{{ summary }}</p>
{{/if}}
[[sales-contact-badge]]
</section>Facet 是模板层。FaceFlow 则是围绕它的结构化对象系统。
技术用户应关注的重点
在使用 FaceFlow 设计时,最重要的技术决策通常是:
- 重用应放在哪里
- 一个区段应暴露多少模式(schema)
- 某些内容是否应为动态或静态
- 共享资产的真实变更半径是多少
- 页面中有多少内容应放在 布局、组件 还是 页面 组合中
这些决策对可维护性的影响比任何单个页面内容都更大。
常见技术错误
避免以下模式:
- 在应使用变量时使用组件
- 在需要真实区段模式时使用变量
- 将页面特定内容推入布局
- 创建一个过大的组件以试图解决许多不相关用例
- 将列表视为不明确内容架构的替代方案
- 在未审查完整渲染和审核流程的情况下嵌入业务工作流
推荐阅读顺序
该路径从最小的可重用单元移动到完整网站组装,然后进入模板层。