建站
咨詢
售后
建站咨詢
新聞中心
為項目進行框架級別的技術(shù)選型，就類似為籃球隊量身定制戰(zhàn)術(shù)，選擇一個適合開發(fā)團隊的規(guī)模和團隊成員的技術(shù)棧和能力，針對業(yè)務(wù)和項目，能幫助團隊贏得更多的技術(shù)，是每個軟件項目能夠順利推進的先決條件，也是業(yè)務(wù)常青的有效的保障。這里，我們來聊聊為一個新的前端項目挑選一個合適的技術(shù)模型，對比在去年都發(fā)布了 release 版本的 Angular2 和 Vue2（以下如沒有特別指明，Angular 即為 Angular2，Vue 即為 Vue2），并不作魚和熊掌哪個更美味的選擇，而是站在技術(shù)本身，對應(yīng)項目和開發(fā)人員的角度，幫助工程師在所處的業(yè)務(wù)場景下挑選最好的武器。
技術(shù)
開發(fā)者
開發(fā)者/團隊2016 年 release，核心由 Google 開發(fā)，周圍有些生態(tài)環(huán)境組件由 Netflix，Babel 社區(qū)，微軟等相關(guān)開發(fā)者開發(fā)，參與人數(shù)比較多，Google 后期不維護這個項目的可能性比較小，但是不能排除部分框架內(nèi)使用的第三方組件（如 zone.js ）后期缺乏維護的可能性2016 年 release，由尤雨溪主導開發(fā)，目前作者已經(jīng)全職開發(fā) Vue，但是也不能完全排除后期作者停止維護的可能性，目前 issue 少，報告的 bug 都修復了業(yè)內(nèi)使用情況國內(nèi)推廣情況目前不明朗，國外比國內(nèi)強，資料也比國內(nèi)多國內(nèi)推廣情況比較好，滴滴，阿里等很多團隊都在用，國外推廣情況也不錯文檔和資料提供中文文檔（翻譯質(zhì)量一般），YouTube 資料很多提供中文文檔，資料相對 Angular 少一些
目前沒法確切的評估未來一段時間這兩個框架的維護情況，但基本能確定的是，框架的生命周期不會比我們大部分業(yè)務(wù)的生命周期短。Angular 的缺點在于，除了核心之外，像 core-js，rxjs，zone.js 等生產(chǎn)環(huán)境依賴的系統(tǒng)不是 Google 的人主導的，存在潛在質(zhì)量問題的可能性，并且 Angular 目前已經(jīng)發(fā)布了 Angular4 的 rc 版本（主版本跳過了 Angular3 ），后面預(yù)計半年進行一次主版本的更新，雖然相關(guān)開發(fā)人員承諾盡可能向下兼容，但是后續(xù)對主版本的頻繁升級對項目的影響還是個未知數(shù)；Vue 由于作者是中國人，在國內(nèi)推廣的很好，口碑很不錯，作者也清理 GitHub issue 的速度也非?？欤訒鄬Ω僖恍?，后面也和阿里合作成為了 Weex 的官方框架，而 Angular 在國內(nèi)目前形勢還不是很清晰，主要原因可能在于中文資料的數(shù)量遠遠小于英文資料。從國內(nèi)的使用情況以及社區(qū)發(fā)展來看，Vue 更勝一籌。
語言
官方使用語言
Typescript，官方提供 compiler-cli 把框架代碼從 Typescript 直接編譯到 Javascript 的 AST 語法樹，屬于對 Typescript 的深度支持
ES6+語言的開發(fā)者微軟(主導開發(fā) Typescript 的是 Anders Hejlsberg，此人也是 C# 語言的項目負責人 )ECMAScript 標準委員會制定標準，各個瀏覽器廠商實現(xiàn)語言特點靜態(tài)類型，提供靜態(tài)檢查，現(xiàn)有 ES6+ 的超集，官方提供的編譯器能夠支持編譯到 ES5，ES6，貼合工程化的需要，適合團隊使用，學習成本不高動態(tài)類型，比較靈活，目前標準委員會每年更新一次標準，加入新特性，通常使用Babel 以及插件編譯到 ES5IDE/編輯器支持情況主流 IDE/編輯器支持，官方推薦 VS Code主流 IDE/編輯器都支持，語言新特性 IDE 相對文本編輯器支持的更好能否使用其他開發(fā)語言也支持 Javascript 和 Dart，并且官方提供這兩種語言的文檔也支持Typescript，但文檔相對較少
為了避免前端組件缺乏一致的管理方式，重造輪子，解決多人在快速迭代中協(xié)作開發(fā)導致的代碼逐漸混亂，Javascript 的動態(tài)類型增加了重構(gòu)難度的情況，我們希望引入靜態(tài)語言，通過類型檢查使數(shù)據(jù)更清晰，通過接口規(guī)范開發(fā)行為，這一點 Angular 通過默認引入 Typescript 比 Vue 做的更好。Typescript 雖然本身是微軟公司的產(chǎn)品，但是從編譯器效率到使用體驗均比目前的 Javascript 要強，在編寫 ES6+ 代碼時，經(jīng)常因為 Babel 插件質(zhì)量問題導致的坑，能避免很多。
工具
ng-cli 提供了包括從開發(fā)階段架設(shè)前端 server 服務(wù)，代碼生成，查閱文檔，測試，到部署過程的構(gòu)建等的一系列指令，相比 vue-cli 只提供基礎(chǔ)的項目初始化和構(gòu)建功能，ng-cli 更好用。在 debug 工具層面，Vue 做的更好，vue-devtools 整合了 Vue 的狀態(tài)管理工具 vuex，而使用 Angular 的狀態(tài)管理方案 ngrx 的時候，則需要配合 Redux DevTools Extension。
除了 ng-cli，angular2-webpack-starter 也提供了完整的 Angular + Webpack 的種子項目。我們也可以根據(jù)業(yè)務(wù)調(diào)整具體的構(gòu)建過程。
設(shè)計
從設(shè)計上看，Angular 提供了難以撼動的全面的解決方案，基本照顧到了開發(fā)流程的每個節(jié)點，他的 Form 支持，DI，測試流程，都是在開發(fā)體驗上優(yōu)于 Vue 的點，但是為了追求全面性，Angular 就無法避免的存在構(gòu)建后體積大小和整個框架侵入性太強的問題。而 Vue 作為漸進增強的框架，不在一開始就在使用場景和模式上限制用戶，而是通過官方提供的擴展，以及第三方擴展，逐漸為更復雜的需求場景提供解決方案，也給用戶提供了選擇的余地。
性能
我們截取 Vue 官方文檔上關(guān)于兩個框架性能的對比報告截圖。對比了 Angular 在去年 8 月發(fā)布的 rc 版本和同期 Vue beta 版本的不同操作的性能?？梢钥闯?，兩個框架都非常的快，Angural 和 Vue 在大多操作上性能指標均處同一個數(shù)量級，Vue 在部分指標上略勝一籌。
在內(nèi)存占用上，Vue 要優(yōu)于 Angular，但是 Angular 框架本身提供了非常多的特性，而 Vue 在開發(fā)過程中引入 vue-router，vuex，vue-class-component 逐步發(fā)展為 Vue 全家桶的過程中，會逐步增長對內(nèi)存的需求。
開發(fā)模式
從學習曲線上看，Angular 要更陡峭，Vue 要相對平緩一些。在Web Componnet，PWA 上，Angular 要比 Vue 走的更遠，更適合未來的標準，面向 Google 自己的技術(shù)棧。從能夠開發(fā)的應(yīng)用的全面性上，Angular 和 Vue 相差無幾。
彈性
在業(yè)務(wù)開發(fā)中，技術(shù)選型并不能僅僅滿足當前的業(yè)務(wù)需求的需要，而要考慮當前業(yè)務(wù)的狀態(tài)，是剛剛開始，持續(xù)發(fā)展，還是穩(wěn)定維護。考慮到業(yè)務(wù)后期可能出現(xiàn)的增長情況，這就要求我們選擇的技術(shù)具備一定的彈性，能夠隨著業(yè)務(wù)伸縮，避免后期維護成本過高，擴展困難的情況的發(fā)生。
- 這里截取了前端框架選型遷移的統(tǒng)計情況。y 軸代表遷移之前的選型，x 軸代表遷移之后的選型。表格中顏色越深，代表從選型 A 到選型 B 進行遷移的案例越多?？梢园l(fā)現(xiàn)，大家最多選型遷移的目標是 React，選擇遷移到 Angular 的案例要比選擇遷移到 Vue 的案例多，選擇遷移到 Vue 的，絕大多數(shù)是 React 用戶（相反從 Vue 遷移到 React 的用戶也有一定數(shù)量）；而從 Angular 或 Vue 遷移到其他框架的案例較少，側(cè)面證明了這兩個框架在目前業(yè)界具備足夠的彈性
業(yè)務(wù)場景
這里我們以點評點餐的內(nèi)部數(shù)據(jù)系統(tǒng)為例。我們把系統(tǒng)對不同前端使用場景的頻率和要求從0到10進行打分，分值越高的，相應(yīng)場景的需求要求就越高，反之就越低。我們發(fā)現(xiàn)，我們的需求集中在圖表繪制，組件管理和表單的提交校驗上。數(shù)量較多的組件對于我們的組件管理方式提出了較高的要求；在已有的系統(tǒng)中我們對 highcharts 和 echarts 都有依賴，但是將逐步把圖表組件遷移到 echarts 上。對于echarts，目前有vue-echarts，對于highcharts，有人做了angular2-highcharts。
開發(fā)人員
目前點餐數(shù)據(jù)系統(tǒng)日常人力 1 人，對多人協(xié)作開發(fā)要求比較低，開發(fā)效率要求比較高，單個項目規(guī)模不大，有多端多項目開發(fā)的要求，技術(shù)選型能夠適應(yīng)快速迭代是一個目標，最大程度上的減少人力瓶頸的出現(xiàn)。
結(jié)論
首先，技術(shù)上對比 Angular 和 Vue，都是值得長線投資的技術(shù)。Angular 提供大一統(tǒng)式的解決方案，從瀏覽器端，服務(wù)端，客戶端都有涉及，這種大一統(tǒng)的方案，優(yōu)點在于在幾乎任何場景，框架都提供了標準化的行為，而 Angular 通過一種侵入式較強的編程范式，規(guī)范了使用框架的所有開發(fā)者的開發(fā)行為，更工程化，更適合大型項目多人協(xié)作，同時，框架本身更擁抱標準，面向新特性，后面發(fā)展空間很大，而缺點是，這種大一統(tǒng)的方案，無法單獨由谷歌提供，谷歌除了開發(fā) Angular 的核心模塊之外，在異步處理，狀態(tài)管理，周邊工具，使用了為數(shù)不少的第三方的庫或組件，這些庫和組件的行為是否會出現(xiàn)問題，和后續(xù)發(fā)展，很難預(yù)測，潛在增加了風險，這些第三方的庫和組件，也有降低應(yīng)用性能的可能性。
Vue 的切入角度是，這個框架可以被不同程度的使用，可以單獨使用核心組件的部分，也可以加入狀態(tài)管理，也可以加入路由管理，從一部分使用 Vue 到全站使用 Vue 開發(fā)，提供了開發(fā)者更多的選項，也借鑒了不同的框架，并對其優(yōu)點單獨為 Vue 進行了增強。這種精簡和靈巧，非常適合項目初期的快速迭代，性能上，也沒有很大缺陷，隨著項目發(fā)展，性能也不會成為明顯的問題。Vue 的潛在問題在于，由于提供了開發(fā)選項，在多人協(xié)作開發(fā)的情況下，不同開發(fā)者對于 Vue 使用程度和場景的處理可能會不一樣，而隨著項目增長，以“快”為特點的技術(shù)，在工程化和代碼的管理上可能會出現(xiàn)困難，而像 Angular 提供的 DI 等功能，Vue 實現(xiàn)類似的功能就需要程序員進行手動控制，帶來了潛在的代碼管理的問題，目前雖然業(yè)界有不少使用 Vue 的場景，但是大型線上在穩(wěn)定發(fā)展期業(yè)務(wù)，幾乎是沒有的。使用 Vue 在項目規(guī)模變大后，怎么處理 Vue 在項目中的地位，怎么組織代碼，都是我們需要考慮的。
在我們的業(yè)務(wù)和人力層面，我們對數(shù)據(jù)平臺架構(gòu)的規(guī)劃是多端多層的，架構(gòu)層服務(wù)于應(yīng)用層，應(yīng)用層服務(wù)于用戶。對于用戶層，新開始的項目面臨邏輯經(jīng)常調(diào)整的可能性，也就是說對于應(yīng)用層，我們需要一個靈活，能夠適應(yīng)快速迭代的框架，而應(yīng)用層的多種設(shè)備多種環(huán)境，也要求我們對性能要有起碼的考慮，目前現(xiàn)有的組件和庫，也希望新的框架能夠做較好的兼容和提供現(xiàn)成的解決方案。這種情況下，Vue 是比較推薦的，后期隨著應(yīng)用端發(fā)展，Vue 能夠確保沒有性能瓶頸，也給了我們后期引入更多 Vue 解決方案，形成 Vue 全家桶或者撤掉 Vue，用其他方案的空間。而對于架構(gòu)層，它發(fā)展的速度未必有應(yīng)用層快，它對業(yè)務(wù)的要求是穩(wěn)定，能夠增量開發(fā)，盡量避免推倒重來影響應(yīng)用層，同時，它性能的要求明顯沒有應(yīng)用層高，這種情況，我們需要單獨區(qū)分一下，例如如果需要做應(yīng)用層的通用配置系統(tǒng)，配置應(yīng)用層的 UI 組件，那么顯然這個系統(tǒng)的組件框架要和應(yīng)用層一致，而像自助查詢平臺或其他項目，我們可以使用 Angular，為后來的技術(shù)棧做技術(shù)儲備。
新聞名稱：聊聊技術(shù)選型-Angular2vsVue2
標題網(wǎng)址：http://www.dlmjj.cn/article/ccdjoce.html
