我們為什麼以及是如何從 Angular.js 遷移到 Vue.js?

發表於2017-11-02

180514_0qDI_3703517在我寫這篇文章的時候,我們剛剛從我們的應用程式程式碼庫中刪除了最後一行AngularJS程式碼,結束了一個為期4個月的非侵入性工作,將我們的應用程式從AngularJS遷移到VueJS。在這篇文章中,我將分享我們在整個過程中的經驗。

一些背景介紹

我們的應用程式(Holistics.io)是一個基於SQL的商業智慧(BI)平臺,使用Rails、Sidekiq、PostgreSQL和AngularJS編寫。我們的Rails應用程式始於2013年底,作為一個簡單的應用程式其中使用了jQuery和AngularJS。我們使用AngularJS主要特性/功能如下:

  • 檢視模型繫結(控制器,檢視+模板引擎)
  • 依賴注入(服務,工廠,指令)
  • Angular第三方元件(uib-modal,ui-select,…)

其餘的都是內部的自定義JavaScript。

我們在 Angular 中遇到的問題

隨著我們應用的升級,我們在使用 AngularJS 的時候遇到了這樣一些問題:

  • 渲染效能:作為資料工具,由於AngularJs的特性,我們不得不花大量的時間來呈現一張巨大的資料表。
  • Angular 的文件不太好:在這成為問題之前,其他都不算什麼問題。我們越深入地使用 AngularJS,就越覺得它的文件實在難以理解。
  • 雙向資料流使得邏輯處理起來相當困難,不管是寫元件還是寫檢視控制器都是如此。這可能是AngularJS不好使用最重要的一個原因。

考慮不同的框架

在決定之前,我們仔細看看各個選項:

Angular 2

我們確實花了些時間來研究 Angular 2。對於我們來說,Angular 2 甚至比 Angular 1 還讓人難以理解。它帶來了太多新的變化(TypeScript),新的模板語法等,但我們覺得這並沒有真正解決我們的核心問題。除此之外,從 V1 到 V2 的遷移之路在那時就一直讓我們覺得困惑。

ReactJS

我們仔細審視了 ReactJS。儘管我們非常喜歡它的哲學和生態原理系統,但有一件事情讓我們吃驚:我們找不到一條清晰、乾淨、漸進的遷移路徑,來阻止我們在3-4個月內支援新功能。

AngularJS 的使用基於 HTML 的模板系統,而 ReactJS 是用的 JSX。我們不能找到辦法在遷移的過程中讓兩種技術很好的並存。

還有一個次要的主觀原因,我發現 JSX 比基於 HTML 的模板更加冗長。

EmberJS

EmberJS 不是一個 JS 庫,而是一個 Web 應用框架,我們必須用基於 EmberJS 重寫所有東西。

我們為什麼選擇了 VueJS:逐步遷移

綜合考慮各方面因素,我們最終選擇了 VueJS,但對於我們來說,最重要的決定性因素是:我們看到了一個清晰、可逐步遷移到 VueJS,而又不會破壞發展路徑的遷移路徑。實際上,我敢打賭,在整個遷移期間,我們的客戶都沒有注意到什麼明顯的變化,他們不會知道自己訪問的頁面中,哪些是 Angular 實現的,哪些是 VueJS 實現的。

Vue 採用了與 ReactJS 相似的技術,基於元件,屬性下行事件上行等。它與 AngularJS 在模板引擎方面有著驚人的相似。它就像 AngularJS 和 ReactJS 的優美結合。這讓我們覺得完美,因為我們有大量的 AngularJS 模板,而我們的主要問題是 Angular 元件帶來的複雜邏輯。

實際上多數時候我們需要做的只是將程式碼中的 ng- 改為 v-,簡直太美妙了!

隨著深入,我們越發覺得作出了正確的選擇,它解決了我們早期遇到的問題:很好的效能,單檔案元件,清晰的程式碼結構,槽,等等。

而且,在遷移的過程中,由於 Vue 結構的方式(單向資料流,基於元件),它迫使我們反思和重構程式碼,而不是繼續寫爛程式碼,這簡化了我們的程式碼邏輯。

我還想說的最後一點,我發現 VueJS 的文件寫得非常好,結構也非常清晰。這也是我們選擇 VueJS 的另一個主要原因。我第一次使用 Vue 的時候,花了 30 分鐘來閱讀它的文件,立即覺得必須要試試這個東西。

我們是怎麼進行逐步遷移的:

下面是我們遷移的簡單步驟(注意有些內容與我們執行的 Rails 應用環境有關,如果你沒有使用 Rails,可能會有些不同):

1. 把 AngularJS 控制器邏輯轉換到 VueJS

在逐步遷移策略中,我們要在引入 VueJS 時儘可能少做改動。因此,我們從標準的 AngularJS 和模板檔案開始修改,將 VueJS 引入其中:


我們在應用中引入了 Vue 的邏輯,卻不需要改變任何相關應用的前端結構。這極大程度的幫助我們降低在遷移過程中發生錯誤的風險,我們可以花 1-2 個小時迅速地將一小部分 AngularJS 實現的東西轉換為 VueJS 實現,然後測試並部署,不用擔心它會導致迴歸缺陷

2. 把 AngularJS 服務轉換為 ES6 模組

我們首先需要找到一個 AngularJS 中大量使用的 $http 服務的替代品。我們直接使用了 axios。我們不再直接使用 $http,但我們圍繞它進行了抽象封裝,以使修改變得非常簡單。

然後,我們像這樣定義了大量的 AngularJS:

使用 ES6 類語法代替就好:

如果其它控制器中使用有 Angular 程式碼在使用這些服務,我們會複製這些服務並使用 ES6 類語法來實現,同時保持原有的 Angular 版本,直到不再有 Angular 程式碼使用它們為止。這會在短時間內讓程式碼出現重複,但我們只需要小心一點,在程式碼中多寫些註釋來關聯兩個版本。

3. 使用 VueJS 元件代替 AngularJS 控制器

完成上述兩點之後,一些 AngularJS 控制器可以完全遷移到 VueJS,這和上面的第 2 步相似,我們使用 ES6 語法來代替 app.controller() 定義。不過這次,我們使用 Vue 的單檔案元件:

檔案:user_edit.vue

4. 為 Rails 控制器/檢視新增安裝入口

預設情況下,每個 Rails 頁面載入的時候會渲染檢視。在上面的 Vue 單檔案元件中,我們將 Raisl 檢視,users/edit.html.erb 檔案,改為:

然後加些程式碼在頁面載入的時候將其安裝為正確的 Vue 元件:

實際上,上面的程式碼被抽象成了可複用的函式,在不同的頁面中呼叫。

總結

我們在 2017 年九月末完成了框架的遷移,經歷了大約 4 個月時間的非侵入性(我們在遷移過程中會繼續新增其它新特性)工作。實際上我們並沒有把遷移作為最緊急的任務,不管什麼時候,只要我們的改動涉及到舊的 Angular 程式碼,我們會先把它轉換成 Vue 實現,然後再進行變更

遷移完成後,我們收穫了:

  • 非常整潔的程式碼和模組(基於元件的),以及 VueX 和 Vue Store;它們大大提高了程式設計效率
  • 再沒有複雜的邏輯
  • 改善了 UI 效能

這並不是說 Vue 就是最好的,它只是在我們特定的情況下工作良好:Angular 固有的設計本質導致使用 Angular 實現應用很重,而 Vue 為我們很好地填補了這一空白,這一切都是自然而然地逐步遷移實現的。

你怎麼想?請在下面的評論中與我們分享。希望瞭解更多你們遇到的情況!

相關文章