早报@2019-02-15

[whatwewant]

页面可视化搭建工具前生今世 - 前端早读课 | 陈韩杰* 非常棒的文章，值得细细体味

• 背景: 运营工具，快速生成和发布页面，提升上线效率；无需开发人员介入，节省开发人力;
• 主要内容
  • 1 活动页面重复开发的痛点
  • 2 开发可视化搭建工具的技术要点
  • 3 理想的运营页面可视化搭建工具
  • 4 开源页面搭建框架 pipeline 介绍
• 1 活动页面开发之痛
  • 产品介绍页、营销页、活动页、图片展示页等特点
    • 页面类似: 页面布局和业务逻辑较固定;
    • 需求高频: 每周甚至每天有多个这种需求;
    • 迭代快速: 开发时间短，上线时间紧;
    • 开发性价比低: 开发任务重复，消耗各方的沟通时间和人力;
  • 活动页面常规开发流程
    • 
    • 流程
      • 1 运营/产品提出页面需求
      • 2 走项目流程进入开发环节
      • 3 开发根据设计稿完成页面开发
      • 4 测试进行页面测试
      • 5 运维进行页面上线
      • 6 运营/产品进行页面验收
    • 痛点
      • 1 多方参与，反复沟通，串行流程;
      • 2 页面上线周期长，无法快速响应活动需求;
      • 3 人力陷入重复工作泥潭，忙碌而低效;
  • 更优的流程
    • 思想: 针对特点和痛点，应当页面配置化，配种工作从开发人员交给产品/运营等需求方; 开发和设计人员只需要提供配置化页面支持; 更优的活动流程依靠页面可视化搭建系统来实现;
    • 
    • 流程
      • 1 运营/产品提出页面需求;
      • 2 运营/产品在页面可视化搭建系统中选取合适的页面模板进行页面搭建;
      • 3 页面自动化发布上线，页面需求完成，流程结束;
      • 4 如果没有找到合适的模板，设计进行页面模板设计;
      • 5 开发进行模板开发，并将页面模板添加到页面可视化搭建系统中;
      • 6 运营/产品继续流程2;
• 2 页面可视化搭建工具的技术要点
  • 技术要点:
    • 1 页面组件化
    • 2 页面模板
    • 3 页面可视化编辑
    • 4 组件层级关系
    • 5 页面打包
    • 6 实时预览
    • 7 页面组件开发
  • 页面组件化
    • 组件化的优点: 相对直白的HTML元素
      • 1 提供可控可预测的组件接口(Interface/Props)，基本UI可控，并且抽象后有机会跨端;
      • 2 简化操作，组件树组合，组件配置编辑(Props);
    • 页面前端框架:
      • 1 框架解耦: 图例
  • 页面模板
    • 页面模板包含完整的业务逻辑，有助于快速生成业务页面; 不同的页面模板适用于不同的业务功能; 从模板库中选择合适的页面模板，并派生出默认业务页面，再对默认页面进行可视化编辑，从而生成目标业务页面.
  • 页面编辑 - 页面由页面组件组合而成
    • 1 编辑页面组件 - 动态组件，动态页面
    • 2 编辑页面内容 - 根据组件的属性/接口(Interface/Props)进行配置
    • 3 编辑配置数据 - 组件属性(Props) + 组件状态(State) + 组件HTML模板(Template) + 组件业务逻辑(JavaScript) + 组件样式布局(Style/Layout)等
    • 4 组件差异化
  • 组件层级关系
    • 组件树定义了组件间父子兄弟的层级关系, 父子组件通过数据流和事件进行关联: 数据从父组件的 State 传递到子组件的 Props; 子组件的变更触发 Event 通知父组件.
    • 层级关系对数据流和布局的影响
      • 设计页面可视化搭建工具的组件编辑功能时，需要重点关注组件树的层级关系，解决组件间数据依赖和组件间布局适配问题.
      • 页面可视化搭建工具需要制定组件嵌套的规则和约束，通过组件嵌套规则来确保可视化编辑后的组件树正常渲染.
    • 不嵌套的前端框架组件
      • 移动端 - 布局策略: 宽度铺满，高度滚动; 交互逻辑: 组件自上而下顺序平铺，互为兄弟.
      • 案例 - 阿里云凤蝶
      • 案例 - 飞冰
  • 页面预览
    • 页面预览示例
    • 实现页面预览方式(两种): 1.页面挂载 2.后台渲染
    • 1 页面挂载
      • 也就是前端渲染 - 需要提供组件库渲染runtime（组件库前端框架）; 为了实现前端渲染，编辑器前端源码需要引入组件库源码，后续组件更新，编辑器需要同步更新.
      • 特点:
        • 实现页面预览技术方案可行，实时渲染速度快;
        • 为了实现渲染，编辑器的技术选型需要和组件库前端一致;
        • 编辑器源码和组件库源码耦合 (一定耦合吗？可以独立发布吗？);
        • 组件库组件渲染后的代码逻辑和样式布局，可能会污染编辑器（样式约定? style ?）;
    • 2 后台渲染
      • 可以只是iframe渲染，也可以是服务端/后端渲染，或者说SSR - 在后端进行用户编辑结果页面的渲染和生成，通过iframe加载和展示结果页面.
      • 特点:
        • 可以实现编辑器和组件库前端框架的分离;
        • 可以实现编辑器和组件库各组件的分离;
        • 可以避免预览页面的逻辑和样式污染编辑器环境;
        • 要求后台和组件库提供页面后台渲染能力, 并要求后台渲染速度快，用户需要实时预览;
  • 页面构建
    • 是组件化前端源码生成页面资源的必要环节:
      • 开发调试: 在开发时需要进行页面构建开发构建来进行页面调试;
      • 发布上线: 在发布前需要进行生产构建;

      在可视化搭建页面时需要"实时"预览，要求页面构建效率高，实现快速的构建和打包. 更进一步, 后台渲染其实和服务端渲染很像，能否借鉴服务端渲染(SSR)的技术思路.

  • 自定义模板和组件开发
    • 页面可视化工具搭建在业务中的落地，需要根据不同的业务场景进行业务组件和页面模板的自定义开发，最好有独立开发工具或者IDE。
    • 对页面可视化工具要求有三:
      • 页面可视化搭建工具要支持现有的前端框架
        • 为了避免后续组件和模板自定义开发时的工作量和割裂感，我们希望复用现有的前端框架组件，而不是用另一个前端框架重写一遍;
      • 组件和模板的编写方式须遵循较简单的编写约定，避免开发人员难上手和写起来不舒服;
      • 自定义模板和组件在开发模式下进行开发和调试.
