在我写这篇文章的时候,我们刚刚从我们的应用程序代码库中删除了最后一行AngularJS代码,结束了一个为期4个月的非侵入性工作,将我们的应用程序从AngularJS迁移到VueJS。在这篇文章中,我将分享我们在整个过程中的经验。

一些背景介绍

我们的应用程序(Holistics.io)是一个基于SQL的商业智能(BI)平台,使用Rails、Sidekiq、PostgreSQL和AngularJS编写。我们的Rails应用程序始于2013年底,作为一个简单的应用程序其中使用了jQuery和AngularJS。我们使用AngularJS主要特性/功能如下:

  • 查看模型绑定(控制器,视图+模板引擎)

  • 依赖注入(服务,工厂,指令)

  • Angular第三方组件(uib-modal,ui-select,...)

其余的都是内部的自定义JavaScript。

Tocy

翻译于 2017/10/19 22:13
 顶

0

 

我们在 Angular 中遇到的问题

随着我们应用的升级,我们在使用 AngularJS 的时候遇到了这样一些问题:

  • 渲染性能:作为数据工具,由于AngularJs的特性,我们不得不花大量的时间来呈现一张巨大的数据表。

  • Angular 的文档不太好:在这成为问题之前,其他都不算什么问题。我们越深入地使用 AngularJS,就越觉得它的文档实在难以理解。

  • 双向数据流使得逻辑处理起来相当困难,不管是写组件还是写视图控制器都是如此。这可能是AngularJS不好使用最重要的一个原因。

考虑不同的框架

在决定之前,我们仔细看看各个选项:

Angular 2

我们确实花了些时间来研究 Angular 2。对于我们来说,Angular 2 甚至比 Angular 1 还让人难以理解。它带来了太多新的变化(TypeScript),新的模板语法等,但我们觉得这并没有真正解决我们的核心问题。除此之外,从 V1 到 V2 的迁移之路在那时就一直让我们觉得困惑。

边城

翻译于 2017/10/19 23:25
 顶

0

 
 

ReactJS

我们仔细审视了 ReactJS。尽管我们非常喜欢它的哲学和生态原理系统,但有一件事情让我们吃惊:我们找不到一条清晰、干净、渐进的迁移路径,来阻止我们在3-4个月内支持新功能。

AngularJS 的使用基于 HTML 的模板系统,而 ReactJS 是用的 JSX。我们不能找到办法在迁移的过程中让两种技术很好的并存。

还有一个次要的主观原因,我发现 JSX 比基于 HTML 的模板更加冗长。

EmberJS

EmberJS 不是一个 JS 库,而是一个 Web 应用框架,我们必须用基于 EmberJS 重写所有东西。

边城

翻译于 2017/10/20 00:06
 顶

0

 
 

我们为什么选择了 VueJS:逐步迁移

综合考虑各方面因素,我们最终选择了 VueJS,但对于我们来说,最重要的决定性因素是:我们看到了一个清晰、可逐步迁移到 VueJS,而又不会破坏发展路径的迁移路径。实际上,我敢打赌,在整个迁移期间,我们的客户都没有注意到什么明显的变化,他们不会知道自己访问的页面中,哪些是 Angular 实现的,哪些是 VueJS 实现的。

Vue 采用了与 ReactJS 相似的技术,基于组件,属性下行事件上行等。它与 AngularJS 在模板引擎方面有着惊人的相似。它就像 AngularJS 和 ReactJS 的优美结合。这让我们觉得完美,因为我们有大量的 AngularJS 模板,而我们的主要问题是 Angular 组件带来的复杂逻辑。

边城

翻译于 2017/10/20 00:16
 顶

2

 
 

实际上多数时候我们需要做的只是将代码中的 ng- 改为 v-,简直太美妙了!

随着深入,我们越发觉得作出了正确的选择,它解决了我们早期遇到的问题:很好的性能,单文件组件,清晰的代码结构,槽,等等。

而且,在迁移的过程中,由于 Vue 结构的方式(单向数据流,基于组件),它迫使我们反思和重构代码,而不是继续写烂代码,这简化了我们的代码逻辑。

我还想说的最后一点,我发现 VueJS 的文档写得非常好,结构也非常清晰。这也是我们选择 VueJS 的另一个主要原因。我第一次使用 Vue 的时候,花了 30 分钟来阅读它的文档,立即觉得必须要试试这个东西。

