2019 上半年计划 - Partial

2019上半年 小目标

1. Kube

1.1 项目元素

1. editor - 编辑器
2. lego - 组件运行时框架，包括组件封装，状态注册与事件通信等
3. materials 组件物料库(包括不同类型的组件和系统主题模板)

1.2 搭建流程

• 组件库搭建(materials)

  开发人员通过交互式项目脚手架初始化组件目录
  yarn create-component
  ├─ components
  │ │ ├─ basic
  │ │ │ ├─ button
  │ │ │ │ ├─ tests
  │ │ │ │ └─ src

  开发人员通过脚手架开发调试组件
  yarn run-component --n button

  编写测试用例，运行测试
  yarn test-component --n button

  提交发布组件 - lint, prettier, run test

• 系统编辑与预览（editor, lego）

  新建页面
  

  添加容器，将组件库中的组件拖拽至容器中
  

  编辑组件属性(basic, 样式，事件)
  
  
  点击预览生成 jsonmap，并跳转至 lego 运行平台预览效果

1.3 当前进度

• 基建

  1. 规范化 - 项目，代码规范，jest 单元测试
  2. 脚手架搭建
  3. 文档构建, 结合 materials 一键构建组件文档
     ......

• lego

  1. JsonMap 依赖分析，动态加载组件库
  2. 组件联动数据处理，event-bus 组件通信，Vuex 组件状态存储
  3. 提取 vue SFC 中的 Props 属性声明，并生成 markdown 文档
     ......

• editor

  1. 窗口布局
  2. 组件拖拽，数据绑定，实时渲染
  3. 根据组件 Props 属性自动生成相应编辑列表
  4. monaco-editor 接入，实现自定义事件与样式编写
     ......

• materials

  1. 组件目录规范
  2. 组件接口定义(参阅阿里金蟾系统组件规范)，将组件所有可编辑的元素通过 Vue SFC 的 prop 属性暴露出去，以便外部读取编辑，并自动生成文档服务，规范如下:

props: {
  label: {
    type: String,
    required: true,
    default: "默认文本",
    desc: "文本标签",
    option: ["深圳", "上海", "北京", "广州"]
  },
  style: {
    type: [Object, Function]
    required: false,
    desc: "样式对象",
    default: function() {
      return {
        color: "#000"
      };
    }
  },
  onclick: {
    type: Function,
    required: true,
    desc: "按钮点击事件",
    default: function() {
      // lego.setData("button1", "label", "btnChange");
    }
  },
  columns: {
    type: Array,
    isTableColumns: true,
    required: true,
    desc: "表格列",
    default: function() {
      return [{
        mode: 'Text'
        ...
      }]
    }
  }
}

• 更多

1.4 TODO

lego

• 提供组件调试面板，例如
  

editor

• 解决布局编辑问题
• 快捷键编辑
• 解决父子元素的拖拽编辑问题, 如 table 与 column，form 与 form-item
• 编辑组件时可以实时读取组件文档，效果如下:
  
• 提供静态服务器串联 editor 和 lego (editor中点击预览 --> 跳转 lego 运行)

materials

• 增加常用组件，完善单元测试
• 增加系统模板

其他

• 基础库 TypeScript 接入
• 交互式命令行构建 (cz-cli)
• vuepress 文档服务

更多TODO

2. 运营相关

播放页

• 降低外网错误告警数量
• pollyfill 预加载(见基础/kg-build)
• ...

红包活动

• refactor to cashbonus2019，早期埋了不少坑，希望重构好项目方便后续同学开发维护；
• 像这种高度定制化的需求怎么实现模版化?

3.基础建设

kg-ci

• diff 模版优化
  https://git.code.oa.com/karaoke-web/kg-ci/issues/3
• diff 速度优化
  https://git.code.oa.com/karaoke-web/kg-ci/issues/4
• 支持 blame 跳转
  https://git.code.oa.com/karaoke-web/kg-ci/issues/5

kg-build

• pollyfill, 按需加载依赖支持动态提前
  https://git.code.oa.com/karaoke-web/kg-build/issues/1

hippy

• 发布自动更新触发时间戳与MD5更新录入 (需与后台配合联调)
• 多项目联调 (需ios，安卓开发环境，pr)

年前计划

红包活动

• 完成重构，开发自测 (1.22 - 1.25)
• 跟测 (1.28 - 2.02)

kube design

• 解决布局与父子元素的拖拽编辑问题
• 扩充完善常用组件
• 使用新版 kube 编辑器搭建一个 Demo 系统

kg-ci

• diff 模版优化

沟通摘要

• docker 后续维护与使用
• hippy 调试，node 体验机器映射到开发机器
• hippy 发布流程优化整合
• hippy jsbundle 拆分，按需加载，jsbridge 通信优化
• hippy 三端统一 (小程序，hippy)，生命周期适配