Dhybird框架总览

一、Dhybird简介

Dhybird是一款移动端Web Runtime的跨平台开发方案，支持基于HTML5和Javascript创建类似于移动端原生应用。该方案主要对Web运行环境进行优化，最大限度的挖掘Web性能，以及提供丰富的原生APIs供Javascript调用(或监听)。

• 超强的扩展能力。通过DPlugin，DWebView等接口，可以扩展DHytive，实现业务特有的功能。

• 丰富的Dhybird基础插件。 Dhybird本身已经提供了丰富的插件，针对各种业务场景，都有相应的插件来帮助webapp实现相应的功能，同时我们提供了一套通用的api，即DahaiApi

• 资源管理的解决方案。Dhybird的demo提供了包括h5资源包通过配置的下载、解压缩、更新以及通过Dhybird加载的机制，参考demo可以让你灵活制订属于自己的专属资源管理方案。

二、Dhybird要解决的问题

目前大海客户端内有若干业务页面使用webview内加载h5页面承载。其优点是显而易见的，即：web页面上线频度满足快速迭代的业务需求，不受客户端审核和发版的时间限制，也可以将各个业务线的开发工作分摊到各个业务的fe团队上，使得个业务线可以并行开发。
而缺点，则不言而喻的在于客户端内webview加载h5页面，准确来说是web应用的性能和体验，是肯定不及客户端的。本篇文章中，我将会梳理立足于本团队内，根据团队的特点和制约，设计一套可行的hybird应用以及资源管理系统。

三、Dhybird的整体框架

整体层次

四、各个端需要提供的支持

FE

现今绝大部分团队内的端内web应用，均是由webpack构建打包而成的单页或多页web应用，前端工程构建完成的结果中应该可以看出其静态资源中，不乏体积几百k~几m不等，而这些静态资源均是首次打开页面时需要下载的，并且在web应用有更新时，这些静态资源文件均会发生变化，也需要重新下载。这样就会导致首次打开线上h5资源更新网络条件差的时候，或者本地页面缓存失效的时候出现webView加载不出来东西。这使得移动端网页体验像一块巨石—它包含了大量 CPU 计算的 JavaScript 包，拖延了页面的加载和可交互的速度。 而对于任何一家互联网公司，性能往往与利益直接相关。 面对海量的交易用户，提升web应用加载的体验成为了FE和APP工程师极力重视解决的一个问题。

h5资源加载慢

1. 前端构建
   建议采用腾讯alloy团队出品的webpack离线包插件：ak-webpack-plugin，其可以根据配置，将webpack的构建出的h5资源包，压缩成映射了h5资源在cdn路径url的zip压缩包。
2. 前端发布
   建议采用持续集成和发布工具jenkins进行生成和部署h5资源包的操作。

QA

QA主要进行h5资源管理平台的开发
对于接入了h5资源管理系统的各个业务线的前端工程生成的不同时间版本的h5资源包 ，我们需要有一个直观明晰的方案来对其进行管理。 我们需要开发离线资源管理平台，对接离线后台系统。
主要功能建议有

1. 灰度
2. 查询
3. 资源包上下线和回滚
4. 日志系统

5. 存储系统

   
   
   

   h5资源管理平台

Server

server主要提供配置服务的Api和给APP端进行下发配置
主要功能建议有

1. 配置服务api
2. 压力测试

3. 性能监控

   
   
   

   配置json

APP

app侧资源管理模块和加载模块
主要功能应该有

1. 配置更新模块
2. 资源下载引擎
3. 资源解压缩和加载引擎

五、TODO

目前app端的基本功能已经开发完成，但还有很多优化工作需要继续进行

1. 下载引擎的优化 。目前还待实现的功能有h5资源包下载的断点续传和分块下载的功能，以及下载失败后重试的逻辑。
2. 离线资源下载的统计。
3. 命名！