边城

翻译于 2017/10/20 00:25
 顶

0

 
 

我们是怎么进行逐步迁移的:

下面是我们迁移的简单步骤(注意有些内容与我们运行的 Rails 应用环境有关,如果你没有使用 Rails,可能会有些不同):

1. 把 AngularJS 控制器逻辑转换到 VueJS

在逐步迁移策略中,我们要在引入 VueJS 时尽可能少做改动。因此,我们从标准的 AngularJS 和模板文件开始修改,将 VueJS 引入其中:

// user_edit_controller.js.es6`
import Vue from 'vue' app.controller('UserEditCtrl', ['$scope', '$http', 'Ajax', 'Util', 'Modals',  
  function ($scope, $http, Ajax, Util, Modals) {
    let vapp = new Vue({
      el: '#v-wrapper',
      components: {
          ...
      },
      data: {
      }
    });
  }
]);
<!-- `users/edit.html.erb` -->

<div ng-controller="UserEditCtrl">  
  <div id="v-wrapper">
    <!-- vuejs logic goes here... -->
    <input v-model="username" placeholder="Username" />
    ...
  </div>
</div>

我们在应用中引入了 Vue 的逻辑,却不需要改变任何相关应用的前端结构。这极大程度的帮助我们降低在迁移过程中发生错误的风险,我们可以花 1-2 个小时迅速地将一小部分 AngularJS 实现的东西转换为 VueJS 实现,然后测试并部署,不用担心它会导致回归缺陷

边城

翻译于 2017/10/20 00:34
 顶

1

 
 

2. 把 AngularJS 服务转换为 ES6 模块

我们首先需要找到一个 AngularJS 中大量使用的 $http 服务的替代品。我们直接使用了 axios。我们不再直接使用 $http,但我们围绕它进行了抽象封装,以使修改变得非常简单。

然后,我们像这样定义了大量的 AngularJS:

// users.js
app.service('Users', ['$http', 'Ajax',  
  function ($http, Ajax) {
    this.create = function(user) {
      // ...
    }
  }
]);

使用 ES6 类语法代替就好:

// users.js.es6
export default class Users {  
  static create(user) {
    // ...
  }
}

如果其它控制器中使用有 Angular 代码在使用这些服务,我们会复制这些服务并使用 ES6 类语法来实现,同时保持原有的 Angular 版本,直到不再有 Angular 代码使用它们为止。这会在短时间内让代码出现重复,但我们只需要小心一点,在代码中多写些注释来关联两个版本。

边城

翻译于 2017/10/20 00:43
 顶

0

 
 

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

完成上述两点之后,一些 AngularJS 控制器可以完全迁移到 VueJS,这和上面的第 2 步相似,我们使用 ES6 语法来代替 app.controller() 定义。不过这次,我们使用 Vue 的单文件组件:

文件:user_edit.vue

<template>  
  <div>
    <!-- vuejs logic goes here... -->
    <input v-model="username" placeholder="Username" />
    ...
  </div>
</template> <script>  
import Users from 'users.js.es6'  
export default {  
  data: {    
  },
  methods: {   
  },
  mounted() {
    // initializing
  } };
</script>

4. 为 Rails 控制器/视图添加安装入口

默认情况下,每个 Rails 页面加载的时候会渲染视图。在上面的 Vue 单文件组件中,我们将 Raisl 视图,users/edit.html.erb 文件,改为:

<div class="v-user-edit">  
  <user-edit></user-edit>
</div>

然后加些代码在页面加载的时候将其安装为正确的 Vue 组件:

import UserEdit from 'user_edit.vue'  
let vueConfig = {  
  el: '.v-user-edit',
  components: {
    UserEdit
  }
};
new Vue(vueConfig);

实际上,上面的代码被抽象成了可复用的函数,在不同的页面中调用。

边城

翻译于 2017/10/20 00:49
 顶

1

 
 

总结

我们在 2017 年九月末完成了框架的迁移,经历了大约 4 个月时间的非侵入性(我们在迁移过程中会继续添加其它新特性)工作。实际上我们并没有把迁移作为最紧急的任务,不管什么时候,只要我们的改动涉及到旧的 Angular 代码,我们会先把它转换成 Vue 实现,然后再进行变更。

