大家好，很高興又見面了，我是"進階前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!
進階前端進階
最近老闆又在提 PHA的概念，以前有做過小程式、H5、Weex等相關C端頁面的研發，但是一直對于PHA的技術本身沒有做過多深入了解。為了能和老闆聊在一個頻道上，甚至在技術上能讓老闆一愣（開玩笑），覺得是時候對這個主題進行深入學習了。
話不多說，直接開始！
前言
使用移動混合應用程式（PHA）架構使得開發人員能夠隻編寫一次代碼，進而能在所有主流平台上（ 如：Android 和 iOS）運作。同時，代碼還可用于漸進式 Web 應用程式甚至桌面應用程式（Electron）進而提高應用疊代效率、節省開發成本。
這篇文章将重點介紹什麼是 PHA，為什麼會有 PHA， 以及 PHA 下 12 個非常有用的架構清單，以幫助開發者建構出色的混合移動應用程式（Hybrid Mobile Apps）。
1.PHA 介紹
1.1 不同的跨端方案
PHA、PWA 等技術的出現是為了解決安卓和 iOS 兩大陣營需要将同一個應用開發兩遍的問題，進而降低開發成本的同時保持雙端能力一緻性。而在 PC 端，浏覽器無疑是最好的跨端應用解決方案，開發者隻需一個 web 應用就可以在 windows、mac、linux 等幾乎所有浏覽器中運作。
為了解決跨端問題，前端、用戶端雙端衍生出了不同的技術解決方案：
- 純 WebView 方案：比如最早的 phonegap（以 web 開發為主并通過原生插件提供原生功能，例如：攝像頭、通訊錄、地理定位、存儲等功能），或者下面的要介紹的 ionic 架構。
- 原生 + WebView 方案：在安卓和 ios 中通過 WebView 加載 web 應用達到開發一次運作兩端的目的。但是和原生應用性能還有一定的差距，一般用于非核心業務頁面。
- Web 技術轉換原生元件：比如：React Native 通過使用 react 架構來開發移動應用，其采用固定的元件和 CSS，然後将其轉換為原生元件進行渲染，體驗方面更加接近于原生應用。值得一提的是，Weex 也屬于這種範疇。隻是 weex 使用 V8 引擎， React Native 使用 JSCore 引擎，同時 weex 基于 vue 而 React Native 基于 React。
- Flutter 自繪引擎：Flutter 沒有采用 React Native 通過 js 轉原生元件的方式（js 編寫 ui 的方式需要複雜計算量、存在大資料量、動畫場景的性能問題進而增加耗電量、頁面卡頓），而是使用 google 的 dart 語言和自帶的 skia 渲染引擎來開發 ui 界面（也不依賴原生控件）。進而相當于開發了一個浏覽器，同時還規定了開發 ui 元件的語言（dart）和 api，是以高性能成了 Flutter 最大的優勢，進而完全可以和原生開發體驗相差無幾，而且目前支援幾乎所有平台。
- 小程式方案：小程式本質上是基于 WebView 進行渲染，通過将 Web 資源進行離線存儲進而加快加載。但離線存儲會導緻頁面加載大量的 CSS 或者 JS 進而出現白屏。是以小程式的邏輯層、渲染層相對獨立，而非浏覽器采用的渲染、腳本線程互斥的政策。但是小程式方案隻在國内一些超級App中才大規模使用起來，比如：支付寶、微信、淘寶、頭條等等
1.2 PHA 是什麼
PHA 全稱 Progressive Hybrid App，是提升 Hybrid 體驗的一種新架構，通過提供一些 Native 同層元件以及漸進式增強政策來建立 Hybrid APP 應用，進而使得應用具有與 Native 相同的使用者體驗。
PHA 的目标包括：
- 性能/體驗：終端裝置性能随着時間會逐漸提升（摩爾定律）。比如： 2019.8.1 手淘 Android 機器記憶體 >=6G 手機占比 41.52%， 雖然 Web 性能差距和 Native 逐漸縮小，但是現實是整體的業務複雜度也在不斷的增加，導緻整體的 Web 性能/體驗與原生 Native 之間還是存在差距。
- 開發效率：面向标準的 Web 開發是前端開發者的首選。
基于以上這兩點，Hybrid App 通過借助端能力不斷改善端上 Web 頁面的性能與體驗，以無限接近 Native 為目标。PHA 的典型架構如下（來自阿裡的 Rax）：
借助容器/核心能力，最終打造端上極緻 Web 體驗，支援的能力包括但不限于：
- 直出/秒開方案：NSR 方案提供極緻的性能
- Tab 架構方案：通用 Web 業務場景的容器級 Tab 架構方案
- 無限清單滾動：支援 Dom 節點回收的 Virtual scroller
- 下拉重新整理體驗：保持與 Native 一緻的下拉重新整理體驗
- 互動/富媒體元件：利用混合渲染能力支援 Native 元件增強
2.PHA 熱門架構
React Native
借助 React Native ，開發者可以僅使用 JavaScript 建構移動應用程式。 它使用與 React 相同的設計，讓開發者可以從聲明式元件組成豐富的移動 UI。
使用 React Native 架構，開發者最終建構成為一個真正的移動應用程式，與使用 Objective-C（Swift） 或 Java（Koltin） 建構的應用程式沒有任何差別。
React Native 使用與正常 iOS 和 Android 應用程式相同的基本 UI 建構塊。 開發者隻需使用 JavaScript 和 React 将這些建構塊組裝在一起。
Ionic Framework
Ionic Framework 是用于混合移動應用程式（hybrid mobile app）開發的完整開源 SDK。 它使用 CSS、HTML5 和 Sass 等 Web 技術為混合移動應用程式開發提供工具和服務。 可以使用這些 Web 技術建構應用程式，然後通過原生應用程式商店分發，同時使用 Cordova 在裝置上安裝。
Ionic Framework 是完全免費和開源的，由 MIT 協定授權并由龐大的全球社群提供支援。 Ionic Framework 擁有 120 多種本機裝置功能，例如：藍牙、HealthKit、指紋驗證，以及更多帶有 Cordova/PhoneGap 插件和 TypeScript 擴充的功能。
開發者可以使用 CLI 建立、建構、測試 Ionic 應用程式并将其部署到任何平台上。 該架構具有 Ionicons 圖示包，其中包含數百個最常見的應用程式圖示。 開發者可以通過 Live Reload 來開發應用程式，同時還提供了很多其他有用的功能，如：深度連結（deep linking）、AoT 編譯和自定義動畫 API。
Ionic 與架構無關，并且官方支援 React、Preact、Angular 和 Vue，以及 Web Components。
NativeScript
NativeScript 應用程式最初由 Progress 建立，是使用 JavaScript 或使用任何可轉換為 JavaScript 的語言（例如 TypeScript）建構的。
這個混合移動應用程式架構與現代 Angular 版本深度內建，包括全棧功能，例如與 Angular CLI 的內建、路由器支援和代碼生成。 它還可以通過社群開發的插件與 Vue 內建，該插件支援使用 Vue CLI、Vuex 以及其他衆多功能。
使用 NativeScript 建構的移動應用程式實際上是完全原生的應用程式，并且使用與在 Xcode 或 Android Studio 中開發的相同的 API。 這意味着開發者可以獲得沒有 WebView 的平台原生 UI，并以原生性能運作。
此外，軟體開發人員可以在移動應用程式中重新利用來自 Cocoapods、Android Arsenal、Maven 和 npm.js 的第三方庫，而無需包裝器。
Svelte Native
Svelte Native 是此清單中最年輕的混合應用程式開發架構。 随着 Svelte 架構因其簡單性而在 Web 開發人員中迅速流行起來，移動架構也迅速緊随其後。
Svelte Native 由 Svelte 和 NativeScript 提供支援。 是以，雖然像 React Native 這樣的移動應用程式架構在實際移動裝置上執行大部分工作，但 Svelte Native 采用了一種新方法，将工作轉移到建構時的編譯步驟。
此外，Svelte 不依賴虛拟 DOM 等技術，而是建立代碼，在應用程式的階段發生變化時更新本機視圖小部件（native view widgets）。
Framework7
Framework7 是一個免費的開源移動 HTML 架構，用于開發具有原生外觀的混合移動應用程式、Web 應用程式和漸進式 Web 應用程式 (PWA)。 此外，它還可以與 Electron 和 NW.js 等額外工具搭配使用，讓開發者可以建構本機桌面應用程式。
這個混合應用程式架構可以成為不可或缺的原型設計工具，可以在您需要時盡快展示可用的應用程式原型。 它專注于 iOS 和 Google Material 設計，以帶來最佳體驗和簡潔性。
與類似的混合應用程式架構非常相似，Framework7 為 Vue、React 和 Svelte 等流行的 JS 架構提供了豐富的元件生态系統。
Framework7 提供的一些有用功能包括本機滾動、庫不可知、頁面轉換動畫、多視圖支援、通過 CSS3 的硬體加速動畫、使用 XHR、緩存、浏覽器曆史記錄和預加載的組合路由頁面。
Onsen UI
自 2013 年釋出以來，Onsen UI 的采用率迅速增長，是 Apache v2 許可下的開源架構。 Onsen UI 是與架構無關的 UI 元件，開發者可以在以下架構之間進行選擇和切換：AngularJS、Angular、React 和 Vue.js，或者使用純 JavaScript 來建構混合應用程式。
架構架構由三層組成：CSS 元件、Web 元件和架構綁定。 它還具有大量随時可用、響應迅速的開箱即用元件。
這個架構非常容易使用，靈活，有語義标記元件，并且可以免費用于商業項目。
ExtJS
ExtJS 是一種企業級産品，用于使用 HTML5 和 JavaScript 建構跨平台的端到端移動 Web 應用程式。 它特别适合建構資料密集型、跨平台的 Web 和移動應用程式。
這個混合移動應用程式架構宣稱是“世界上最好的 JavaScript 架構”。 事實上，在使用該架構的 10,000 家公司中就有 Apple、Adobe、Cisco、Nvidia 和許多其他全球企業。
對于個人開發人員和自由職業者，Ionic、Onsen UI 或 Framework7 可能是更好的選擇。但是，對于企業應用程式，ExtJS 依然引領潮流。
ExtJS 通過在其支援的所有平台上提供原生外觀和體驗進而在衆多競争者中脫穎而出。 ExtJS 有助于建立具有近乎原生體驗的高性能混合移動應用程式，并為所有領先平台（包括 iOS、Android、Windows Phone 和黑莓）打包具有原生外觀的即用型小部件。
ExtJS 架構還具有拖放式 HTML5 可視化應用程式建構器以及大量随時可用的模闆，同時内置了對 Angular 和 React 的支援。
Quasar
Quasar Framework 由 Vue.js 提供支援，使開發人員能夠使用單一代碼庫一次性編寫代碼并同時部署為網站（SPA、PWA、SSR）、移動應用程式（iOS、Android）和桌面（使用 Electron） 。
Quasar 開箱即用，遵循 Google Material 指南，帶來最先進的 UI。 它還提供 HTML/CSS/JS 壓縮、緩存清除、tree shaking、sourcemapping、代碼拆分和延遲加載、ES6 轉譯、linting 代碼和可通路性功能，同時保持較小的性能開銷。
實際上，這款混合移動裝置的建立者應用程式架構聲稱它是“最注重性能的架構”。借助 Quasar CLI，開發人員還可以從熱加載等附加功能中受益，同時具有非常詳盡的文檔和活躍的社群。
值得一提的是，Quasar 是 100% 免費、開源的，并具有 MIT 獲得許可。
3.PHA 在大廠概覽
在淘寶，主要存在三種運作容器：基于 Web 的 PHA 容器、面向跨端研發的 Weex 容器&引擎（一般采用 Weex 自動降級 H5 政策）、基于雲原生的 JavaScript 容器 Noslate。這裡我們重點介紹下 PHA 方案：
PHA 是用于提升 Hybrid 體驗的架構，在遵循 Web 标準的同時，PHA 提供了漸進式增強的政策、性能極佳的富互動元件來建立 Hybrid 應用，讓這些 Web 應用具有與 Native 相同的使用者體驗。
借助容器/核心能力打造端上極緻的 Web 體驗，支援的能力包括但不限于：資料預請求、離線資源緩存功能、WebView 模闆化、App Worker、Tab 架構方案、下拉重新整理體驗、啟動屏體驗、富互動元件等等。
整體PHA的實作架構如上圖所示，更多關于 PHA 在淘寶的實踐可以參考文末資料，本文隻是做一個簡單的介紹。
U4 核心是一個基于開放Web技術的高性能渲染引擎，目前服務于整個阿裡集團幾乎所有的APP，在集團外部也有不少重量級合作夥伴
4.本文總結
本文主要和大家介紹 PHA，包括什麼是PHA、為什麼需要PHA、PHA的幾個流行架構。關于PHA文章有些地方并沒有過多展開，如果有興趣，可以在我的首頁繼續閱讀，同時文末的參考資料提供了大量優秀文檔以供學習。最後，歡迎大家點贊、評論、轉發、收藏！
參考資料
https://blog.jscrambler.com/12-frameworks-for-mobile-hybrid-apps/
https://www.wenjiangs.com/doc/rax-guide-pha
https://www.zhihu.com/question/68208980/answer/2981673589
https://blog.csdn.net/Taobaojishu/article/details/128710816
https://weexapp.com/zh/
https://zhuanlan.zhihu.com/p/21677103
https://developer.aliyun.com/article/656994?spm=a2c6h.12873581.0.0.75e165c3bD3EFk
https://www.zhihu.com/question/68208980/answer/2981673589