浅谈Hybrid技术——Big-man

落日映苍穹つ 2022-06-07 02:59 263阅读 0赞

# 浅谈Hybrid技术——Big-man #

## 前言: ##

*  现在的移动网络以及移动应用可谓是市场强大到无可比拟，骑着自行车在城市的街头上走一走，早已经没有了往日的路上的人们抬头仰望星空的感觉，更多的是成为了一个”低头族”，低头把玩自己的移动设备。
 *  随着移动浪潮(也就是`Android`以及`iOS`的发展)的兴起, 各种APP层出不穷, 极速的业务扩展提升了团队对开发效率的要求, 这个时候`iOS&&Android`开发一个APP似乎成本有点过高, 而H5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式: `Hybrid App`。
 *  作为一种混合开发的模式, `Hybrid APP`底层依赖于`Native`提供的容器(`UIWebview`), 上层使用`Html&&Css&&JS`做业务开发, 底层透明化, 上层多样化, 这种场景非常有利于前端介入, 非常适合业务快速迭代, 于是`Hybrid`火啦。

--------------------

## Hybrid发家史： ##

*  最初携程的应用全部是`Native`的，`H5`站点只占其流量很小的一部分，当时Native有200人红红火火，而H5开仅有5人左右在打酱油，后面无线团队来了一个执行力十分强的服务器端出身的leader，他为了了解前端开发，居然亲手使用`jQuery Mobile`开发了第一版程序，虽然很快方案便被推翻，但是`H5`团队开始发力，在短时间内已经赶上了Native的业务进度：  
    ![携程][SouthEast]  
    ![携程][SouthEast 1]  
    ![携程][SouthEast 2]
 *  突然有一天`andriod`同事跑过来告诉我们`andriod`中有一个[方法最大树(数)限制][Link 1]，可能一些页面需要我们**内嵌**`H5`的页面，于是`Native`与`H5`框架团队牵头做了第一个Hybrid项目，携程第一次出现了一套代码**兼容三端**的情况。这个开发效率杠杠的，团队尝到了甜头，于是乎后续的频道基本都开始了Hybrid开发，到我离开时，整个机制已经十分成熟了，而前端也有几百人了。
 *  所以Big-man的开发中也涉及到了这一步开发，需要去同一套代码适用于多端的效果。

--------------------

## 场景重现： ##

*  狼厂有三大大流量APP，**手机百度**、**百度地图**、**糯米APP**，最近接入糯米的时候，发现他们也在做Hybrid平台化相关的推广，将静态资源打包至Native中，Native提供js调用原生应用的能力，从产品化和工程化来说做的很不错，但是有两个瑕疵：  
    
    
     *  ① 资源全部打包至Native中**APP尺寸**会增大，就算以**增量机制**也避免不了APP的膨胀，因为现在接入的频道较少一个频道`500K`没有感觉，一旦平台化后主APP尺寸会急剧增大
     *  ② 糯米前端框架团队拥有着封装了`Native`端的能力，但是没有提供配套的前端框架，这个解决方案是不完整的。很多业务已经有`H5`站点了，为了接入还得单独开发一套程序；而就算是**新业务接入**，又会面临嵌入资源必须是**静态资源**的限制，做出来的项目没有[`SEO`][SEO]，如果关注`SEO`的话还是需要再开发，从工程角度来说是有问题的。
 *  但从**产品可接入度**与**产品化**来说，**糯米Hybrid化**的大方向是很乐观的，也确实取得了一些成绩，在短时间就**有很多频道**接入了，随着推广进行，明年可能会形成一个**大型的Hybrid平台**。

--------------------

## 总结: ##

### 优点: ###

*  可能上面的描述展现得还不是很全面，所以Big-man进行了总结:  
    
    
     *  `Hybrid开发效率高、跨平台、低层本;`
     *  `Hybrid从业务开发上讲，没有版本问题，有BUG能及时修复`

### 缺点: ###

*  Hybrid是有缺点的:  
    
    
     *  Hybrid体验就肯定比不上Native，所以使用有其场景，但是对于**需要快速试错、快速占领市场的团队来说，Hybrid一定是不二的选择，团队生存下来后还是需要做体验更好的原生APP**。

--------------------

## 继续的内容: ##

*  以上的内容是简单的介绍了一下`Hybrid`的作用, 记下来需要去理解`Hybrid`更深层次的内容:  
    
    
     *  ① Hybrid中Native与前端各自的工作是什么;  
        
        
         *  这个分析是把对比的结果给出，至于使用什么进行项目的开发，需要开发团队与业务决定。
     *  ② Hybrid的**交互接口**如何设计;
     *  ③ Hybrid的**Header**如何设计;
     *  ④ Hybrid的如何**设计目录结构**以及**增量机制**如何实现;
     *  ⑤ **资源缓存策略**，**白屏问题**……;

--------------------

## Native与前端分工: ##

*  在Hybrid的架构设计之前需要分清`Native`与前端的界限, 首先`Native`提供的是一宿主环境, 要合理的利用`Native`提供的能力，要实现通用的`Hybrid`平台架构，站在前端视角，Big-man觉得需要考虑以下的设计问题：

### 交互设计: ###

*  `Hybrid`架构设计中

[SouthEast]: /images/20220607/48dcd208f951449b92b1fe9f3e07326b.png
[SouthEast 1]: /images/20220607/4bdfffd2a9234749bdeeb71fb0e6e52c.png
[SouthEast 2]: /images/20220607/9135ec2505dd4612b2fc3558b03ffd33.png
[Link 1]: http://www.cnblogs.com/xitang/p/3583696.html
[SEO]: http://blog.csdn.net/seojq/article/details/71191519