為項(xiàng)目進(jìn)行框架級(jí)別的技術(shù)選型，就類似為籃球隊(duì)量身定制戰(zhàn)術(shù)，選擇一個(gè)適合開(kāi)發(fā)團(tuán)隊(duì)的規(guī)模和團(tuán)隊(duì)成員的技術(shù)棧和能力，針對(duì)業(yè)務(wù)和項(xiàng)目，能幫助團(tuán)隊(duì)贏得更多的技術(shù)，是每個(gè)軟件項(xiàng)目能夠順利推進(jìn)的先決條件，也是業(yè)務(wù)常青的有效的保障。這里，我們來(lái)聊聊為一個(gè)新的前端項(xiàng)目挑選一個(gè)合適的技術(shù)模型，對(duì)比在去年都發(fā)布了 release 版本的 Angular2 和 Vue2（以下如沒(méi)有特別指明，Angular 即為 Angular2，Vue 即為 Vue2），并不作魚(yú)和熊掌哪個(gè)更美味的選擇，而是站在技術(shù)本身，對(duì)應(yīng)項(xiàng)目和開(kāi)發(fā)人員的角度，幫助工程師在所處的業(yè)務(wù)場(chǎng)景下挑選最好的武器。

[[343845]]

技術(shù)

開(kāi)發(fā)者

開(kāi)發(fā)者/團(tuán)隊(duì)2016 年 release，核心由 Google 開(kāi)發(fā)，周圍有些生態(tài)環(huán)境組件由 Netflix，Babel 社區(qū)，微軟等相關(guān)開(kāi)發(fā)者開(kāi)發(fā)，參與人數(shù)比較多，Google 后期不維護(hù)這個(gè)項(xiàng)目的可能性比較小，但是不能排除部分框架內(nèi)使用的第三方組件（如 zone.js ）后期缺乏維護(hù)的可能性2016 年 release，由尤雨溪主導(dǎo)開(kāi)發(fā)，目前作者已經(jīng)全職開(kāi)發(fā) Vue，但是也不能完全排除后期作者停止維護(hù)的可能性，目前 issue 少，報(bào)告的 bug 都修復(fù)了業(yè)內(nèi)使用情況國(guó)內(nèi)推廣情況目前不明朗，國(guó)外比國(guó)內(nèi)強(qiáng)，資料也比國(guó)內(nèi)多國(guó)內(nèi)推廣情況比較好，滴滴，阿里等很多團(tuán)隊(duì)都在用，國(guó)外推廣情況也不錯(cuò)文檔和資料提供中文文檔（翻譯質(zhì)量一般），YouTube 資料很多提供中文文檔，資料相對(duì) Angular 少一些

目前沒(méi)法確切的評(píng)估未來(lái)一段時(shí)間這兩個(gè)框架的維護(hù)情況，但基本能確定的是，框架的生命周期不會(huì)比我們大部分業(yè)務(wù)的生命周期短。Angular 的缺點(diǎn)在于，除了核心之外，像 core-js，rxjs，zone.js 等生產(chǎn)環(huán)境依賴的系統(tǒng)不是 Google 的人主導(dǎo)的，存在潛在質(zhì)量問(wèn)題的可能性，并且 Angular 目前已經(jīng)發(fā)布了 Angular4 的 rc 版本（主版本跳過(guò)了 Angular3 ），后面預(yù)計(jì)半年進(jìn)行一次主版本的更新，雖然相關(guān)開(kāi)發(fā)人員承諾盡可能向下兼容，但是后續(xù)對(duì)主版本的頻繁升級(jí)對(duì)項(xiàng)目的影響還是個(gè)未知數(shù)；Vue 由于作者是中國(guó)人，在國(guó)內(nèi)推廣的很好，口碑很不錯(cuò)，作者也清理 GitHub issue 的速度也非?？欤訒?huì)相對(duì)更少一些，后面也和阿里合作成為了 Weex 的官方框架，而 Angular 在國(guó)內(nèi)目前形勢(shì)還不是很清晰，主要原因可能在于中文資料的數(shù)量遠(yuǎn)遠(yuǎn)小于英文資料。從國(guó)內(nèi)的使用情況以及社區(qū)發(fā)展來(lái)看，Vue 更勝一籌。

語(yǔ)言

官方使用語(yǔ)言

Typescript，官方提供 compiler-cli 把框架代碼從 Typescript 直接編譯到 Javascript 的 AST 語(yǔ)法樹(shù)，屬于對(duì) Typescript 的深度支持

