FaceFlow 开发者概览

FaceFlow 开发者概览

FaceFlowPageFace 内部的结构化无代码构建核心。

从技术角度来看,它更应被理解为一个由可重用对象、受控渲染和明确所有权边界组成的系统,而不是一个随意的页面编辑器。

核心技术模型

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)
  • 某些内容是否应为动态或静态
  • 共享资产的真实变更半径是多少
  • 页面中有多少内容应放在 布局、组件 还是 页面 组合中

这些决策对可维护性的影响比任何单个页面内容都更大。

常见技术错误

避免以下模式:

  • 在应使用变量时使用组件
  • 在需要真实区段模式时使用变量
  • 将页面特定内容推入布局
  • 创建一个过大的组件以试图解决许多不相关用例
  • 将列表视为不明确内容架构的替代方案
  • 在未审查完整渲染和审核流程的情况下嵌入业务工作流

推荐阅读顺序

  1. Variables
  2. Components
  3. Layouts
  4. Pages
  5. Lists
  6. Forms
  7. Reviews
  8. Scope System
  9. Facet

该路径从最小的可重用单元移动到完整网站组装,然后进入模板层。

相关