我從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並不是每個人的最佳選擇。

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

我依然記得使用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 2ReactVue.js
穩定
有強大的社區還不夠大
後盾GoogleFacebookLaravel和阿里巴巴
文檔清晰
容易上手一般,Typescript難學還可以
可以集成Bootstrap
大小566K139K58.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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章