我從Angular2轉(zhuǎn)向Vue.js,也沒有選擇React-創(chuàng)新互聯(lián)

譯者按: 通過使用Angular的經(jīng)歷，作者已經(jīng)完全轉(zhuǎn)為Vue粉了！我們Fundebug目前還是用AngularJS 1,坦白說，學(xué)習(xí)曲線蠻陡的。

公司主營業(yè)務(wù)：做網(wǎng)站、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出蔡家坡免費(fèi)做網(wǎng)站回饋大家。

• 原文: Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)
• 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯，并且對源代碼進(jìn)行了大量修改。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

在Rever, 我們剛剛發(fā)布了使用Vue.js完全重寫的網(wǎng)站。經(jīng)過16周緊張的開發(fā)，總共commit了641次?，F(xiàn)在回過頭來，感慨當(dāng)時(shí)對框架的選擇是正確的。

在8個(gè)月之前，我們還在用Angular 2做網(wǎng)站開發(fā)。更加精確地一點(diǎn)，我們用的是Angular 2 beta 9。坦白的說，這個(gè)產(chǎn)品當(dāng)時(shí)是由一家外包公司開發(fā)，而我們一直對它的方方面面都不滿意。不管是UX/UI，還是架構(gòu)上，甚至Angular 2本身。

在我繼續(xù)抱怨之前，我要承認(rèn)Angular 2 beta 9和Angular 2.0是完全不同的產(chǎn)品，但這也是Angular的一個(gè)問題所在。從beta 9到2.0.0，有8個(gè)beta版本, 8個(gè)RC(release candidate)，以及2.0.0本身。也就是說，如果要更新到2.0.0，需要升級(jí)17個(gè)版本。我們也嘗試過從beta 9升級(jí)到2.0.0，但是因?yàn)樘嗟囊蕾嚩计茐牧?，?dǎo)致整個(gè)更新非常的復(fù)雜。同時(shí)，我們開始反問自己選擇Angular 2是否正確，因?yàn)锳ngular開發(fā)團(tuán)隊(duì)已經(jīng)著手Angular 4了。當(dāng)我們好不容易完全更新到2.0.0的那一天，又需要考慮如何更新到Angular 4了。太浪費(fèi)時(shí)間，太浪費(fèi)精力了！

我們曾經(jīng)不喜歡，現(xiàn)在依然不喜歡的就是Angular 2 默認(rèn)使用Typescript作為開發(fā)語言。我知道Angular 2可以直接使用JavaScript，但是在Angular 2中使用JavaScript幾乎等于重寫整個(gè)項(xiàng)目。我不認(rèn)為Typescript為開發(fā)增加了附加值，甚至更加糟糕了。我發(fā)現(xiàn)我們的編碼速度反而變慢了。在JavaScript中很簡單的事情，比如定義一個(gè)對象，如果使用Typescript就會(huì)變得復(fù)雜。在你決定使用Typescript之前，我強(qiáng)烈建議你讀讀下面這兩篇文章。Typescript并不是每個(gè)人的最佳選擇。

1. The Shocking Secret About Static Types
2. Angular 2 vs React: The Ultimate Dance Off

我依然記得使用Angular 1是多么的簡單。雖然它也有不少問題，但是和其它框架比起來，真的容易。Angular 2卻把Angular的優(yōu)點(diǎn)丟棄了。對于Angular 2， 我的結(jié)論很簡單：Angular 1 和 Angular 2就是雷鋒和雷峰塔的關(guān)系。

所以，你想想我們需要在一個(gè)未經(jīng)過測試的系統(tǒng)上更新17個(gè)版本，同時(shí)還要實(shí)現(xiàn)新的功能，現(xiàn)在的代碼本身有著一大堆的bug，代碼質(zhì)量很差，畢竟當(dāng)時(shí)的開發(fā)者幾乎都不在團(tuán)隊(duì)里面了，只有我一個(gè)同時(shí)要應(yīng)對很多問題。我為了正確使用Typescript，需要到處去找正確的文檔。Angular 2已經(jīng)開始升級(jí)Angular 4，然而我連Angular 2都還沒升級(jí)成功。太多的負(fù)面因素快速累積起來。

因此，我們做出了決定：如果升級(jí)花費(fèi)太多的時(shí)間，我們就應(yīng)該考慮其它方案了。

