騰訊開源內部跨端框架 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 地址：github.com/Tencent/Hip…

歡迎關注「雲加社區」，Hippy 的實戰和原理解析系列文章將會陸續上線。