ES6+語(yǔ)言的開(kāi)發(fā)者微軟(主導(dǎo)開(kāi)發(fā) Typescript 的是 Anders Hejlsberg，此人也是 C# 語(yǔ)言的項(xiàng)目負(fù)責(zé)人 )ECMAScript 標(biāo)準(zhǔn)委員會(huì)制定標(biāo)準(zhǔn)，各個(gè)瀏覽器廠商實(shí)現(xiàn)語(yǔ)言特點(diǎn)靜態(tài)類型，提供靜態(tài)檢查，現(xiàn)有 ES6+ 的超集，官方提供的編譯器能夠支持編譯到 ES5，ES6，貼合工程化的需要，適合團(tuán)隊(duì)使用，學(xué)習(xí)成本不高動(dòng)態(tài)類型，比較靈活，目前標(biāo)準(zhǔn)委員會(huì)每年更新一次標(biāo)準(zhǔn)，加入新特性，通常使用Babel 以及插件編譯到 ES5IDE/編輯器支持情況主流 IDE/編輯器支持，官方推薦 VS Code主流 IDE/編輯器都支持，語(yǔ)言新特性 IDE 相對(duì)文本編輯器支持的更好能否使用其他開(kāi)發(fā)語(yǔ)言也支持 Javascript 和 Dart，并且官方提供這兩種語(yǔ)言的文檔也支持Typescript，但文檔相對(duì)較少

為了避免前端組件缺乏一致的管理方式，重造輪子，解決多人在快速迭代中協(xié)作開(kāi)發(fā)導(dǎo)致的代碼逐漸混亂，Javascript 的動(dòng)態(tài)類型增加了重構(gòu)難度的情況，我們希望引入靜態(tài)語(yǔ)言，通過(guò)類型檢查使數(shù)據(jù)更清晰，通過(guò)接口規(guī)范開(kāi)發(fā)行為，這一點(diǎn) Angular 通過(guò)默認(rèn)引入 Typescript 比 Vue 做的更好。Typescript 雖然本身是微軟公司的產(chǎn)品，但是從編譯器效率到使用體驗(yàn)均比目前的 Javascript 要強(qiáng)，在編寫(xiě) ES6+ 代碼時(shí)，經(jīng)常因?yàn)?Babel 插件質(zhì)量問(wèn)題導(dǎo)致的坑，能避免很多。

工具

ng-cli 提供了包括從開(kāi)發(fā)階段架設(shè)前端 server 服務(wù)，代碼生成，查閱文檔，測(cè)試，到部署過(guò)程的構(gòu)建等的一系列指令，相比 vue-cli 只提供基礎(chǔ)的項(xiàng)目初始化和構(gòu)建功能，ng-cli 更好用。在 debug 工具層面，Vue 做的更好，vue-devtools 整合了 Vue 的狀態(tài)管理工具 vuex，而使用 Angular 的狀態(tài)管理方案 ngrx 的時(shí)候，則需要配合 Redux DevTools Extension。

除了 ng-cli，angular2-webpack-starter 也提供了完整的 Angular + Webpack 的種子項(xiàng)目。我們也可以根據(jù)業(yè)務(wù)調(diào)整具體的構(gòu)建過(guò)程。

設(shè)計(jì)

從設(shè)計(jì)上看，Angular 提供了難以撼動(dòng)的全面的解決方案，基本照顧到了開(kāi)發(fā)流程的每個(gè)節(jié)點(diǎn)，他的 Form 支持，DI，測(cè)試流程，都是在開(kāi)發(fā)體驗(yàn)上優(yōu)于 Vue 的點(diǎn)，但是為了追求全面性，Angular 就無(wú)法避免的存在構(gòu)建后體積大小和整個(gè)框架侵入性太強(qiáng)的問(wèn)題。而 Vue 作為漸進(jìn)增強(qiáng)的框架，不在一開(kāi)始就在使用場(chǎng)景和模式上限制用戶，而是通過(guò)官方提供的擴(kuò)展，以及第三方擴(kuò)展，逐漸為更復(fù)雜的需求場(chǎng)景提供解決方案，也給用戶提供了選擇的余地。

性能

我們截取 Vue 官方文檔上關(guān)于兩個(gè)框架性能的對(duì)比報(bào)告截圖。對(duì)比了 Angular 在去年 8 月發(fā)布的 rc 版本和同期 Vue beta 版本的不同操作的性能?？梢钥闯?，兩個(gè)框架都非常的快，Angural 和 Vue 在大多操作上性能指標(biāo)均處同一個(gè)數(shù)量級(jí)，Vue 在部分指標(biāo)上略勝一籌。

