Categories
程式開發

騰訊開源內部跨端框架 Hippy,打磨三年,日均 PV 過億


12月20日,騰訊開源跨端框架 Hippy。在騰訊內部,Hippy 已運行3年之久,跨 BG 共有 18 款線上業務正在使用 Hippy,日均 PV 過億,且已建立一套完整生態。相較於其他跨端框架,Hippy 對前端開發者更友好:緊貼 W3C 標準,遵從網頁開發各項規則,使用 JavaScript 為開發語言,同時支持 React 和 Vue 兩種前端主流框架。

騰訊開源內部跨端框架 Hippy,打磨三年,日均 PV 過億 1

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 版網頁。

騰訊開源內部跨端框架 Hippy,打磨三年,日均 PV 過億 2

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

hippy-vue 的組件、參數和接口完全符合瀏覽器標準,前端開髮用瀏覽器標籤和常用的 CSS 選擇器就可以完成跨端界面繪製。

其優勢如下:

  • 前端開發基本了解一下 hippy-vue 開發的限制就可以上手跨端開發;

  • 可以復用 Web 端絕大多數的生態;

  • 不需要 Web 轉接庫就可以直接生成網頁。

事實上,hippy-vue 其實只是瀏覽器上的 Vue 在終端上的一個渲染層,理論上大多數 Vue 在網頁上的生態可以直接遷移過來。

騰訊開源內部跨端框架 Hippy,打磨三年,日均 PV 過億 3

王者營地: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