GoCom 轻应用是什么？

GoCom 是一个企业级即时通信平台，为了向客户提供更丰富的功能，产品中增加了应用中心。

目前应用中心中的应用，采用单例项目开发，前端框架以 Angular 为主，后端服务也需要根据业务单独开发，代码工作量大，前后端耦合度高，代码复用低，交付周期长，为了改变这种状态，我们的 CTO 提出了轻应用框架的设计，允许用户通过轻应用设计器，以拖放、配置的方式来设计轻应用，然后发布至服务器，服务器自动进行打包部署分发，通过这种模式来加快应用的实现，为客户带来更多的便利。

为了调研设计方案的可行性和了解具体细节，CTO 让我先来实现几个应用，通过实现的过程来提取应用间的共性，将共性需求抽象为组件，以此来进一步开展轻应用框架的设计工作。

实现轻应用框架应该考虑哪些因素

接到任务之后，我选择了 企业用车 和 投票 两个应用来实现，采用传统开发模式 + VUE 框架。

选择 VUE 框架，基于两个因素：

1. Angular 是 MVC 模式，结构严谨，自由度较低，React 和 Vue 采用模块化设计，更灵活，更自由

2. Vue 采用渐进式设计，更轻量，包更小，编码风格最接近原生 JS 编码，这对于后期在设计器中进行条件设计或扩展编程更有利

之所以没有采用模块化的方式开发，而采用了传统开发模式 (直接引用外部 vue.js 文件)，是因为基于传统开发模式最接近最终应用运行场景，同时这样的代码也最容易通过设计器生成。

不重复造轮子，我们的团队人员相对不多，如果从最基础进行设计，时间周期长不说，实现的最终效果也很难保障，所以，在可用、易扩展的前提下，应该尽可能以成熟开源产品为基础实现，例如：图表 ECharts，动画 three.js

企业打车的例程都做了什么

企业打车项目包含，服务端和前端，作为例程，目的是为了找到应用共性，所以并没有在细节上做太多工作，服务端采用 node+express 实现，没有用到数据库，直接以 json 数组存储，服务端提供了 4 个接口：

1. api/query?tid=xxxx 获取指定行程的详细信息

2. api/tasks  获取所有有审批权限的行程集合

3. api/travels 获取当前用户所有行程集合

4. api/add 创建新行程

5. api/update?tid=xxxx&status=xx 更新指定编号的行程信息

其中 tasks 及 travels 两个接口是可以合并的，可以通过指定参数来获取匹配条件的应用数据，例如：api/list?sender=当前用户 来获取用户自己的行程集合，当 task/travels 合并后，接口基本可以通用，add/update/list/query/delete 都是针对应用数据的增、删、改、查操作

前端采用引用静态 vue.js 文件的方式实现

轻应用将由哪些元素构成

通过实现 用车 和 投票两个应用，可以发现，大多数轻应用会具有以下基本元素

1. 应用配置

    每一个应用，首先需要具备 名称、图标、简介、模板类型、入口地址等基本信息，这些信息是全局的，将在应用加载前应用。

2. 导航

    大部分应用都是多页面应用，而非单页面应用，例如：企业用车有申请页面、有行程页面、也有待审批页面，这时应用首先会需要导航，导航决定着应用的基础结构和布局，在企业用车这个例程中，我采用了 tabs 来做导航，导航为全局组件，优先级高于页面，当应用是多页面时显示 tabs 栏，单页面时不显示 tabs 栏。

3. 页面

    这是应用的主要内容容器，每个 tab  栏对应一个独立的页面，在页面中将会需要几个子容器：

    3.1. 面包屑导航

           面包屑导航用于组织 wizard 形式页面，各节点之间要可以进行简单的条件编程

    3.2. 表单

           所有可编辑控件都必须放置在表单容器中，例如：文本输入框、分段选择器、日历选择器、原生选择器等

    3.3. 数据列表

           数据列表可用于显示各种表达，实现数据的循环渲染，列表项可以设置模板来定义表格展示效果

    3.4. 数据详情

           用于展示一个数据对象的详细信息

    3.5. 控制栏

           控制栏为页面全局操作交互容器

4. 组件

    采用 vue 自定义组件方式实现，所有组件继承自 baseComponent，baseComponent 含有四个基础成员：

    4.1. 模板 - 决定组件呈现效果的 html 模板

    4.2. 事件/钩子 - 每个组件都有 create \ activate \ deactivate \ destory 四个基本事件，可以通过在四个事件中配置条件来实现组件间的联动及动态效果

    4.3. 行为 - 每个组件有与之配合的行为，行为决定组件可以做什么事，例如：打开原生部门选择器，打开地址选择器

    4.4. 数据 - 组件绑定的数据对象

通过组件化，设计器最终只要输出上面的代码，就可以完成 tab 栏的渲染

轻应用的结构

轻应用分为应用包和应用框架两部分，其中前端框架基于 vue 进行二次封装实现。

一个轻应用的项目结构如下：

1. app.json 为应用设计器生成的应用元数据

2. vue.js 直接引用，不做改动

3. gocom.js 为框架工程打包后的结果

3. 前端资源全部支持强缓存，通过版本号实现强制更新

轻应用框架如何实施

可以将轻应用框架的开发分为几个阶段

第一步. 以轻应用框架的设计思路重构 1 个已上线应用或开发 1 个新应用，在开发过程中要严格遵从设计要求，应用元数据，应用渲染框架分离，这一步的最终结果要能提炼出 app.json 的结构定义，应用渲染基础框架

第二步. 通过解析应用元数据，动态生成应用部署包，这个过程中应用渲染框架会不断扩展、升级，最终目标是要做到可以通过定义应用元数据来设计大部分应用

第三步. 实现轻应用设计器，在线自动打包，部署