在內(nèi)存占用上，Vue 要優(yōu)于 Angular，但是 Angular 框架本身提供了非常多的特性，而 Vue 在開(kāi)發(fā)過(guò)程中引入 vue-router，vuex，vue-class-component 逐步發(fā)展為 Vue 全家桶的過(guò)程中，會(huì)逐步增長(zhǎng)對(duì)內(nèi)存的需求。

開(kāi)發(fā)模式

從學(xué)習(xí)曲線上看，Angular 要更陡峭，Vue 要相對(duì)平緩一些。在Web Componnet，PWA 上，Angular 要比 Vue 走的更遠(yuǎn)，更適合未來(lái)的標(biāo)準(zhǔn)，面向 Google 自己的技術(shù)棧。從能夠開(kāi)發(fā)的應(yīng)用的全面性上，Angular 和 Vue 相差無(wú)幾。

彈性

在業(yè)務(wù)開(kāi)發(fā)中，技術(shù)選型并不能僅僅滿足當(dāng)前的業(yè)務(wù)需求的需要，而要考慮當(dāng)前業(yè)務(wù)的狀態(tài)，是剛剛開(kāi)始，持續(xù)發(fā)展，還是穩(wěn)定維護(hù)。考慮到業(yè)務(wù)后期可能出現(xiàn)的增長(zhǎng)情況，這就要求我們選擇的技術(shù)具備一定的彈性，能夠隨著業(yè)務(wù)伸縮，避免后期維護(hù)成本過(guò)高，擴(kuò)展困難的情況的發(fā)生。

• 這里截取了前端框架選型遷移的統(tǒng)計(jì)情況。y 軸代表遷移之前的選型，x 軸代表遷移之后的選型。表格中顏色越深，代表從選型 A 到選型 B 進(jìn)行遷移的案例越多。可以發(fā)現(xiàn)，大家最多選型遷移的目標(biāo)是 React，選擇遷移到 Angular 的案例要比選擇遷移到 Vue 的案例多，選擇遷移到 Vue 的，絕大多數(shù)是 React 用戶（相反從 Vue 遷移到 React 的用戶也有一定數(shù)量）；而從 Angular 或 Vue 遷移到其他框架的案例較少，側(cè)面證明了這兩個(gè)框架在目前業(yè)界具備足夠的彈性

業(yè)務(wù)場(chǎng)景

這里我們以點(diǎn)評(píng)點(diǎn)餐的內(nèi)部數(shù)據(jù)系統(tǒng)為例。我們把系統(tǒng)對(duì)不同前端使用場(chǎng)景的頻率和要求從0到10進(jìn)行打分，分值越高的，相應(yīng)場(chǎng)景的需求要求就越高，反之就越低。我們發(fā)現(xiàn)，我們的需求集中在圖表繪制，組件管理和表單的提交校驗(yàn)上。數(shù)量較多的組件對(duì)于我們的組件管理方式提出了較高的要求；在已有的系統(tǒng)中我們對(duì) highcharts 和 echarts 都有依賴，但是將逐步把圖表組件遷移到 echarts 上。對(duì)于echarts，目前有vue-echarts，對(duì)于highcharts，有人做了angular2-highcharts。

開(kāi)發(fā)人員

目前點(diǎn)餐數(shù)據(jù)系統(tǒng)日常人力 1 人，對(duì)多人協(xié)作開(kāi)發(fā)要求比較低，開(kāi)發(fā)效率要求比較高，單個(gè)項(xiàng)目規(guī)模不大，有多端多項(xiàng)目開(kāi)發(fā)的要求，技術(shù)選型能夠適應(yīng)快速迭代是一個(gè)目標(biāo)，最大程度上的減少人力瓶頸的出現(xiàn)。

結(jié)論

