GoCom 轻应用实现方案调研

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 的结构定义,应用渲染基础框架

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

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


你可能感兴趣的:(GoCom 轻应用实现方案调研)