騰訊高性能跨端框架 Hippy 正式開源

2019 年 12 月 30 日
筆記

Hippy介紹影片

簡介

Hippy 是一款高性能跨端開發框架，為前端開發者提供他們所熟悉的 React、Vue 來進行高性能跨端開發，克服了 H5 開發時受瀏覽器介面和實現不統一的限制，能夠充分使用客戶端能力，並保留了 H5 開發的靈活性。

該項目在騰訊內部已經運行達3年之久，已經跨 BG 共有 18 款線上業務使用，日均 PV 過億。該框架實現了類似 Flutter 的引擎直通架構（在 React Native 里叫 Fabric 架構），通過 C++ 開發的模組直接插入 JS 引擎中運行，繞過了前終端通訊編解碼的開銷，有效提升了 JS 前端程式碼和終端的通訊性能，同時以高性能自繪為下一個主要目標正在開發中。在版本升級的同時，我們也很注重向上兼容性，保證業務程式碼在所有版本上都能夠穩定運行。

Hippy 在騰訊內部已經有一套完整生態，包含 GCanvas、Lottie、SVG 等都有對應組件封裝，同時包含騰訊內部自研的 Hippy 業務組件庫、高性能圖形庫、異常上報（支援 Sentry）等等也會在未來逐步對外開放。

主要特性

對於用戶體驗、高效開發迭代，Hippy 將是你最好的選擇。

Hippy 具有以下優勢：

一、開發效率高。根據使用 Hippy 業務經驗看，使用 HIppy 開發相對於原有 Android 和 iOS 雙端開發，可節省 70% 人力。

二、穩定性好。目前 Hippy 引擎日啟動次數超15億，引擎載入成功率 99.9992%，業務載入成功率 99.985%。

三、迭代快。業務發版周期減少 75% ~ 100%。

四、性能高。平均幀率高於同期競品，自研 Layout 引擎超越 Yoga。

五、擴展性好。Hippy 採用分層設計思想，通過上下層抽離和解耦，將整體劃分為框架層、引擎層、渲染層。每層均可自由替換。框架層既可以使用 React 也可以使用 Vue，或者未來的新興框架。引擎層可以使用 JS，將來也支援 Dart，Lua 等語言。渲染層目前使用原生 Native 繪製，明年也將支援自繪，業務可以根據需求自由選擇。

六、無協議風險。Hippy 完全自研，使用自由寬鬆的 Apache 協議，商業項目可放心使用。

業內現狀

「跨端」是目前前端界比較流行的一個辭彙。「跨端」之所以流行，根源在於傳統網頁開發受瀏覽器能力限制太大，尤其是各家瀏覽器的不同實現、離線能力和性能上的缺陷導致 App 很難滿足用戶體驗的需求。跨端框架本質上是將終端能力以一種形式提供業務開發使用，可以無限制地使用所有終端能力的同時，盡量讓業務開發只編寫一套程式碼，這樣既能滿足性能需求，又能減少開發成本。

但縱觀整個社區內的跨端開發框架，仍舊存在兩個主要問題：

跨端框架對前端開發者來講難度較高，如果不具備移動終端開發能力，很難上手；
平台差異大，相同功能甚至要為不同的平台使用不同的介面編寫大量平台相關程式碼。

出現上述問題的原因，是因為目前業內的跨端框架，大部分由終端開發者主導開發，並不是從前端開發者角度出發的，所以對於前端開發者來說不夠友好。

框架優勢

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