• 3 理想的活动页面可视化搭建工具

  页面可视化搭建工具，需要对页面做一些约定和约束，在可视化搭建时遵循工具约定和约束来编辑页面.从页面可视化搭建工具的技术要点中，可以归纳出活动页面可视化搭建工具的理想状态.

  • 概述、理想状态
    • 运营页面搭建工具，实现基于模板的页面生成;
    • 将页面的逻辑功能封装在组件内部，声明页面配置数据并提供配置表单，通过对配置表单的数据填充，进行少量的页面编辑就可以完成业务页面的搭建.
  • 不嵌套的组件
    • 在编辑自由度的选择上, 选用不嵌套的组件. 各组件铺满页面宽度, 在页面高度方向顺序排列, 解决组件嵌套带来的数据流问题.
  • 配置表单生成
    • 配置表单的作用是生成和约束 JSON 配置数据，业界已有对 JSON 进行描述和自动生成表单的方案 -- JSON Schema. 按照 JSON Schema 规范对 JSON 数据进行描述，可以动态渲染出配置表单; 且 JSON Schema 可以对编辑后的数据做格式校验，避免编辑错误. 这比编写一个表单页面更简单和高效.
    • JOSON Schema 的语法并不是很精简，云凤蝶的 Schema 语法等方案更加简洁，但是云凤蝶的语法没有开源的表单生成库支持，在开源实践上还是 JSON Schema 最佳.
  • 理想活动页面搭建工具特点
    • 采用组件化和页面模板实现页面生成效率的提升;
    • 采用不嵌套的组件层级简化数据流和样式布局;
    • 采用 JSON Schema 声明配置数据, 自动生成配置表单;
    • 采用后台渲染，使编辑系统和组件前端框架解耦;
    • 在遵循编辑系统约定下, 组件可以自由拓展, 前端框架可以自由选择.
• 4 页面可视化搭建框架 Pipeline
  • 简介
    • 类型: 开源的页面可视化搭建框架
    • 核心: 实现了页面可视化搭建的基本功能, 解决了页面可视化搭建的基本难点, 可以让开发者快速拥有页面搭建的能力, 并支持私有部署和二次开发.
    • 项目地址: https://github.com/page-pipepline
    • 体验地址: https://page-pipepline.github.io/pipeline-editor/dist/#/
    • 项目文档: https://github.com/page-pipepline/pipeline-document
  • 功能 Demo
    • 可视化编辑(能力)
      • 可视化修改页面全局配置, 如修改页面主题色;
      • 可视化修改页面组件内容, 如修改组件的图片和替换组件文本;
      • 实时预览页面编辑效果, 即刻获得搭建后的页面;
      • 页面支持用户交互.
    • 组件编辑(能力)
      • 动态增删页面组件;
      • 可视化的组件拖拽, 拖拽组件库插入到页面组件列表中;
      • 组件可以包含业务逻辑(网络请求和用户交互);
  • 支持的前端框架
    • 支持不同的前端框架，得益于后台渲染, 理论上支持所有前端框架;
    • 目前已支持Vue, React 和 Omi.
  • 框架特点
    • 开原页面可视化搭建框架;
    • 自定义页面可配置字段;
    • 组件动态删减, 组件拖拽;
    • 从页面模板快速生成业务页面;
    • 模板工程前端框架无关: 支持 Vue 和 React ;
    • 支持自由拓展页面组件, 不限制组件样式布局, 接口调用等;
    • 前端工程约束少，不限制使用其他技术 (Redux, SSR, UI库等);
  • 与云凤蝶的对比
    • 优秀，具体查看原文
  • 下一步工作
    • 完善技术实现文档，使用文档，系统部署文档和模板开发文档;
    • 提供对更多前端框架的支持;
    • 提供更加丰富的可视化交互方式;
• 总结
  • 讨论了活动页面开发的痛点, 总结出页面可视化搭建工具的7个技术要点和4个技术难点, 并整理出理想的运营页面可视化搭建工具的工作内容, 最后结合Pipepline实现验证可行性.
• 参考
  • pipeline:https://github.com/page-pipepline
  • 页面可视化搭建工具前生今世:https://github.com/CntChen/cntchen.github.io/issues /15
  • Vue2.0学习笔记：组件数据传递:https://www.w3cplus.com/vue/component-data-and-props-part1.html
  • 阿里云凤蝶:https://i.yunfengdie.com/
• tags: 页面可视化搭建,可视化,可视化编辑,拖拽,Drag/Drop,JSON Schema,React,Vue,Pipeline,云凤蝶,发布流程,上线流程,开发流程,运营,产品,活动页