为什么你应该考虑从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团队发起了“ 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团队已承诺仅发布新补丁以解决以下问题：

• 1.7.X版本分支中的安全漏洞
• 与影响生产应用程序的主要浏览器版本不兼容
• 与影响生产应用程序的jQuery库版本不兼容

在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应用程序一起进行增量迁移。