专栏首页Hippy 跨端框架腾讯开源内部跨端框架 Hippy,打磨三年,日均 PV 过亿
原创

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

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

视频内容

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

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

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

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

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

腾讯跨端解决方案 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 选择器就可以完成跨端界面绘制。其优势如下:

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

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

王者营地 vue + hippy-vue

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

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hippy 常用调试方法和常见问题案例

    近日,腾讯开源跨端框架 Hippy,一周即吸引3000+star。在腾讯内部,Hippy 已运行3年之久,跨 BG 共有 18 款线上业务正在使用 Hippy,...

    xuqingkuang
  • JDK11中增加了一个常量池类型:CONSTANT_Dynamic

    有关class file 的内容,这里不再赘述。你可以参阅此文:来自JVM的一封ClassFile介绍信。

    ImportSource
  • 【重磅】谷歌正式发布TensorFlowLite,半监督跨平台快速训练ML模型

    来源:Google blog 编译:马文 Cecilia 【新智元导读】谷歌宣布推出 TensorFlow Lite,这是 TensorFlow 的针对移动设...

    新智元
  • 爱看书的你,一定会喜欢这款小程序

    即便一个月只能读完一本书,日积月累后,当你把读过的书放满整个书架的时候,一定会非常享受这份喜悦。

    知晓君
  • Android上的TensorFlow Lite,了解一下?

    TensorFlow Lite是TensorFlow针对移动和嵌入式设备的轻量级解决方案。它可以在移动设备上高效运行机器学习模型,因此您可以利用这些模型进行分类...

    云水木石
  • Python实现疫情通定时自动填写功能(附代码)

    上述代码已经可以虚拟我们的提交能力了,但是还达不到自动化需求。最终目标是能够放在Linux服务器上每日早晨自动运行一次,并接收到反馈。所以需要再加一个模块,我选...

    砸漏
  • realloc invalid pointer错误解析

    realloc invalid pointer错误 char* temp=(char*) realloc(src,sizeof(char)*100); 如上面这...

    猿人谷
  • Docker之DockerFile介绍

      DockerFile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本。

    后端码匠
  • 给你的Win平板安装ChromeOS系统

    你是否觉得你的Win10平板性能太弱、娱乐性没有(跑不动)、用触屏不爽(屏太小)、系统掉电超快、想丢掉却又不舍得?拯救你鸡肋平板的方法来了!给你的平板换装Chr...

    ZONGLYN
  • Docker之DockerFile介绍

      DockerFile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本。

    用户4919348

扫码关注云+社区

领取腾讯云代金券