大前端是什麼？
簡單來說，大前端就是所有前端的統稱，比如Android、iOS、web、Watch等，最接近使用者的那一層也就是UI層，然後將其統一起來，就是大前端。大前端最大的特點在於一次開發，同時適用於所有平臺，開發者不用為一個APP需要做Android和iOS兩種模式而擔心。大前端是web統一的時代，利用web不僅能開發出網站，更可以開發手機端web應用和移動端應用程式。
大前端為什麼出現？
由於node的出現，前端工程師不需要依賴於後端程式而直接執行，從而前後端分離起來。所以當開發一個新產品的時候服務只需要寫一次，但是面向使用者的產品可能有很多，例如網站、Android客戶端、iOS客戶端和微信小程式等。由於各個平臺使用的技術棧都不一樣，程式碼無法複用，非常浪費人力、物力。那麼有沒有什麼技術能夠解決這一痛點呢？大前端應運而生，其實大前端的主要核心就是跨平臺技術，有了跨平臺技術，各個平臺的差異性就抹平了，開發者只需要一套技術棧就可以開發出適用於多個平臺的客戶端。
跨平臺方案簡介
目前的主流跨平臺方案：Cordova/phoneGap、React Native、Weex、微信小程式、PWA和Flutter等，根據其原理性，可以分為四大類。
- H5+原生（Cordova、Ionic、微信小程式）
- JavaScript開發+原生渲染 （React Native、Weex、快應用）
- 自繪UI+原生(Flutter)
- 增強版Web App(PWA)
接下來簡單介紹這四種跨平臺方案。
H5+原生混合開發
這種模式又稱為Hybrid開發，現在很多App都用這種模式去開發，常見的有微信、淘寶、美團、愛奇藝等知名移動應用等。國內也有很多公司使用Hybrid模式去開發平臺，供開發者使用，像Dcloud、AppCan、Inoic等，基本上都是參考Cordova衍生出的混合開發框架。
這類框架主要原理就是將APP的一部分需要動態變動的內容通過H5來實現，通過原生的網頁載入控制元件WebView (Android)或WKWebView（ios）來載入，H5部分是可以隨時改變而不用發版，這樣就解決了動態化的需求，同時，由於h5程式碼只需要一次開發，就能同時在Android和iOS兩個平臺執行，這也可以減小開發成本，我們稱這種h5+原生的開發模式為混合開發。採用混合模式開發的APP我們稱之為混合應用或Hybrid APP。
由於原生開發可以訪問平臺所有功能，而混合開發中，h5程式碼是執行在WebView中，而WebView實質上就是一個瀏覽器核心，其JavaScript依然執行在一個許可權受限的沙箱中，所以對於大多數系統能力都沒有訪問許可權，如無法訪問檔案系統、不能使用藍芽等。所以，對於H5不能實現的功能，都需要原生去做。而混合框架一般都會在原生程式碼中預先實現一些訪問系統能力的API， 然後暴露給WebView以供JavaScript呼叫，這樣一來，WebView就成為了JavaScript與原生API之間通訊的橋樑，主要負責JavaScript與原生之間傳遞呼叫訊息，而訊息的傳遞必須遵守一個標準的協議，它規定了訊息的格式與含義，我們把依賴於WebView的用於在JavaScript與原生之間通訊並實現了某種訊息傳輸協議的工具稱之為WebView JavaScript Bridge, 簡稱 JsBridge，它也是混合開發框架的核心。
混合應用的優點是動態內容是H5，使用web技術棧就可以開發，社群及資源豐富，缺點是效能不好，對於複雜使用者介面或動畫，webview不堪重任。
JavaScript開發+原生渲染
這類開源框架的代表主要是Facebook的React Native、阿里的Weex，當然也有未開源的美團的Picasso，以及最新推出的快應用。 JavaScript開發+原生渲染的方式主要優點如下：
- 採用Web開發技術棧，社群龐大、上手快、開發成本相對較低。
- 原生渲染，效能相比H5提高很多。
- 動態化較好，支援熱更新。
當然也有缺點如下：
- 渲染時需要JavaScript和原生之間通訊，在有些場景如拖動可能會因為通訊頻繁導致卡頓。
- JavaScript為指令碼語言，執行時需要JIT，執行效率和AOT程式碼仍有差距。 +由於渲染依賴原生控制元件，不同平臺的控制元件需要單獨維護，並且當系統更新時，社群控制元件可能會滯後；除此之外，其控制元件系統也會受到原生UI系統限制，例如，在Android中，手勢衝突消歧規則是固定的，這在使用不同人寫的控制元件巢狀時，手勢衝突問題將會變得非常棘手。
React Native
React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架，是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產物，目前支援iOS和Android兩個平臺。RN使用Javascript語言，類似於HTML的JSX，以及CSS來開發移動應用，因此熟悉Web前端開發的技術人員只需很少的學習就可以進入移動應用開發領域。
React Native的原理和React設計一致，React中虛擬DOM最終會對映為瀏覽器DOM樹，而RN中虛擬DOM會通過 JavaScriptCore 對映為原生控制元件樹。
JavaScriptCore 是一個JavaScript直譯器，它在React Native中主要有兩個作用：
- 為JavaScript提供執行環境。
- 是JavaScript與原生應用之間通訊的橋樑，作用和JsBridge一樣，事實上，在iOS中，很多JsBridge的實現都是基於 JavaScriptCore 。
而RN中將虛擬DOM對映為原生控制元件的過程中分兩步：
- 佈局訊息傳遞； 將虛擬DOM佈局資訊傳遞給原生
- 原生根據佈局資訊通過對應的原生控制元件渲染控制元件樹
由於React Native是原生控制元件渲染，所以效能會比混合應用中H5好很多，同時React Native是Web開發技術棧，只需維護一份程式碼，即可在多個平臺上使用。
Weex
Weex是阿里巴巴於2016年釋出的跨平臺移動端開發框架，思想及原理和React Native類似，最大的不同是語法層面，React Native使用React.js作為開發框架，而Weex則使用Vue.js作為開發框架。Vue和React堪稱前端領域最火的JavaScript框架，它們的易用性和功能性都非常強大，Weex在淘寶上也有廣泛的應用。
快應用
快應用是華為、小米、OPPO、魅族等國內9大主流手機廠商共同制定的輕量級應用標準，目標直指微信小程式。它也是採用JavaScript語言開發，原生控制元件渲染，與React Native和Weex相比主要有兩點不同：
- 快應用自身不支援Vue或React語法，其採用原生JavaScript開發，其開發框架和微信小程式很像，值得一提的是小程式目前已經可以使用Vue語法開發（mpvue），從原理上來講，Vue的語法也可以移植到快應用上。
- React Native和Weex的渲染/排版引擎是整合到框架中的，每一個APP都需要打包一份，安裝包體積較大；而快應用渲染/排版引擎是整合到ROM中的，應用中無需打包，安裝包體積小，正因如此，快應用才能在保證效能的同時做到快速分發。
自繪UI+原生
通過在不同平臺實現一個統一介面的渲染引擎來繪製UI，而不依賴系統原生控制元件，所以可以做到不同平臺UI的一致性。注意，自繪引擎解決的是UI的跨平臺問題，如果涉及其它系統能力呼叫，依然要涉及原生開發。這種平臺技術的優點如下：
- 效能高；由於自繪引擎是直接呼叫系統API來繪製UI，所以效能和原生控制元件接近。
- 靈活、元件庫易維護、UI外觀保真度和一致性高；由於UI渲染不依賴原生控制元件，也就不需要根據不同平臺的控制元件單獨維護一套元件庫，所以程式碼容易維護。由於元件庫是同一套程式碼、同一個渲染引擎，所以在不同平臺，元件顯示外觀可以做到高保真和高一致性；另外，由於不依賴原生控制元件，也就不會受原生布局系統的限制，這樣佈局系統會非常靈活。
不足之處：
- 動態性不足；為了保證UI繪製效能，自繪UI系統一般都會採用AOT模式編譯其釋出包，所以應用釋出後，不能像Hybrid和RN那些使用JavaScript（JIT）作為開發語言的框架那樣動態下發程式碼。
Flutter
Flutter 是 Google推出並開源的移動應用開發框架，主打跨平臺、高保真、高效能。開發者可以通過 Dart語言開發 App，一套程式碼同時執行在 iOS 和 Android平臺。 Flutter提供了豐富的元件、介面，開發者可以很快地為 Flutter新增原生擴充套件。
Flutter既不使用WebView，也不使用作業系統的原生控制元件。 相反，Flutter使用自己的高效能渲染引擎來繪製widget。這樣不僅可以保證在Android和iOS上UI的一致性，而且也可以避免對原生控制元件依賴而帶來的限制及高昂的維護成本。
Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個2D圖形處理函式庫，包含字型、座標轉換，以及點陣圖都有高效能且簡潔的表現，Skia是跨平臺的，並提供了非常友好的API，目前Google Chrome瀏覽器和Android均採用Skia作為其繪圖引擎，值得一提的是，由於Android系統已經內建了Skia，所以Flutter在打包APK(Android應用安裝包)時，不需要再將Skia打入APK中，但iOS系統並未內建Skia，所以構建iPA時，也必須將Skia一起打包，這也是為什麼Flutter APP的Android安裝包比iOS安裝包小的主要原因。
但是Flutter也有不足之處，不支援動態下發程式碼和熱更新。
PWA(Progress Web App)
PWA不屬於上述跨平臺開發的某一種，它是一種理念，PWA 本質上是 Web App，藉助一些新技術也具備了 Native App 的一些特性，比如離線能力、本地快取、和通知推送，兼具 Web App 和 Native App 的優點，看起來更像一個原生App。PWA完全使用前端技術棧，不過它需要手機和瀏覽器的支援，目前支援ServiceWorker和Google Play Service的Android手機，以及搭載11.3以上的iOS手機可以使用PWA。由於國內手機廠商和瀏覽器廠商的統一性問題，PWA在國內發展不是很好，但是在國外並沒有這些問題。
大前端趨勢
大前端不僅會成為移動開發與Web前端的發展趨勢，也將會是未來的顯示裝置終端的開發技術趨勢。大前端將做更多的終端開發、工程化等工作，而不僅僅只是開發Web頁面。大前端工程師將能搞定所有端上的開發。與充滿爭議的全棧工程師相比，它更具可操作性。但同時對開發者而言，要會更多的技術棧，比如原生開發者要學習html、css、js等前端知識，前端開發人員也要學習Android或iOS的原生開發技術，然後瞭解一下常見的跨平臺技術，只有這樣才能更好的融入到大前端的這個大家庭中。
更多精彩請關注我的微信公眾號。
