簡介
Hippy 是一款高性能跨端開發(fā)框架，為前端開發(fā)者提供他們所熟悉的 React、Vue 來進行高性能跨端開發(fā)，克服了 H5 開發(fā)時受瀏覽器接口和實現(xiàn)不統(tǒng)一的限制，能夠充分使用客戶端能力，并保留了 H5 開發(fā)的靈活性。
該項目在騰訊內(nèi)部已經(jīng)運行達3年之久，已經(jīng)跨 BG 共有 18 款線上業(yè)務(wù)使用，日均 PV 過億。該框架實現(xiàn)了類似 Flutter 的引擎直通架構(gòu)（在 React Native 里叫 Fabric 架構(gòu)），通過 C++ 開發(fā)的模塊直接插入 JS 引擎中運行，繞過了前終端通訊編解碼的開銷，有效提升了 JS 前端代碼和終端的通訊性能，同時以高性能自繪為下一個主要目標(biāo)正在開發(fā)中。在版本升級的同時，我們也很注重向上兼容性，保證業(yè)務(wù)代碼在所有版本上都能夠穩(wěn)定運行。
Hippy 在騰訊內(nèi)部已經(jīng)有一套完整生態(tài)，包含 GCanvas、Lottie、SVG 等都有對應(yīng)組件封裝，同時包含騰訊內(nèi)部自研的 Hippy 業(yè)務(wù)組件庫、高性能圖形庫、異常上報（支持 Sentry）等等也會在未來逐步對外開放。
主要特性
對于用戶體驗、高效開發(fā)迭代，Hippy 將是你最好的選擇。
Hippy 具有以下優(yōu)勢：
一、開發(fā)效率高。根據(jù)使用 Hippy 業(yè)務(wù)經(jīng)驗看，使用 HIppy 開發(fā)相對于原有 Android 和 iOS 雙端開發(fā)，可節(jié)省 70% 人力。
二、穩(wěn)定性好。目前 Hippy 引擎日啟動次數(shù)超15億，引擎加載成功率 99.9992%，業(yè)務(wù)加載成功率 99.985%。
三、迭代快。業(yè)務(wù)發(fā)版周期減少 75% ~ 100%。
四、性能高。平均幀率高于同期競品，自研 Layout 引擎超越 Yoga。
五、擴展性好。Hippy 采用分層設(shè)計思想，通過上下層抽離和解耦，將整體劃分為框架層、引擎層、渲染層。每層均可自由替換。框架層既可以使用 React 也可以使用 Vue，或者未來的新興框架。引擎層可以使用 JS，將來也支持 Dart，Lua 等語言。渲染層目前使用原生 Native 繪制，明年也將支持自繪，業(yè)務(wù)可以根據(jù)需求自由選擇。
六、無協(xié)議風(fēng)險。Hippy 完全自研，使用自由寬松的 Apache 協(xié)議，商業(yè)項目可放心使用。
業(yè)內(nèi)現(xiàn)狀
“跨端”是目前前端界比較流行的一個詞匯。“跨端”之所以流行，根源在于傳統(tǒng)網(wǎng)頁開發(fā)受瀏覽器能力限制太大，尤其是各家瀏覽器的不同實現(xiàn)、離線能力和性能上的缺陷導(dǎo)致 App 很難滿足用戶體驗的需求?？缍丝蚣鼙举|(zhì)上是將終端能力以一種形式提供業(yè)務(wù)開發(fā)使用，可以無限制地使用所有終端能力的同時，盡量讓業(yè)務(wù)開發(fā)只編寫一套代碼，這樣既能滿足性能需求，又能減少開發(fā)成本。
但縱觀整個社區(qū)內(nèi)的跨端開發(fā)框架，仍舊存在兩個主要問題：
跨端框架對前端開發(fā)者來講難度較高，如果不具備移動終端開發(fā)能力，很難上手；
平臺差異大，相同功能甚至要為不同的平臺使用不同的接口編寫大量平臺相關(guān)代碼。
出現(xiàn)上述問題的原因，是因為目前業(yè)內(nèi)的跨端框架，大部分由終端開發(fā)者主導(dǎo)開發(fā)，并不是從前端開發(fā)者角度出發(fā)的，所以對于前端開發(fā)者來說不夠友好。
框架優(yōu)勢
Hippy 跨端框架是由QQ 瀏覽器部門發(fā)起的，針對前端開發(fā)者推出的跨端解決方案。為業(yè)內(nèi)現(xiàn)存問題，Hippy 緊貼 W3C 標(biāo)準(zhǔn)，遵從網(wǎng)頁開發(fā)各項規(guī)則，從前端開發(fā)人員角度出發(fā)，使用 Javascript 為開發(fā)語言，同時支持 React 和 Vue 兩種前端主流框架。對于前端開發(fā)者而言，Hippy 上手難度會更低，學(xué)習(xí)曲線會更平滑。
Hippy 實現(xiàn)了類似 Flutter 的引擎直通架構(gòu)（在 React Native 中的 Fabric 架構(gòu)），通過 C++ 開發(fā)的模塊直接插入 JS 引擎中運行，繞過了前終端通訊編解碼的開銷，有效提升了 JS 前端代碼和終端的通訊性能。在此基礎(chǔ)之上，Hippy 正在實現(xiàn)高性能自繪，以提供更強的性能和更好的用戶體驗。
Hippy-react 從語法上更加接近終端底層，某種程度上語法接近 React Native，同時通過官方提供了 hippy-react-web 組件庫，也可以方便地生成 Web 版網(wǎng)頁。
全民 K 歌
react + hippy-react + hippy-react-web
Hippy-vue 的組件、參數(shù)和接口完全符合瀏覽器標(biāo)準(zhǔn)，前端開發(fā)用瀏覽器標(biāo)簽和常用的 CSS 選擇器就可以完成跨端界面繪制。其優(yōu)勢如下：
前端開發(fā)基本了解一下 hippy-vue 開發(fā)的限制就可以上手跨端開發(fā)；
可以復(fù)用 Web 端絕大多數(shù)的生態(tài)；
不需要 Web 轉(zhuǎn)接庫就可以直接生成網(wǎng)頁。
事實上，hippy-vue 其實只是瀏覽器上的 Vue 在終端上的一個渲染層，理論上大多數(shù) Vue 在網(wǎng)頁上的生態(tài)可以直接遷移過來。
