我從Angular 2轉向Vue.js, 也沒有選擇React
譯者按: 通過使用Angular的經歷，作者已經完全轉為Vue粉了！我們Fundebug目前還是用AngularJS 1,坦白說，學習曲線蠻陡的。
為了保證可讀性，本文采用意譯而非直譯，並且對原始碼進行了大量修改。另外，本文版權歸原作者所有，翻譯僅用於學習。
在Rever, 我們剛剛釋出了使用Vue.js完全重寫的網站。經過16周緊張的開發，總共commit了641次。現在回過頭來，感慨當時對框架的選擇是正確的。
在8個月之前，我們還在用Angular 2做網站開發。更加精確地一點，我們用的是Angular 2 beta 9。坦白的說，這個產品當時是由一家外包公司開發，而我們一直對它的方方面面都不滿意。不管是UX/UI，還是架構上，甚至Angular 2本身。
在我繼續抱怨之前，我要承認Angular 2 beta 9和Angular 2.0是完全不同的產品，但這也是Angular的一個問題所在。從beta 9到2.0.0，有8個beta版本, 8個RC(release candidate)，以及2.0.0本身。也就是說，如果要更新到2.0.0，需要升級17個版本。我們也嘗試過從beta 9升級到2.0.0，但是因為太多的依賴都破壞了，導致整個更新非常的複雜。同時，我們開始反問自己選擇Angular 2是否正確，因為Angular開發團隊已經著手Angular 4了。當我們好不容易完全更新到2.0.0的那一天，又需要考慮如何更新到Angular 4了。太浪費時間，太浪費精力了！
我們曾經不喜歡，現在依然不喜歡的就是Angular 2 預設使用Typescript作為開發語言。我知道Angular 2可以直接使用JavaScript，但是在Angular 2中使用JavaScript幾乎等於重寫整個專案。我不認為Typescript為開發增加了附加值，甚至更加糟糕了。我發現我們的編碼速度反而變慢了。在JavaScript中很簡單的事情，比如定義一個物件，如果使用Typescript就會變得複雜。在你決定使用Typescript之前，我強烈建議你讀讀下面這兩篇文章。Typescript並不是每個人的最佳選擇。
我依然記得使用Angular 1是多麼的簡單。雖然它也有不少問題，但是和其它框架比起來，真的容易。Angular 2卻把Angular的優點丟棄了。對於Angular 2， 我的結論很簡單：Angular 1 和 Angular 2就是雷鋒和雷峰塔的關係。
所以，你想想我們需要在一個未經過測試的系統上更新17個版本，同時還要實現新的功能，現在的程式碼本身有著一大堆的bug，程式碼質量很差，畢竟當時的開發者幾乎都不在團隊裡面了，只有我一個同時要應對很多問題。我為了正確使用Typescript，需要到處去找正確的文件。Angular 2已經開始升級Angular 4，然而我連Angular 2都還沒升級成功。太多的負面因素快速累積起來。
因此，我們做出了決定：如果升級花費太多的時間，我們就應該考慮其它方案了。
-
React：第一個最明顯的選擇是使用React, 因為每個人都在使用它，如果沒有，那麼也在討論它。而且，它有Facebook在後臺撐腰，不擔心維護問題。但是，React本身不是框架，如果要使用，你需要新增額外的東西。
- Vue.js：Vue.js是一個新選手，我之前從未聽說過。儘管在我們調研前端框架的時候，它的版本已經更新到2.0了。Vue.js非常有吸引力，不過也覺得有點冒險。
決策流程
我們將所有的指標列了出來：
- 穩定
- 有強大的社群或則後臺支撐
- 文件完善或則StackOverflow上的問答豐富
- 容易學習
- 和Bootstrap相容
- 體積小
- 最好可以複用程式碼
- 編碼速度提升
- 反應速度(reactivity)
- 元件式的
接下來，我親自使用React和Vue.js來給出一個評估，而不是通過Google告訴我答案。在此之前，我從來沒有用過React和Vue.js。我們他們重寫了如下部分：
- 一些基本的API呼叫
- 兩個不同頁面的不同的佈局
- 和使用者互動的部分
- 登入表單和一些其它的表達
- 一個Bootstrap 模態框(modal)
僅僅使用了幾天，我已經被Vue.js驚訝到，我已經可以完成一個演示Demo給CTO和團隊其他成員。我已經很好的理解了Vue.js的基本概念，定義可擴充套件的架構。最重要的是我非常喜歡使用Vue.js的方式寫程式碼，我可以感覺到明顯比React快。
使用React比想象中難，要在Redux和MobX中做出選擇並沒有只有一個完美整合的方案好，就像Vue.js搭配的Vuex。如果對於一個框架沒有使用經驗的時候，可以讓最開始的決策變得簡單。如果你知道這個框架有官方的庫，將會更有自信。同時，我覺得Vuex的反應比Redux快，不夠也許只是個人感覺。
JSX也是一個問題，因為我們不能重用HTML，不夠Vue.js在某種程度上支援我們這麼做。 我不喜歡內聯模板(inline template), 而React將JSX/HTML和JS混合到一起。我一直堅信將不同的功能部件分開才是正確的做法，混到一起看上去太醜了。
編碼速度
使用Vue.js的編碼速度遠遠超過React，因為不需要學習JSX。而且，一個新的開發者加入團隊之後，他只需要一個小時的培訓就可以上手工作。這一點對我們非常重要。開啟一個Vue檔案，裡面包含了使用HTML和Angular 1相似的標籤。一個vue檔案還包含樣式和JavaScript部分。你只需要學習一點點Vue.js的基礎知識就可以理解它們。
文件
為了快速開發，好的文件也很重要。Vue.js的文件簡直太贊！指導、示例、問題和API文件都非常清晰。在開發中遇到的問題幾乎都可以通過文件找到答案。我們開始擔心很多問題都是中文的，結果發現所有的資料都有英文版本。
問問其他人
經過一週的考慮，我認為Vue.js非常不錯。可是周邊的人都沒有用過，無法給出中肯的建議。我得到的唯一一個意見就是“看上去很酷，不過我從來沒用過”。React最受大家關注，Angular 2其次。我開始尋找本地是否有使用Vue.js的開發者，結果真的找到了，讓我覺得不在孤單。而且我的技術圈子本來就很小，所以沒有注意到誰在生產環境使用Vue.js。
移動端
在我們考慮選擇Vue.js還是React的時候，同時有考慮到要重寫我們的移動端。React Native看上去是一個不錯的選擇。如果我們真的決定用React Native做移動端，可以複用桌面端和移動端的程式碼，對決定選擇React有很大的加分。不過，我最終決定不考慮這個情況也許不會發生的情況。從我的經驗來看，使用Node.js已經讓我可以在前端和後端重用非常多的程式碼。
版權許可
在我寫這篇部落格的時候，網上有很多關於Facebook將React的版權許可改為BSD+Patent的討論。根據Facebook的解釋，這個版權許可防止他們被專利流氓(patent troll)。雖然這不是影響我們決定的一個主要因素，但是如果你使用React，而React有相關版權問題，你也不想聽到。
換個角度，Facebook可以說是React的一個負擔，而不是助力。這也是為什麼一個獨立的基金或組織來維護開源軟體專案更好。IBM做了一個很好的示範，當他把Strongloop買下來以後，把Express.js捐給了Node.js基金會。來自社群的壓力和IBM的期待，使得軟體一直很好的維護下去。Twitter也是一個很好的例子，他們使用MIT協議發行Bootstrap，這樣再也沒有人會討論Bootstrap的版權問題。
結論
在我做出最終決定之前，我在網上調研了很久。有一張開發者對現有JavaScript狀態的調查吸引了我的注意力。我承認，作者並沒有用非常嚴謹的科學的方法去調研，但是卻給我們提供了很多非常有用的資訊。如果你想閱讀原文，請點選The State Of JavaScript: Front-End Frameworks。
| 衡量指標 | Angular 2 | React | Vue.js |
|---|---|---|---|
| 穩定 | 是 | 是 | 是 |
| 有強大的社群 | 是 | 是 | 還不夠大 |
| 後盾 | Laravel和阿里巴巴 | ||
| 文件清晰 | 是 | 是 | 是 |
| 容易上手 | 一般，Typescript難學 | 還可以 | 是 |
| 可以整合Bootstrap | 是 | 是 | 是 |
| 大小 | 566K | 139K | 58.8K |
| 易複用 | 是 | 只有CSS | 是，HTML和CSS |
| 編碼速度 | 慢 | 一般 | 快 |
| 反應速度(Reactivity) | 還可以 | 快 | 快 |
| 基於元件 | 是 | 是 | 是 |
總的來說，在我們的評估中，Vue.js勝出。在StackOverflow有很多問答，官方文件十分清晰，程式碼體積小，和Bootstrap完美整合，由Laravel和阿里巴巴支撐。雖然社群還不夠大，但是已經足夠大了。
選擇Vue.js是一個正確的選擇，雖然我花了不少時間來說服CTO。我很感激他總是提出一些有用的難問題，使我可以保證我的決定是100%正確。如果我的決定真的做錯了，將會非常後悔的。我想直到他親手寫了一個元件發現相當的容易才真的完全確信Vue.js的能力的。
我沒有說React不好，它擁有那麼大的一個社群，我感到非常震撼。它有它的好處，jQuery的社群更大，但沒有使它成為一個我們想要使用的好的框架/庫。我們想要簡單，而Vue.js擁有這一點。如果你還是不確定，可以讀一讀下面這篇文章：Comparison with Other Frameworks。
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
版權宣告
轉載時請註明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/09/20/why-we-moved-from-angular2-to-vue/