一篇文章瞭解大前端

大前端是什麼？

簡單來講，大前端就是全部前端的統稱，好比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的原生開發技術，而後瞭解一下常見的跨平臺技術，只有這樣才能更好的融入到大前端的這個你們庭中。

更多精彩請關注個人微信公衆號。