我從Angular 2轉(zhuǎn)向Vue.js, 也沒有選擇React

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

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

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯罢防，并且對源代碼進行了大量修改艘虎。另外，本文版權(quán)歸原作者所有咒吐，翻譯僅用于學習野建。

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

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

在我繼續(xù)抱怨之前秫舌，我要承認Angular 2 beta 9和Angular 2.0是完全不同的產(chǎn)品，但這也是Angular的一個問題所在绣檬。從beta 9到2.0.0足陨，有8個beta版本, 8個RC(release candidate)，以及2.0.0本身娇未。也就是說钠右，如果要更新到2.0.0，需要升級17個版本忘蟹。我們也嘗試過從beta 9升級到2.0.0飒房，但是因為太多的依賴都破壞了，導(dǎo)致整個更新非常的復(fù)雜媚值。同時狠毯，我們開始反問自己選擇Angular 2是否正確，因為Angular開發(fā)團隊已經(jīng)著手Angular 4了褥芒。當我們好不容易完全更新到2.0.0的那一天嚼松，又需要考慮如何更新到Angular 4了。太浪費時間锰扶，太浪費精力了献酗！

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

The Shocking Secret About Static Types

Angular 2 vs React: The Ultimate Dance Off

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

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

因此政鼠，我們做出了決定：如果升級花費太多的時間，我們就應(yīng)該考慮其它方案了队魏。

React：第一個最明顯的選擇是使用React, 因為每個人都在使用它公般，如果沒有，那么也在討論它胡桨。而且官帘，它有Facebook在后臺撐腰，不擔心維護問題昧谊。但是刽虹，React本身不是框架，如果要使用呢诬，你需要添加額外的東西状婶。

Vue.js：Vue.js是一個新選手意敛，我之前從未聽說過。盡管在我們調(diào)研前端框架的時候膛虫，它的版本已經(jīng)更新到2.0了草姻。Vue.js非常有吸引力，不過也覺得有點冒險稍刀。

決策流程

我們將所有的指標列了出來：

穩(wěn)定

有強大的社區(qū)或則后臺支撐

文檔完善或則StackOverflow上的問答豐富

容易學習

和Bootstrap兼容

體積小

最好可以復(fù)用代碼

編碼速度提升

反應(yīng)速度(reactivity)

組件式的

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

一些基本的API調(diào)用

兩個不同頁面的不同的布局

和用戶交互的部分

登錄表單和一些其它的表達

一個Bootstrap 模態(tài)框(modal)

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

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

JSX也是一個問題，因為我們不能重用HTML茵休，不夠Vue.js在某種程度上支持我們這么做薪棒。我不喜歡內(nèi)聯(lián)模板(inline template), 而React將JSX/HTML和JS混合到一起。我一直堅信將不同的功能部件分開才是正確的做法榕莺，混到一起看上去太丑了俐芯。

編碼速度

使用Vue.js的編碼速度遠遠超過React，因為不需要學習JSX钉鸯。而且吧史，一個新的開發(fā)者加入團隊之后，他只需要一個小時的培訓(xùn)就可以上手工作唠雕。這一點對我們非常重要贸营。打開一個Vue文件吨述，里面包含了使用HTML和Angular 1相似的標簽。一個vue文件還包含樣式和JavaScript部分钞脂。你只需要學習一點點Vue.js的基礎(chǔ)知識就可以理解它們揣云。

文檔

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

問問其他人

經(jīng)過一周的考慮，我認為Vue.js非常不錯狼钮√贾可是周邊的人都沒有用過，無法給出中肯的建議燃领。我得到的唯一一個意見就是“看上去很酷士聪，不過我從來沒用過”锦援。React最受大家關(guān)注猛蔽，Angular 2其次。我開始尋找本地是否有使用Vue.js的開發(fā)者灵寺，結(jié)果真的找到了曼库，讓我覺得不在孤單。而且我的技術(shù)圈子本來就很小略板，所以沒有注意到誰在生產(chǎn)環(huán)境使用Vue.js毁枯。

移動端

在我們考慮選擇Vue.js還是React的時候，同時有考慮到要重寫我們的移動端叮称。React Native看上去是一個不錯的選擇种玛。如果我們真的決定用React Native做移動端，可以復(fù)用桌面端和移動端的代碼瓤檐，對決定選擇React有很大的加分赂韵。不過，我最終決定不考慮這個情況也許不會發(fā)生的情況挠蛉。從我的經(jīng)驗來看祭示，使用Node.js已經(jīng)讓我可以在前端和后端重用非常多的代碼。

版權(quán)許可

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

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

結(jié)論

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

衡量指標 Angular 2 React Vue.js

穩(wěn)定是是是

有強大的社區(qū) 是是還不夠大

后盾 Google Facebook Laravel和阿里巴巴

文檔清晰是是是

容易上手一般旬陡，Typescript難學還可以是

可以集成Bootstrap 是是是

大小 566K 139K 58.8K

易復(fù)用是只有CSS 是拓颓，HTML和CSS

編碼速度慢一般快

反應(yīng)速度(Reactivity) 還可以快快

基于組件是是是

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

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

我沒有說React不好汽畴，它擁有那么大的一個社區(qū)旧巾，我感到非常震撼。它有它的好處忍些，jQuery的社區(qū)更大鲁猩，但沒有使它成為一個我們想要使用的好的框架/庫。我們想要簡單罢坝，而Vue.js擁有這一點廓握。如果你還是不確定，可以讀一讀下面這篇文章：Comparison with Other Frameworks嘁酿。

版權(quán)聲明:

轉(zhuǎn)載時請注明作者Fundebug以及本文地址：

https://blog.fundebug.com/2017/09/20/why-we-moved-from-angular2-to-vue/

您的用戶遇到BUG了嗎隙券？

體驗Demo 免費使用

Like Issue Page

Error: Comments Not Initialized

Write ?Preview

Styling with Markdown is supported Comment

關(guān)于Fundebug

Fundebug是全棧JavaScript實時錯誤監(jiān)控平臺，能夠及時發(fā)現(xiàn)您的應(yīng)用錯誤闹司，助您提升用戶體驗娱仔。

累計處理錯誤: 60269707

標簽

客戶故事 JavaScript 新聞小程序 BUG Source Map Node.js Docker 翻譯 Linux ES6 媒體報道產(chǎn)品 Hexo 函數(shù)式人工智能隨筆用戶行為教程其他

我從Angular 2轉(zhuǎn)向Vue.js, 也沒有選擇React

推薦閱讀更多精彩內(nèi)容