大前端是什麼？
簡單來說，大前端就是所有前端的統稱，比如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的原生開發技術，然後瞭解一下常見的跨平臺技術，只有這樣才能更好的融入到大前端的這個大家庭中。