你好，在課程的最開始，我想先來帶你從跨多終端技術(shù)發(fā)展歷程看看未來大前端的發(fā)展趨勢。

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，業(yè)務(wù)平臺對多設(shè)備、多終端的需求越來越多，因此，僅掌握單一平臺編程開發(fā)能力已經(jīng)稍顯欠缺。由于在業(yè)務(wù)開發(fā)過程中，開發(fā)者大部分的時間都專研于一種編程語言，如果想要掌握多端開發(fā)能力，則又稍顯力不從心。因此 大前端 的概念應(yīng)運(yùn)而生，本課時主要介紹大前端的發(fā)展歷程，以及如何做好大前端技術(shù)的選型分析。

什么是大前端

大前端概念對于編程開發(fā)者來說早已耳熟能詳，從我的角度來理解這個概念的話，主要是通過同一套編程代碼，經(jīng)過框架編譯轉(zhuǎn)化能夠適應(yīng)于多端平臺的前端交互界面。當(dāng)然這里只介紹目前應(yīng)用較廣的三個方面，即 iOS、Andorid 和 Web H5，之后可以再延伸到小程序、TV、Watch 等其他智能設(shè)備，如圖 1 所示。

圖 1 多端平臺的前端交互界面

大前端的核心是為了解決多端不一致和人力的問題。比如在一些交互復(fù)雜度不高的應(yīng)用中，通過這種模式可以更好地節(jié)省人力成本，特別是在一些前期快速發(fā)展的創(chuàng)業(yè)公司，可以使用較少的人力來支撐一些核心業(yè)務(wù)功能。

跨端技術(shù)的發(fā)展

移動端跨平臺技術(shù)經(jīng)過了一個漫長的發(fā)展史，如圖 2 所示。下面主要介紹下在這個發(fā)展過程中跨平臺技術(shù)有了哪些進(jìn)步或者做了哪些優(yōu)化。

圖 2 跨端技術(shù)的發(fā)展過程

技術(shù)核心原生支持動態(tài)性性能體驗(yàn)Ionic/CordovaJSBridge 封裝給 Web 調(diào)用90%中差差React Native/WeexJIT 模式應(yīng)用 JS 與原生通信20%好中中Flutter自渲染5%優(yōu)良優(yōu)

• Ionic/Cordova（Hybrid），在技術(shù)原理上的核心是，將原生的一些能力通過 JSBridge 封裝給 Web 來調(diào)用，擴(kuò)充了 Web 應(yīng)用能力。但是這種方法有兩個不足，一是依賴客戶端，二是在性能和體驗(yàn)上都非常依賴于 Web 端。因此，整體上的體驗(yàn)不可預(yù)知。目前這個技術(shù)還經(jīng)常被應(yīng)用到，例如，當(dāng)前 App 內(nèi)會提供白名單域名和可調(diào)用的 JSBridge 方法，由此來增強(qiáng) H5 與客戶端交互能力，從而提升 App 內(nèi) H5 的靈活性。

• React Native/Weex，在原來的 Hybrid 的 JSBridge 基礎(chǔ)上進(jìn)行改進(jìn)，將 JavaScript 的界面以及交互轉(zhuǎn)化為 Native 的控件，從而在體驗(yàn)上和原生界面基本一致。但因?yàn)槭?JIT 模式，因此需要頻繁地在 JavaScript 與 Native 之間進(jìn)行通信，從而會有一定的性能損耗影響，導(dǎo)致體驗(yàn)上與原生會有一些差異。

• Flutter，取長補(bǔ)短，結(jié)合了之前的一些優(yōu)點(diǎn)，解決了與 Native 之間通信的問題，同時也有了自渲染模式（框架自身實(shí)現(xiàn)了一套 UI 基礎(chǔ)框架，與原來的渲染模式基本一致）。從而在體驗(yàn)和性能上相對之前的兩種框架表現(xiàn)都較好，具體是如何做到的，我會在接下來的第 22 課時中詳細(xì)介紹。

經(jīng)過上面的技術(shù)原理和優(yōu)缺點(diǎn)對比，F(xiàn)lutter 在各方面都表現(xiàn)出了突出的優(yōu)勢，因此把 Flutter 作為入門大前端的核心框架。

選擇 Flutter 的思考

大前端這個概念從開始到現(xiàn)在已經(jīng)有整整 10 年時間，那為什么到現(xiàn)在還沒有一統(tǒng)江湖呢？其實(shí)從我的角度來看，F(xiàn)lutter 也不會創(chuàng)造一統(tǒng)江湖的成果，因?yàn)槎喽嘶蛘咧悄茉O(shè)備的發(fā)展終究不會停止，也很難做到統(tǒng)一標(biāo)準(zhǔn)。那為什么我們還要選擇 Flutter 來作為大前端核心框架呢？

事實(shí)上 Flutter 的確能夠?yàn)槲覀兘鉀Q一些場景問題， 節(jié)省人力成本，同時不影響用戶體驗(yàn)。

選擇 Flutter 并不是為了代替 iOS 或者 Android，而是做一個技術(shù)互補(bǔ)，比如，F(xiàn)lutter 負(fù)責(zé)業(yè)務(wù)功能，而 iOS 和 Android 則負(fù)責(zé)部分的底層交互提供服務(wù)給到 Flutter 應(yīng)用。Flutter 也是在這兩年剛剛興起的，在應(yīng)用起步初期還需要部分底層的服務(wù)與原生平臺進(jìn)行交互。相信再經(jīng)過一段時間的發(fā)展，F(xiàn)lutter 在這方面會不斷地優(yōu)化和提升，也將能夠獨(dú)立覆蓋到更多復(fù)雜的業(yè)務(wù)場景。因此希望你能夠明白大前端的概念，以及 Flutter 目前的應(yīng)用場景。

分析完后，下面對目前的技術(shù)團(tuán)隊(duì)和未來技術(shù)團(tuán)隊(duì)進(jìn)行一個簡單分析，也可以認(rèn)為是一個預(yù)測。如果你覺得有幫助，那么可以往這方面進(jìn)行一些嘗試，如圖 3 所示。大部分開發(fā)者會集中在跨端技術(shù)團(tuán)隊(duì)中；而另一部分核心技術(shù)攻堅(jiān)則在相應(yīng)的平臺技術(shù)端（比如 Android 基礎(chǔ)技術(shù)團(tuán)隊(duì)、iOS 基礎(chǔ)技術(shù)團(tuán)隊(duì)或 Web 基礎(chǔ)技術(shù)團(tuán)隊(duì)），為跨端技術(shù)團(tuán)隊(duì)提供基礎(chǔ)技術(shù)服務(wù)支撐。當(dāng)然如果跨端技術(shù)團(tuán)隊(duì)將組件完善并且可通用化，那么跨端技術(shù)團(tuán)隊(duì)的人員則可以更快地配置組裝的方式構(gòu)建業(yè)務(wù)功能。

圖 3 技術(shù)團(tuán)隊(duì)選型

總結(jié)

本課時首先介紹了大前端的概念以及發(fā)展歷程，以及從發(fā)展歷程來看我們選擇 Flutter 的原因，其次也分析了未來跨端框架的發(fā)展思考，從而得出新大前端團(tuán)隊(duì)架構(gòu)體系。相信通過本課時的學(xué)習(xí)，你對大前端的概念和發(fā)展以及未來的前景有一定的認(rèn)識，并且在看過本課時以后，應(yīng)該要為大前端的方向上做一定的技術(shù)積累和沉淀。

下一課時，我將講解 Flutter 框架中使用的編程語言 Dart，為了方便你更好地理解，我將從 JavaScript 角度來講解。