• React：第一個(gè)最明顯的選擇是使用React, 因?yàn)槊總€(gè)人都在使用它，如果沒有，那么也在討論它。而且，它有Facebook在后臺(tái)撐腰，不擔(dān)心維護(hù)問題。但是，React本身不是框架，如果要使用，你需要添加額外的東西。

• Vue.js：Vue.js是一個(gè)新選手，我之前從未聽說過。盡管在我們調(diào)研前端框架的時(shí)候，它的版本已經(jīng)更新到2.0了。Vue.js非常有吸引力，不過也覺得有點(diǎn)冒險(xiǎn)。

決策流程

我們將所有的指標(biāo)列了出來：

• 穩(wěn)定
• 有強(qiáng)大的社區(qū)或則后臺(tái)支撐
• 文檔完善或則StackOverflow上的問答豐富
• 容易學(xué)習(xí)
• 和Bootstrap兼容
• 體積小
• 最好可以復(fù)用代碼
• 編碼速度提升
• 反應(yīng)速度(reactivity)
• 組件式的

接下來，我親自使用React和Vue.js來給出一個(gè)評估，而不是通過Google告訴我答案。在此之前，我從來沒有用過React和Vue.js。我們他們重寫了如下部分：

• 一些基本的API調(diào)用
• 兩個(gè)不同頁面的不同的布局
• 和用戶交互的部分
• 登錄表單和一些其它的表達(dá)
• 一個(gè)Bootstrap 模態(tài)框(modal)

僅僅使用了幾天，我已經(jīng)被Vue.js驚訝到，我已經(jīng)可以完成一個(gè)演示Demo給CTO和團(tuán)隊(duì)其他成員。我已經(jīng)很好的理解了Vue.js的基本概念，定義可擴(kuò)展的架構(gòu)。最重要的是我非常喜歡使用Vue.js的方式寫代碼，我可以感覺到明顯比React快。

使用React比想象中難，要在Redux和MobX中做出選擇并沒有只有一個(gè)完美整合的方案好，就像Vue.js搭配的Vuex。如果對于一個(gè)框架沒有使用經(jīng)驗(yàn)的時(shí)候，可以讓最開始的決策變得簡單。如果你知道這個(gè)框架有官方的庫，將會(huì)更有自信。同時(shí)，我覺得Vuex的反應(yīng)比Redux快，不夠也許只是個(gè)人感覺。

JSX也是一個(gè)問題，因?yàn)槲覀儾荒苤赜肏TML，不夠Vue.js在某種程度上支持我們這么做。 我不喜歡內(nèi)聯(lián)模板(inline template), 而React將JSX/HTML和JS混合到一起。我一直堅(jiān)信將不同的功能部件分開才是正確的做法，混到一起看上去太丑了。

編碼速度

使用Vue.js的編碼速度遠(yuǎn)遠(yuǎn)超過React，因?yàn)椴恍枰獙W(xué)習(xí)JSX。而且，一個(gè)新的開發(fā)者加入團(tuán)隊(duì)之后，他只需要一個(gè)小時(shí)的培訓(xùn)就可以上手工作。這一點(diǎn)對我們非常重要。打開一個(gè)Vue文件，里面包含了使用HTML和Angular 1相似的標(biāo)簽。一個(gè)vue文件還包含樣式和JavaScript部分。你只需要學(xué)習(xí)一點(diǎn)點(diǎn)Vue.js的基礎(chǔ)知識(shí)就可以理解它們。

文檔

為了快速開發(fā)，好的文檔也很重要。Vue.js的文檔簡直太贊！指導(dǎo)、示例、問題和API文檔都非常清晰。在開發(fā)中遇到的問題幾乎都可以通過文檔找到答案。我們開始擔(dān)心很多問題都是中文的，結(jié)果發(fā)現(xiàn)所有的資料都有英文版本。

問問其他人

經(jīng)過一周的考慮，我認(rèn)為Vue.js非常不錯(cuò)?？墒侵苓叺娜硕紱]有用過，無法給出中肯的建議。我得到的唯一一個(gè)意見就是“看上去很酷，不過我從來沒用過”。React最受大家關(guān)注，Angular 2其次。我開始尋找本地是否有使用Vue.js的開發(fā)者，結(jié)果真的找到了，讓我覺得不在孤單。而且我的技術(shù)圈子本來就很小，所以沒有注意到誰在生產(chǎn)環(huán)境使用Vue.js。

