我從Angular 2轉向Vue.js, 也沒有選擇React

時間 2020-07-07

標籤 angular 轉向 vue.js vue 沒有選擇 react 欄目 AngularJS 简体版

原文原文鏈接

譯者按: 經過使用Angular的經歷，做者已經徹底轉爲Vue粉了！咱們Fundebug目前仍是用AngularJS 1,坦白說，學習曲線蠻陡的。javascript

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

爲了保證可讀性，本文采用意譯而非直譯，而且對源代碼進行了大量修改。另外，本文版權歸原做者全部，翻譯僅用於學習。html

在Rever, 咱們剛剛發佈了使用Vue.js徹底重寫的網站。通過16周緊張的開發，總共commit了641次。如今回過頭來，感慨當時對框架的選擇是正確的。前端

在8個月以前，咱們還在用Angular 2作網站開發。更加精確地一點，咱們用的是Angular 2 beta 9。坦白的說，這個產品當時是由一家外包公司開發，而咱們一直對它的方方面面都不滿意。無論是UX/UI，仍是架構上，甚至Angular 2自己。vue

在我繼續抱怨以前，我要認可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了。太浪費時間，太浪費精力了！java

咱們曾經不喜歡，如今依然不喜歡的就是Angular 2 默認使用Typescript做爲開發語言。我知道Angular 2能夠直接使用JavaScript，可是在Angular 2中使用JavaScript幾乎等於重寫整個項目。我不認爲Typescript爲開發增長了附加值，甚至更加糟糕了。我發現咱們的編碼速度反而變慢了。在JavaScript中很簡單的事情，好比定義一個對象，若是使用Typescript就會變得複雜。在你決定使用Typescript以前，我強烈建議你讀讀下面這兩篇文章。Typescript並非每一個人的最佳選擇。react

我依然記得使用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
穩定	是	是	是
有強大的社區	是	是	還不夠大
後盾	Google	Facebook	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、金山軟件、百姓網等衆多知名用戶的承認。歡迎免費試用！