浅谈Hybrid技术——Big-man

浅谈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的业务进度：







突然有一天

andriod

同事跑过来告诉我们

andriod

中有一个方法最大树(数)限制，可能一些页面需要我们内嵌

H5

的页面，于是

Native

与

H5

框架团队牵头做了第一个Hybrid项目，携程第一次出现了一套代码兼容三端的情况。这个开发效率杠杠的，团队尝到了甜头，于是乎后续的频道基本都开始了Hybrid开发，到我离开时，整个机制已经十分成熟了，而前端也有几百人了。

所以Big-man的开发中也涉及到了这一步开发，需要去同一套代码适用于多端的效果。

场景重现：

狼厂有三大大流量APP，手机百度、百度地图、糯米APP，最近接入糯米的时候，发现他们也在做Hybrid平台化相关的推广，将静态资源打包至Native中，Native提供js调用原生应用的能力，从产品化和工程化来说做的很不错，但是有两个瑕疵：

① 资源全部打包至Native中APP尺寸会增大，就算以增量机制也避免不了APP的膨胀，因为现在接入的频道较少一个频道

500K

没有感觉，一旦平台化后主APP尺寸会急剧增大

② 糯米前端框架团队拥有着封装了

Native

端的能力，但是没有提供配套的前端框架，这个解决方案是不完整的。很多业务已经有

H5

站点了，为了接入还得单独开发一套程序；而就算是新业务接入，又会面临嵌入资源必须是静态资源的限制，做出来的项目没有

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

架构设计中