移動(dòng)端

在我們考慮選擇Vue.js還是React的時(shí)候，同時(shí)有考慮到要重寫我們的移動(dòng)端。React Native看上去是一個(gè)不錯(cuò)的選擇。如果我們真的決定用React Native做移動(dòng)端，可以復(fù)用桌面端和移動(dòng)端的代碼，對決定選擇React有很大的加分。不過，我最終決定不考慮這個(gè)情況也許不會(huì)發(fā)生的情況。從我的經(jīng)驗(yàn)來看，使用Node.js已經(jīng)讓我可以在前端和后端重用非常多的代碼。

版權(quán)許可

在我寫這篇博客的時(shí)候，網(wǎng)上有很多關(guān)于Facebook將React的版權(quán)許可改為BSD+Patent的討論。根據(jù)Facebook的解釋，這個(gè)版權(quán)許可防止他們被專利流氓(patent troll)。雖然這不是影響我們決定的一個(gè)主要因素，但是如果你使用React，而React有相關(guān)版權(quán)問題，你也不想聽到。

換個(gè)角度，F(xiàn)acebook可以說是React的一個(gè)負(fù)擔(dān)，而不是助力。這也是為什么一個(gè)獨(dú)立的基金或組織來維護(hù)開源軟件項(xiàng)目更好。IBM做了一個(gè)很好的示范，當(dāng)他把Strongloop買下來以后，把Express.js捐給了Node.js基金會(huì)。來自社區(qū)的壓力和IBM的期待，使得軟件一直很好的維護(hù)下去。Twitter也是一個(gè)很好的例子，他們使用MIT協(xié)議發(fā)行Bootstrap，這樣再也沒有人會(huì)討論Bootstrap的版權(quán)問題。

結(jié)論

在我做出最終決定之前，我在網(wǎng)上調(diào)研了很久。有一張開發(fā)者對現(xiàn)有JavaScript狀態(tài)的調(diào)查吸引了我的注意力。我承認(rèn)，作者并沒有用非常嚴(yán)謹(jǐn)?shù)目茖W(xué)的方法去調(diào)研，但是卻給我們提供了很多非常有用的信息。如果你想閱讀原文，請點(diǎn)擊The State Of JavaScript: Front-End Frameworks。

衡量指標(biāo)	Angular 2	React	Vue.js
穩(wěn)定	是	是	是
有強(qiáng)大的社區(qū)	是	是	還不夠大
后盾	Google	Facebook	Laravel和阿里巴巴
文檔清晰	是	是	是
容易上手	一般，Typescript難學(xué)	還可以	是
可以集成Bootstrap	是	是	是
大小	566K	139K	58.8K
易復(fù)用	是	只有CSS	是，HTML和CSS
編碼速度	慢	一般	快
反應(yīng)速度(Reactivity)	還可以	快	快
基于組件	是	是	是

總的來說，在我們的評估中，Vue.js勝出。在StackOverflow有很多問答，官方文檔十分清晰，代碼體積小，和Bootstrap完美集成，由Laravel和阿里巴巴支撐。雖然社區(qū)還不夠大，但是已經(jīng)足夠大了。

選擇Vue.js是一個(gè)正確的選擇，雖然我花了不少時(shí)間來說服CTO。我很感激他總是提出一些有用的難問題，使我可以保證我的決定是100%正確。如果我的決定真的做錯(cuò)了，將會(huì)非常后悔的。我想直到他親手寫了一個(gè)組件發(fā)現(xiàn)相當(dāng)?shù)娜菀撞耪娴耐耆_信Vue.js的能力的。

我沒有說React不好，它擁有那么大的一個(gè)社區(qū)，我感到非常震撼。它有它的好處，jQuery的社區(qū)更大，但沒有使它成為一個(gè)我們想要使用的好的框架/庫。我們想要簡單，而Vue.js擁有這一點(diǎn)。如果你還是不確定，可以讀一讀下面這篇文章：Comparison with Other Frameworks。

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了9億+錯(cuò)誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/09/20/why-we-moved-from-angular2-to-vue/

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：我從Angular2轉(zhuǎn)向Vue.js,也沒有選擇React-創(chuàng)新互聯(lián)
地址分享：http://www.muchs.cn/article42/diejhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、小程序開發(fā)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)