腾讯开源内部跨端框架 Hippy，打磨三年，日均 PV 过亿

12 月 20 日，腾讯开源跨端框架 Hippy。在腾讯内部，Hippy 已运行 3 年之久，跨 BG 共有 18 款线上业务正在使用 Hippy，日均 PV 过亿，且已建立一套完整生态。相较于其他跨端框架，Hippy 对前端开发者更友好：紧贴 W3C 标准，遵从网页开发各项规则，使用 JavaScript 为开发语言，同时支持 React 和 Vue 两种前端主流框架。

Hippy 视频：https://v.qq.com/x/page/i3038urj2mt.html。

业内现状：大部分跨端框架对前端开发者不够友好

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

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

• 跨端框架对前端开发者来讲难度较高，如果不具备移动终端开发能力，很难上手；

• 平台差异大，相同功能甚至要为不同的平台使用不同的接口编写大量平台相关代码。

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

腾讯跨端解决方案 Hippy：前端开发者更易上手

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 版网页。

全民 K 歌：react + hippy-react + hippy-react-web

hippy-vue 的组件、参数和接口完全符合浏览器标准，前端开发用浏览器标签和常用的 CSS 选择器就可以完成跨端界面绘制。

其优势如下：

• 前端开发基本了解一下 hippy-vue 开发的限制就可以上手跨端开发；

• 可以复用 Web 端绝大多数的生态；

• 不需要 Web 转接库就可以直接生成网页。

事实上，hippy-vue 其实只是浏览器上的 Vue 在终端上的一个渲染层，理论上大多数 Vue 在网页上的生态可以直接迁移过来。

王者营地：vue + hippy-vue

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

Hippy 正式开源 Github 地址：

https://github.com/Tencent/Hippy

本文转载自公众号云加社区（ID：QcloudCommunity）。

原文链接：

https://mp.weixin.qq.com/s/Jo9wjXqqrLg5uQK7u8dHtg