首先，技術(shù)上對(duì)比 Angular 和 Vue，都是值得長(zhǎng)線投資的技術(shù)。Angular 提供大一統(tǒng)式的解決方案，從瀏覽器端，服務(wù)端，客戶端都有涉及，這種大一統(tǒng)的方案，優(yōu)點(diǎn)在于在幾乎任何場(chǎng)景，框架都提供了標(biāo)準(zhǔn)化的行為，而 Angular 通過(guò)一種侵入式較強(qiáng)的編程范式，規(guī)范了使用框架的所有開(kāi)發(fā)者的開(kāi)發(fā)行為，更工程化，更適合大型項(xiàng)目多人協(xié)作，同時(shí)，框架本身更擁抱標(biāo)準(zhǔn)，面向新特性，后面發(fā)展空間很大，而缺點(diǎn)是，這種大一統(tǒng)的方案，無(wú)法單獨(dú)由谷歌提供，谷歌除了開(kāi)發(fā) Angular 的核心模塊之外，在異步處理，狀態(tài)管理，周邊工具，使用了為數(shù)不少的第三方的庫(kù)或組件，這些庫(kù)和組件的行為是否會(huì)出現(xiàn)問(wèn)題，和后續(xù)發(fā)展，很難預(yù)測(cè)，潛在增加了風(fēng)險(xiǎn)，這些第三方的庫(kù)和組件，也有降低應(yīng)用性能的可能性。

Vue 的切入角度是，這個(gè)框架可以被不同程度的使用，可以單獨(dú)使用核心組件的部分，也可以加入狀態(tài)管理，也可以加入路由管理，從一部分使用 Vue 到全站使用 Vue 開(kāi)發(fā)，提供了開(kāi)發(fā)者更多的選項(xiàng)，也借鑒了不同的框架，并對(duì)其優(yōu)點(diǎn)單獨(dú)為 Vue 進(jìn)行了增強(qiáng)。這種精簡(jiǎn)和靈巧，非常適合項(xiàng)目初期的快速迭代，性能上，也沒(méi)有很大缺陷，隨著項(xiàng)目發(fā)展，性能也不會(huì)成為明顯的問(wèn)題。Vue 的潛在問(wèn)題在于，由于提供了開(kāi)發(fā)選項(xiàng)，在多人協(xié)作開(kāi)發(fā)的情況下，不同開(kāi)發(fā)者對(duì)于 Vue 使用程度和場(chǎng)景的處理可能會(huì)不一樣，而隨著項(xiàng)目增長(zhǎng)，以“快”為特點(diǎn)的技術(shù)，在工程化和代碼的管理上可能會(huì)出現(xiàn)困難，而像 Angular 提供的 DI 等功能，Vue 實(shí)現(xiàn)類似的功能就需要程序員進(jìn)行手動(dòng)控制，帶來(lái)了潛在的代碼管理的問(wèn)題，目前雖然業(yè)界有不少使用 Vue 的場(chǎng)景，但是大型線上在穩(wěn)定發(fā)展期業(yè)務(wù)，幾乎是沒(méi)有的。使用 Vue 在項(xiàng)目規(guī)模變大后，怎么處理 Vue 在項(xiàng)目中的地位，怎么組織代碼，都是我們需要考慮的。

在我們的業(yè)務(wù)和人力層面，我們對(duì)數(shù)據(jù)平臺(tái)架構(gòu)的規(guī)劃是多端多層的，架構(gòu)層服務(wù)于應(yīng)用層，應(yīng)用層服務(wù)于用戶。對(duì)于用戶層，新開(kāi)始的項(xiàng)目面臨邏輯經(jīng)常調(diào)整的可能性，也就是說(shuō)對(duì)于應(yīng)用層，我們需要一個(gè)靈活，能夠適應(yīng)快速迭代的框架，而應(yīng)用層的多種設(shè)備多種環(huán)境，也要求我們對(duì)性能要有起碼的考慮，目前現(xiàn)有的組件和庫(kù)，也希望新的框架能夠做較好的兼容和提供現(xiàn)成的解決方案。這種情況下，Vue 是比較推薦的，后期隨著應(yīng)用端發(fā)展，Vue 能夠確保沒(méi)有性能瓶頸，也給了我們后期引入更多 Vue 解決方案，形成 Vue 全家桶或者撤掉 Vue，用其他方案的空間。而對(duì)于架構(gòu)層，它發(fā)展的速度未必有應(yīng)用層快，它對(duì)業(yè)務(wù)的要求是穩(wěn)定，能夠增量開(kāi)發(fā)，盡量避免推倒重來(lái)影響應(yīng)用層，同時(shí)，它性能的要求明顯沒(méi)有應(yīng)用層高，這種情況，我們需要單獨(dú)區(qū)分一下，例如如果需要做應(yīng)用層的通用配置系統(tǒng)，配置應(yīng)用層的 UI 組件，那么顯然這個(gè)系統(tǒng)的組件框架要和應(yīng)用層一致，而像自助查詢平臺(tái)或其他項(xiàng)目，我們可以使用 Angular，為后來(lái)的技術(shù)棧做技術(shù)儲(chǔ)備。