為什麼你應該考慮從AngularJS遷移到Vue
今年，React，Angular和Vue的受歡迎程度和使用率都沒有放緩。我們看到在前端和後端JavaScript社群中持續不斷地採用和使用這些框架和庫。
由於AngularJS面臨著不確定的未來，許多團隊正在尋找當前熱門話題的答案：如果您使用的是AngularJS，您是繼續維護AngularJS應用程式還是將應用程式遷移到另一個框架？這不是一個容易（或便宜）的問題。
在本文中，我們將介紹您應該考慮遷移AngularJS應用程式的一些原因，以及有關如何規劃和預算成功遷移的一些想法。
AngularJS vs Angular - Angular 1.x和Angular 2.x背後的歷史
“等等，AngularJS和Angular不一樣嗎？”
好吧，不完全是......
AngularJS是一個前端JavaScript框架，最初由Google於2010年釋出.AngularJS可能是Web開發中最受歡迎的前端JavaScript框架。
與Apache Cordova等技術相結合，即使在移動應用程式開發中，AngularJS也是一股巨大的力量。在其早期生命週期中，AngularJS通俗地稱為社群，簡稱為“Angular”，這使得許多人在今天感到困惑。
2016年，Google釋出了一個名為Angular 2的全新框架。
當Angular 2處於開發階段時，人們通過呼叫第一個Angular 1.X和第二個Angular 2來區分兩個框架AngularJS和Angular。
隨著Angular團隊轉向語義版本控制方案（當前主要版本的Angular在本帖時為6.X），突然之間，稱Angular v6.0為“Angular 2”也令人困惑。
為了減少混淆，Angular團隊發起了“ofollow,noindex" target="_blank">It's Just Angular ”活動，幫助建立有關如何引用不同框架的指南。原始的Angular框架應該被稱為AngularJS，新的Angular框架應該簡稱為Angular。
確定應用程式是Angular還是AngularJS的好方法是檢視應用程式的建立日期。聲稱使用“Angular”且在2016年或之前構建的應用程式可能使用AngularJS（流行版本包括1.2,1.5,1.6和1.7）。
夕陽AngularJS
AngularJS團隊最近宣佈 ，從2018年6月1日開始，AngularJS將進入為期3年的“長期支援”階段。
截至7月1日，AngularJS團隊已承諾僅釋出新補丁以解決以下問題：
在2021年7月，任何繼續使用AngularJS的應用程式都容易受到上述任何問題的影響以及該框架的任何其他問題。
為什麼要立即遷移？
現在開始遷移AngularJS應用程式有幾個原因：
- 隨著截止日期的臨近，遷移成本會隨著時間的推移而增加
- 安全性和相容性問題現在是您的問題
- 使用AngularJS經驗難以找到新員工
- 人才流失與現有員工
- 硬技術限制
框架遷移可能很困難，成本高昂，需要進行大量的規劃和協調。等到最後一刻或者直到出現重大問題才開始規劃遷移會增加影響客戶的問題的額外風險。
由於可能需要支付加急的諮詢服務，等待也會大大增加遷移成本。
安全性或相容性問題？如果在長期支援階段結束後在AngularJS中發現安全性或相容性問題，則可能會使客戶面臨資料被盜或主要產品中斷的影響，直到應用程式可以重新平臺化為止。
隨著框架中的專業知識變得越來越少，僱用AngularJS開發人員來支援您的應用程式變得越來越昂貴。
進入勞動力市場的新開發人員主要使用Angular，Vue和React等框架而不是AngularJS。
組織內的AngularJS開發人員希望在就業市場中保持最新且相關。在內部，您當前的員工希望使用主導市場和對話的新框架。遷移現在可以降低人才流失的風險，因為您的開發人員可能會開始尋找機會離開並加入具有更新技術堆疊的公司。
最後，較新的框架具有AngularJS無法（輕鬆）支援的功能。較新的框架，如Angular，Vue和React，都是建立在AngularJS時代的經驗教訓之上的。這些新技術往往更快，更符合人體工程學，併為現代工具（如webpack）提供更好的支援。
現代框架的功能可幫助您的開發人員更快，更高效地交付新功能，同時使他們能夠有效地利用新的Web API。現代化的開發方法有助於改善客戶體驗，促進更多線上互動，並有助於在成功遷移後增加收入。
從AngularJS遷移的需求不再是“if”的問題，而是“when”的問題。因此，現在開始規劃遷移是有意義的，因此您的團隊可以更快地利用新的這些框架的特點。
我們應該使用哪種框架？
今天使用的三個最大和最流行的前端JavaScript框架是Angular，Vue和React。
每個框架都有自己的大量：
- 開發人員工具和文件
- 跨小型，中型和企業級應用程式的廣泛採用
- 廣泛的第三方庫支援
- 可比功能集
在選擇從AngularJS遷移到哪個框架時，沒有明確的正確答案。
然而，根據我們在This Dot Labs 幫助客戶遷移AngularJS應用程式的經驗，Vue平均為AngularJS開發團隊提供了最自然的選擇。
這有很多原因，但最突出的原因是：
- 模板語法 - Vue的模板語法與AngularJS的模板語法非常匹配，使AngularJS開發人員對新框架感到非常舒服。
- 反應模型 - Vue的反應模型與AngularJS非常相似，它允許AngularJS開發人員比比較框架和庫更快地採用Vue的心理模型。
- 沒有額外的JavaScript語法或其他庫 - Vue不依賴於許多額外的JavaScript語法或其他需要向開發人員講授的庫，這有助於快速提升。
我們發現AngularJS開發人員進入完全Vue開發通常可以比其他流行框架更節省培訓時間，Vue還為AngularJS專案提供了非常明確的增量遷移策略。Vue和AngularJS可以很好地相互並排，而功能一次只能移植一個。AngularJS控制器和模板可以以系統和可重複的方式轉換或轉換為Vue元件。
無論您使用的是最新版本的AngularJS（1.5,1.6或1.7）還是舊版本支援的版本（例如1.2），都無關緊要; 從AngularJS升級到Vue的路徑通常是一個簡單的機械過程。
從AngularJS成功遷移到Vue
每次成功的遷移工作的關鍵是制定可靠的計劃。目標應該是在以下情況下執行遷移：
- 最大限度地減少功能迴歸
- 避免平臺停機
- 繼續為客戶提供新功能
設定遷移應用程式
要完成此任務，您應該設定AngularJS應用程式，以便它可以同時呈現AngularJS和Vue元件。這將允許您在Vue中構建新功能，並通過AngularJS的現有功能移植埠，因為您有時間，預算和資源。
如何開始Vue和AngularJS整合
在AngularJS中託管Vue元件可以非常簡單。
您需要做的就是包含一個指向Vue框架的指令碼標記。然後，建立指向應用程式中特定DOM節點的Vue例項。
可以將Vue設定為在文件的並行分支中與現有AngularJS應用程式一起執行，或者Vue元件可以包含在現有AngularJS元件中並由Vue完全控制。您甚至可以在層之間傳遞一些資料和事件。
將AngularJS元件轉換為Vue元件
下一步是開始將現有的AngularJS元件轉換為Vue元件。這意味著將AngularJS控制器轉換為Vue例項。
然後，任何AngularJS生命週期方法都直接轉換為等效的Vue元件生命週期方法。
最後，將AngularJS模板複製到Vue元件中，並將AngularJS模板語法替換為等效的Vue模板語法（例如：用v-if替換ng-if，用v-for替換ng-repeat等）
AngularJS到Vue遷移程式碼示例
在這個例子中，我們從Todo MVC 的AngularJS實現中獲取以下（略微改變的）模板片段並將其轉換為Vue模板。
<section <b>class</b>=<font>"main"</font><font> ng-show=</font><font>"todos.length"</font><font> ng-cloak>
<ul <b>class</b>=</font><font>"todo-list"</font><font>>
<li ng-repeat=</font><font>"todo in todos | filter:statusFilter track by $index"</font><font>
ng-<b>class</b>=</font><font>"{completed: todo.completed,
editing: todo == editedTodo}</font><font>">
<input <b>class</b>=</font><font>"toggle"</font><font>
type=</font><font>"checkbox"</font><font>
ng-model=</font><font>"todo.completed"</font><font>
ng-change=</font><font>"toggleCompleted(todo)"</font><font>>
<label ng-dblclick=</font><font>"editTodo(todo)"</font><font>>{{todo.title}}</label>
<button <b>class</b>=</font><font>"destroy"</font><font> ng-click=</font><font>"removeTodo(todo)"</font><font>></button>
<input <b>class</b>=</font><font>"edit"</font><font>
ng-trim=</font><font>"true"</font><font>
ng-model=</font><font>"todo.title"</font><font>
ng-blur=</font><font>"saveEdits(todo, 'blur')"</font><font>>
</font>
下面是AngularJS實現到Vue模板的簡單轉換：
<section <b>class</b>=<font>"main"</font><font> v-show=</font><font>"todos.length"</font><font> v-cloak>
<ul <b>class</b>=</font><font>"todo-list"</font><font>>
<li v-<b>for</b>=</font><font>"todo in filteredComputedTodos"</font><font>
v-bind:<b>class</b>=</font><font>"{completed: todo.completed,
editing: todo == editedTodo}</font><font>">
<input <b>class</b>=</font><font>"toggle"</font><font>
type=</font><font>"checkbox"</font><font>
v-model=</font><font>"todo.completed"</font><font>
v-on:change=</font><font>"toggleCompleted(todo)"</font><font>>
<label v-on:dblclick=</font><font>"editTodo(todo)"</font><font>>{{todo.title}}</label>
<button <b>class</b>=</font><font>"destroy"</font><font> v-on:click=</font><font>"removeTodo(todo)"</font><font>></button>
<input <b>class</b>=</font><font>"edit"</font><font>
v-model.trim=</font><font>"todo.title"</font><font>
v-on:blur=</font><font>"saveEdits(todo, 'blur')"</font><font>>
</font>
遷移AngularJS服務
遷移的一大優點是任何AngularJS服務都可以簡單地轉換為ES6 +模組。Vue中沒有必要像AngularJS那樣註冊服務。
使用ES6模組和import語句將幫助像Webpack這樣的捆綁器通過智慧跟蹤模組之間的依賴關係並優化捆綁在一起並在執行時交付的程式碼來最小化程式碼的佔用空間。
如果您仍然想要為這些服務利用AngularJS依賴注入系統，您可以將現在轉換的服務包裝在更薄的AngularJS服務物件中，就像包裝第三方庫（ 如lodash）一樣。
結論
隨著對AngularJS的支援將在未來三年內結束，遷移到更新的框架將幫助您和您的團隊避免可能因缺乏直接支援而導致的問題，並讓您的開發團隊再次對開發感到興奮。
您將能夠更輕鬆地吸引人才，並提高應用程式和開發人員的速度和效能。
但是，承諾在沒有計劃的情況下進行系統遷移是災難的一種方法，可能會減慢或停止新的功能開發。如果沒有有效的計劃，您可能會遇到缺陷，退步和過多的計劃外成本。
Vue是AngularJS團隊的一個自然且經過驗證的遷移目標。它易於學習，並允許任何AngularJS應用程式與新的Vue應用程式一起進行增量遷移。