Hybrid App 开发（开篇）

三水清
4,767 阅读5分钟

开题背景

昨天半夜不少苹果开发者收到警告邮件，大概意思是JSPatch这类hotpatch会被苹果警告，详细内容请移步：https://github.com/bang590/JSPatch/issues/746。从邮件内容来看，估计React Native和Weex这类方案也会有影响。不管苹果公司是为生态、为iOS开发人员谋求未来还是为了Swift，这些「打擦边球」的热补丁方案估计会降温。

鉴于此，本公众号决定开个「Hybrid开发」专题，介绍下本人做移动开发这些年来在Hybrid开发的一些实践。

本系列会介绍本人在Hybrid App开发当中的经验，从简单的基本常识到高级的开发技巧，全部大概包含10篇左右的文章，由于本人时间和精力有限，所以不定期更新。。

本文主要介绍下本系列的背景以及整个系列的大纲

为什么是Hybrid App

Hybrid App其实本质上就是H5页面，广义上来说：一个H5页面放到Native APP打开也属于Hybrid，本系列提到的Hybrid App不是这样简单的迁移，而是通过内置模板包的方式，将html页面和静态资源放到Native中。当然要做这样的App，也会用到很多手机H5页面的技术，所以会有技术共性。（至于最近比较火的PWA，实际从根上讲也是将一些Hybrid技术固化给浏览器和系统来实现，如果是H5或者Hybrid方案，可以快速接入，本系列的最后会讨论PWA、RN和Weex这些解决方案的优缺点

Hybrid App 优点：（拿去忽悠老板，JTL

  1. 快速迭代：Native开发最大的问题是版本更新问题，更新频繁则版本碎片化严重，每个研发周期内做的需求有限，在快速试错抢夺用户的新App，Native版本迭代是不明智的；对于大型的APP，需求控制不住，迭代更加是个灾难

  2. 跨平台统一模板：Hybrid App可以统一H5、安卓、iOS 、WP等任何端的代码（因为实际都是Html页面。。），通过组件化和构建工具很容易实现多端统一，而组件化和构建工具在前端圈都有成型的解决方案

  3. 相对Native，成本更小：无论人力投入、资源投入还是研发周期调试成本都比Native有优势

  4. 体验优于普通H5：内置的模板，启动速度要比普通H5快，借住Native增强的端能力和UI组件增强，要比H5的体验更好，比如：图片查看器、扫码、视频播放等

  5. 普通H5可以快速接入，快速升级：本质上就是H5页面，所以普通的H5经过简单改造就可以作为Hybrid模板使用，而且类似PWA这类解决方案提出之后，又可以进行升级

  6. 生态建设：Hybrid使用H5增强技术，降低接入成本，对于大型APP，可以快速进行生态建设

  7. 现在主流App都是Hybrid：QQ、微信、支付宝、淘宝、手百。。。够你举栗子了~

当然Hybrid也有天然的缺点：渲染性能和用户体验要比Native差一些。但是随着硬件、网络的发展、浏览器的努力，这些都不是问题（想想我刚开始H5开发的13年，遍地都是山寨手机，都是泪。。

Warning：任何技术方案都不是「银弹」，不要为了技术而做技术，使用Hybrid App也要权衡Native和Web的优缺点，从产品需求出发，划好边界，虽然Hybrid解决了版本迭代和研发成本，但是过度使用Hybrid会造成前端的研发成本上升，甚至整体App体验下降。

Hybrid App 目标

  • 能够快速更新迭代，但不需要更新App

  • 减少不同平台重复开发的工作量

  • 尽可能在交互上更贴近原生

  • 用户无感知，用户不会感觉到就是打开一个网页

常见的Hybrid App解决方案

圈里很多Hybrid解决方案了，包括开源的PhoneGap、Cordova、WeX5和ionic，其中ionic比较经典的是「微众银行」，微众银行是腾讯旗下的网络银行，三水清经常使用哦~ 等有机会介绍理财产品的时候在详细说微众银行。

国内大厂子也有不少自己的解决方案：QQ的Alloykit、豆瓣的Rexxar、去哪儿的hy、糯米的组件化方案。。这些都是能够叫上名来的，还有很多没有名字的，大厂名字+hybrid搜下都能找到不少文章和分享。

下面是我开始做Hybrid方案的时候整理国内大厂的一些hybrid方案表格，感兴趣可以自行搜索了解下具体的方案：


本系列大纲

做了这么多铺垫，说下本系列的大纲，大纲不一定非要按照顺序或者大纲所列来写文章，可能会合并或者增加，未考虑到的内容也可以在后台留言，我会补充~

  • JsBridge：Web和客户端双向通信

  • 模板本地化方案

    • 模板包设计

    • 增量包

    • 模板包策略

    • 端能力对齐

  • 增强体验

    • Device API增强

    • NA UI组件

  • JSSDK

  • 多端统一代码

    • 组件化开发

    • 构建工具

  • 安全

  • 调试

    • 普通调试

    • 使用election做个调试工具

  • 生态建设：快速接入和迁移

  • 比较下PWA、weex、RN等

关注hybrid开发，想第一时间看到最新文章就关注我的公众号后续更新吧

EOF @三水清
未经允许，请勿转载


感觉有用，欢迎关注我的公众号


本文对你有帮助？欢迎扫码加入前端学习小组微信群：

avatar
文章
阅读
粉丝

友情链接：