斑马移动端前端架构设计

如何写一份架构设计？下面以一个论坛的移动端混合应用简单举个例子，简称斑马。

一、概述

斑马移动端在桌面端的基础上，进行了功能的精简和用户界面的优化，旨在为学员提供一个自由的交流学习平台。 拥有五个核心业务模块：首页、课程、问答、知识库、个人中心。 项目采用前后端分离，前端主要为H5单页面应用，使用Vue全家桶，结合Flutter和Native进行混合开发。

1.1开发环境

使用VSCode编辑器，以Node.js为驱动，搭配Webpack，集编译，代码分离，打包压缩，热更新，代理等功能的前后端分离开发模式。 使用Gitee管理代码。

1.2 H5开发

使用统一的脚手架Vue CLI和Cube-UI组件库，结合Vue-Router管理路由，VueX管理状态。 使用Eslint进行代码风格管理和校验。 Jenkins自动发布Gitee代码。

1.3客户端开发

使用Flutter进行安卓和苹果多端开发，为H5提供Native功能的API，使用Swift和Java进行插件开发、功能拓展。 苹果和安卓双平台同时发布企业版APP。

二、整体架构设计

2.1 整体功能逻辑流程图

2.2 整体架构图

2.3 核心工作

1. 区分哪些部分放在Flutter中做，哪些放在H5中做，哪些放在Native中做，可以根据开发资源灵活分配。
2. 通过设置UA将H5与应用解耦，可以运行在TeamTalk或斑马应用中，作为单独H5运行时进行功能缩减。
3. 安全性问题

• Web安全策略
• 移动应用开发安全标准

4. 数据缓存设计

• 进入应用通过接口检查版本。
• 当H5需要更新bundle时通过接口返回结果通知更新，否则使用缓存资源。
• 静态数据作为配置文件载入。
• 详情页复用列表页数据。
• H5数据缓存在Localstorage，APP数据通过Flutter插件缓存在系统，通过Webview互通。

三、风险

1. Flutter的部分可能会由于技术储备不足延长开发时间和加大维护成本，因此初版只使用Flutter完成必须在APP本身中完成的任务，剩余部分在H5中开发完成。
2. Native的部分提前协商开发资源，与Native开发团队等外部团队对接排期。