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

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

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

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

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

  1. 跨端框架对前端开发者来说难度较高,若是不具有移动终端开发能力,很难上手;
  2. 平台差别大,相同功能甚至要为不一样的平台使用不一样的接口编写大量平台相关代码。

出现上述问题的缘由,是由于目前业内的跨端框架,大部分由终端开发者主导开发,并非从前端开发者角度出发的,因此对于前端开发者来讲不够友好。git

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

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

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

hippy-react 从语法上更加接近终端底层,某种程度上语法接近 React Native,同时经过官方提供了 hippy-react-web 组件库,也能够方便地生成 Web 版网页。浏览器

全民 K 歌架构

react + hippy-react + hippy-react-web框架

hippy-vue 的组件、参数和接口彻底符合浏览器标准,前端开发用浏览器标签和经常使用的 CSS 选择器就能够完成跨端界面绘制。其优点以下:性能

  1. 前端开发基本了解一下 hippy-vue 开发的限制就能够上手跨端开发;
  2. 能够复用 Web 端绝大多数的生态;
  3. 不须要 Web 转接库就能够直接生成网页。

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

王者营地

vue + hippy-vue

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

Hippy 正式开源Github 地址:github.com/Tencent/Hip…

欢迎关注「云加社区」,Hippy 的实战和原理解析系列文章将会陆续上线。

相关文章
相关标签/搜索