迁移完成后,我们收获了:

  • 非常整洁的代码和模块(基于组件的),以及 VueX 和 Vue Store;它们大大提高了编程效率

  • 再没有复杂的逻辑

  • 改善了 UI 性能

这并不是说 Vue 就是最好的,它只是在我们特定的情况下工作良好:Angular 固有的设计本质导致使用 Angular 实现应用很重,而 Vue 为我们很好地填补了这一空白,这一切都是自然而然地逐步迁移实现的。

你怎么想?请在下面的评论中与我们分享。希望了解更多你们遇到的情况!

我们为什么以及是如何从 Angular.js 迁移到 Vue.js?的更多相关文章

  1. 为什么我们从Angular 2迁移到Vue.js(为什么我们没有选择React)

    在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本.经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定.8个月前,我们的前端在使 ...

  2. Vue.js 2 vs Vue.js 3的实现 – 云栖社区

    Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...

  3. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

  4. 浅析angular,react,vue.js jQuery-1

    作者:尚春链接:https://www.zhihu.com/question/38989845/answer/79201080来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  5. 浅析angular,react,vue.js jQuery使用区别

    前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...

  6. oc 与 js交互之vue.js

    - .vue.js 调用oc的方法并传值 vue.js 组件中调用方法: methods: {     gotoDetail(item){         //此方法需要在移动端实现,这里可以加入判断 ...

  7. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

  8. vue.js devtools-------调试vue.js的开发者插件

    vue.js devtools插件: 作用: 以往我们在进行测试代码的时候,直接在console进行查看,其实这个插件雷同于控制台,只不过在vue里面,将需要查看的数据存放在一个变量里面了~ 效果图: ...

  9. JS框架_(Vue.js)带有星期日期的数字时钟

    百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...

随机推荐

  1. api设计 - php 接口 token 数据加密

    最近在用php写app的接口,有一些疑问 首先关于token(令牌)token是用户登录的时候生成的 用户token在服务端保存入库 客户端则缓存在本地 大部分接口都要求客户端发送token 和服务端 ...

  2. JVM快速入门

    最近开始了全面的JAVA生态环境学习,因此,JVM的学习是必不可少的一个环节.和.NET的CLR一样,一起的JAVA应用均跑在JVM虚拟机上,不过相对我们只能干看看的CLR,JVM有很大的灵活性,可以 ...

  3. Java 中类的初始化过程

    先来一张 JVM 中的内存模型 . 在Java 虚拟机原理这本书中介绍了类会被初始化的 5 种情况 . 1 遇到 new getstatic putstatic 和 invokestatic 这 4 ...

  4. 在qemu环境中用gdb调试Linux内核

    简介 对用户态进程,利用gdb调试代码是很方便的手段.而对于内核态的问题,可以利用crash等工具基于coredump文件进行调试.其实我们也可以利用一些手段对Linux内核代码进行gdb调试,qem ...

  5. python-arcade时钟

    最近开始学习arcade的图形库,感觉功能很丰富,尝试画了个时钟,显示如下: 贴上调整好的代码: import arcade import math,time SCREEN_WIDTH = 800 S ...

  6. [ 转载 ] Centos安装Mysql数据库纪录

    yum install mysql-community-server依赖关系错误 https://www.cnblogs.com/lzj0218/p/5724446.html rpm -qa|grep ...

  7. event使用说明和DHTML参数属性

    event 对象 代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态. DHTML元素属性列表 属性 描述 abstract 使用 event 对象获取高级流重定向器(ASX)文件中项目 ...

  8. django 动态url 可变

    首先在urls里面改,name=让一个映射敷个名字. 然后到books——list页面让编辑按钮改成这种可变的映射模式.

  9. poj 3463 次短路

    题意:给定一个有向图,问从起点到终点,最短路+比最短路距离长1的路的个数. 当年数据结构课程设计用A*做过,现在忘光了,2333 #include<stdio.h> #include< ...

  10. 读书笔记_Effective_C++_条款三十六:绝不重新定义继承而来的non-virtual函数

    这个条款的内容很简单,见下面的示例: class BaseClass { public: void NonVirtualFunction() { cout << "BaseCla ...