腾讯高性能跨端框架 Hippy 正式开源

昵称10130991 2020-02-12

展开全文

简介

Hippy 是一款高性能跨端开发框架，为前端开发者提供他们所熟悉的 React、Vue 来进行高性能跨端开发，克服了 H5 开发时受浏览器接口和实现不统一的限制，能够充分使用客户端能力，并保留了 H5 开发的灵活性。

该项目在腾讯内部已经运行达3年之久，已经跨 BG 共有 18 款线上业务使用，日均 PV 过亿。该框架实现了类似 Flutter 的引擎直通架构（在 React Native 里叫 Fabric 架构），通过 C++ 开发的模块直接插入 JS 引擎中运行，绕过了前终端通讯编解码的开销，有效提升了 JS 前端代码和终端的通讯性能，同时以高性能自绘为下一个主要目标正在开发中。在版本升级的同时，我们也很注重向上兼容性，保证业务代码在所有版本上都能够稳定运行。

Hippy 在腾讯内部已经有一套完整生态，包含 GCanvas、Lottie、SVG 等都有对应组件封装，同时包含腾讯内部自研的 Hippy 业务组件库、高性能图形库、异常上报（支持 Sentry）等等也会在未来逐步对外开放。

主要特性

对于用户体验、高效开发迭代，Hippy 将是你最好的选择。

Hippy 具有以下优势：

一、开发效率高。根据使用 Hippy 业务经验看，使用 HIppy 开发相对于原有 Android 和 iOS 双端开发，可节省 70% 人力。

二、稳定性好。目前 Hippy 引擎日启动次数超15亿，引擎加载成功率 99.9992%，业务加载成功率 99.985%。

三、迭代快。业务发版周期减少 75% ~ 100%。

四、性能高。平均帧率高于同期竞品，自研 Layout 引擎超越 Yoga。

五、扩展性好。Hippy 采用分层设计思想，通过上下层抽离和解耦，将整体划分为框架层、引擎层、渲染层。每层均可自由替换。框架层既可以使用 React 也可以使用 Vue，或者未来的新兴框架。引擎层可以使用 JS，将来也支持 Dart，Lua 等语言。渲染层目前使用原生 Native 绘制，明年也将支持自绘，业务可以根据需求自由选择。

六、无协议风险。Hippy 完全自研，使用自由宽松的 Apache 协议，商业项目可放心使用。

业内现状

“跨端”是目前前端界比较流行的一个词汇。“跨端”之所以流行，根源在于传统网页开发受浏览器能力限制太大，尤其是各家浏览器的不同实现、离线能力和性能上的缺陷导致 App 很难满足用户体验的需求。跨端框架本质上是将终端能力以一种形式提供业务开发使用，可以无限制地使用所有终端能力的同时，尽量让业务开发只编写一套代码，这样既能满足性能需求，又能减少开发成本。

但纵观整个社区内的跨端开发框架，仍旧存在两个主要问题：

跨端框架对前端开发者来讲难度较高，如果不具备移动终端开发能力，很难上手；
平台差异大，相同功能甚至要为不同的平台使用不同的接口编写大量平台相关代码。

出现上述问题的原因，是因为目前业内的跨端框架，大部分由终端开发者主导开发，并不是从前端开发者角度出发的，所以对于前端开发者来说不够友好。

框架优势

Hippy 跨端框架是由QQ 浏览器部门发起的，针对前端开发者推出的跨端解决方案。为业内现存问题，Hippy 紧贴 W3C 标准，遵从网页开发各项规则，从前端开发人员角度出发，使用 Javascript 为开发语言，同时支持 React 和 Vue 两种前端主流框架。对于前端开发者而言，Hippy 上手难度会更低，学习曲线会更平滑。

Hippy 实现了类似 Flutter 的引擎直通架构（在 React Native 中的 Fabric 架构），通过 C++ 开发的模块直接插入 JS 引擎中运行，绕过了前终端通讯编解码的开销，有效提升了 JS 前端代码和终端的通讯性能。在此基础之上，Hippy 正在实现高性能自绘，以提供更强的性能和更好的用户体验。

Hippy-react 从语法上更加接近终端底层，某种程度上语法接近 React Native，同时通过官方提供了 hippy-react-web 组件库，也可以方便地生成 Web 版网页。