浅谈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与前端分工: