面向组件的应用发布模式设计

[Jarweb]

面向组件的应用发布的模式

架构设计

模式介绍

• 通过接口动态显示页面中的组件。可以做到组件级别的发布，不同于页面即应用的模式。组件通过解耦组合来形成页面界面。
• 开发者负责开发组件、组合组件，形成组件物料市场。
• 产品经理/运营同事负责配置页面、发布页面。通过组件级别的数据分析、ab 测试，快速验证组件组合的效果。
• 每个页面都由组件积木搭建而成，可以方便的、细粒度的、精确的、数据化的替换积木。达到快速上下架组件或定制基于用户角度的个性化界面显示。
• 同时沉淀组件物料市场，某些业务场景的需求，产品经理可以在已有的物料上发布页面。快速验证需求的可行性。

请求流程

• 优化前

• 优化后
  • 框架离线化
  • 资源预加载
  • 组件缓存 cdn

接口设计

• getPageConfig

  • 入参：pageId

  • 出参：json

  • {
      pageId: xxx,
      ...
      chunks: [
        {
          chunkUrl: xxx, // 组件地址
          chunkData: xxx, // 组件数据，来源于后台配置/业务接口，首屏数据尽量放到这个接口里。非首屏数据放到组件内部惰性请求
        },
        {
          chunkUrl: xxx,
          chunkData: xxx,
        }
        ...
      ]
    }

  • 实现组件动态化

    • 由产品/运营根据数据来决策发布组件
    • 组件 ab 测试，版本，环境

  • 每个页面都会请求这个接口，会存在请求量过大的情况，如何优化？

    • 缓存 redis
    • 负载均衡

  • 

组件设计

• 数据来源
  • 组件外部 chunkData
  • 组件内部接口请求
  • 组件需要同时满足这2种数据注入方式
• 组件状态
  • 数据加载中
  • 无数据占位
  • 出错占位
• 埋点，版本，环境

管理后台

• 组件物料市场
  • 组件组合，组件管理，组件预览
• 页面管理
  • 组件组合，组件数据配置，组件上下架，组件版本，页面配置，页面预览，环境管理，组件 ab 数据