在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本。经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定。
8个月前,我们的前端在使用Angular 2.确切地说,它使用的是Angular 2 beta 9.这是一个由外包公司编写的产品,我们从很多层面上都没有完全满意,从UX / UI到架构,在某种程度上,与Angular 2本身有很大的关系。

在之前,我承认Angular 2 beta 9是与Angular 2.0不同的产品,但这正是其中一个问题。从beta9到2.0.0,有8个beta版本,8个RC和2.0.0版本,总共有17个版本需要升级。我们确实尝试从beta 9升级到2.0.0但是太多的api更改了使升级变得非常困难。此外,大约在同一时间我们质疑Angular 2作为我们选择的框架,Angular团队决定开始研究Angular 4.虽然他们承诺版本改变不会太大,这意味着当我们完成升级到Angular时2.0.0我们需要另一次升级。多么浪费时间和仅有的资源。
我们不喜欢的主要原因是不喜欢Angular 2是Typescript开发的。我知道Angular 2可以和Javascript一起使用但是同样,使用Typescript的决定已经被内部使用了,根据我的理解,使用纯Javascript和Angular 2并不是你应该使用Angular 2的理想方式。无论如何,摆脱Typescript意味着完全重写项目。

我没有觉得Typescript增加了实质性的价值,更糟糕的是,我们注意到我们的编码速度降低了。使用Typescript在Javascript上很容易做的事情就像定义一个简单的对象一样在Typescript上更复杂。我强烈建议您在开始使用Typescript之前阅读以下文章。这对每个人来说都不一定是正确的解决方案。
我还记得使用Angular 1是多么容易,它有自己的不足,但与其他框架相比,Angular 2在途中失去了某些东西。关于Angular 2的结论很简单,Angular 1和2的唯一共同点是名称,它们是完全不同的框架。
因此,考虑到我们在未经测试的系统上有17个版本进行升级,来自业务的很多压力来编写新功能,大量错误和编写得不好的代码,原始开发人员不再在团队中,只有一个开发人员(我)当时有许多其他职责,自从我使用测试版以来找到正确文档的问题,以及Angular 2转移到版本4.他的负面消息开始迅速地积累。
我们做了一个决议,如果我们要花费那么多时间升级,那还不如看看别的框架。

应对

第一个显而易见的选择是React,因为大部分公司都在使用它,而那些没用的人正在谈论它。所以这是一个选择,当然知道Facebook支持它是很有帮助。但是,React本身不是一个简简单单框架,你需要添加额外的组件才能让它绽放光芒。

Vue.js

Vue.js是一个新玩家,我以前从未听说过它,虽然他们刚刚发布版本2时我们开始考虑不同的框架。起初它引起了我们的注意,但是还是有一定风险的。

决策过程

我们首先开始定义我们的决策点。我们知道框架需要具备以下条件:

  • 它应该是稳定的
  • 由强大的社区或一些大玩家支持
  • StackOverflow上有很好的文档或很多问题被解决了
  • 简单易学
  • 与Bootstrap集成
  • 小巧
  • 理想情况下,它允许我们重用代码
  • 应该增加编码速度
  • 基于组件

我们列出所有需求点以后,我不得不开始动手了,所以我给了React和Vue.js几天,分别审查了Google无法回答的每个决策点。由于我对它们中的任何一个都一无所知,所以在两天结束时,我会重新评估我在多大程度上重写了我们要迁移的实际项目的某些部分。
我选择重写的部分是:

  • 一些基本的API调用
  • 两个不同页面的两个布局
  • 用户相关内容的兼容性
  • 登录表单和一些内容表单
  • 一个bootstrap模式

我对Vue.js的实力感到惊讶,在几天之内我实际上有了一个概念证明,以展示给团队的其他成员和我的CTO。我对Vue.js的基本概念有了很好的理解,定义了一个良好的,可扩展的架构,但最重要的是我非常喜欢用它编写代码的经验,我觉得比React上手更快一些。
React比我想象的要难得多,在Redux和MobX之间进行选择比有一个与Vue.js和Vuex这样的框架完全集成的选项更有问题。这很简单,因为当没有框架经验时,它会让你更自信,而不是一个框架有一个正式的库来做某事。顺便说一句,我觉得Vuex的适用性比Redux更容易,但可能这只是个人的一种感知,就像所有的学习曲线一样。
JSX也是一个问题,因为我们无法重用HTML代码,而Vue.js确实允许我们在某种程度上这样做。Vue文件实际上非常适合使用,因为我不喜欢内联模板。React将JSX / HTML与JS代码混合在一起,我只是不喜欢,因为我坚信分离关注点,看起来很丑。
编码速度
编码速度是Vue.js擅长的领域,不需要学习JSX是一个巨大的帮助。当另一位开发人员加入该项目并在大约1小时的培训课程后的几个小时之后就开始项目开发。
这对我们来说非常重要,您可以通过打开vue文件立即看到它。它包含一个带有HTML和标签的模板部分,看起来类似于Angular 1,所以如果你做了一些Angular 1,它将非常熟悉。一个vue文件也有一个样式和纯javascript部分,你实际上使用javascript,你只需要学习一些关于Vue.js的东西来完全理解它们。理解Vue.js属性(如方法,计算,属性,数据和创建)将使您了解开始编码所需的大约90%,非常简单。
文档
为了获得适当的速度,我们需要良好的文档和Vue.js文档是一流的。指南,示例,问题和API都记录得非常好,涵盖了我们在开发过程中发现的所有疑问。我们害怕找到我们会遇到的许多问题的中文文档,但事实并非如此,一切都以英文提供。
问答
经过一个多星期的考虑后,Vue.js表现非常好,但令我惊讶的是,周围的问题都迎刃而解,因为之前没有人使用过Vue.js,我得到的唯一评论是“ 看起来很酷,但我还没有”用它“。React得到了最多的提及,Angular 2排在第二位。
我开始寻找具有Vue.js经验的本地人才,我确实找到了一些非常好的人,所以我开始认为我并不孤单,我的社交技术圈可能太小而且我不应该对事实上,我不认识任何人与Vue.js合作进行制作。
移动端
在我们考虑Vue.js vs React的时候,我们也在考虑重写我们的移动应用程序,React Native看起来是一个非常好的选择。这对React来说是一个很大的优势,因为Vue.js没有任何类似于React Native试图做的长远稳定的开发,所以在网络和应用程序客户端之间重用代码的可能性是一个巨大的优势,但我决定我不会考虑。毕竟,根据我的经验,使用Node.js,我在浏览器和服务器之间重用了非常少量的代码。
许可
在我写这篇文章时,有很多讨论,因为Facebook将React许可证更改为BSD +专利。根据Facebook,这个许可证旨在保护他们免受专利巨魔的侵害。这在我们的决策过程中并不是最原始的,但我很高兴我们没有采用React的方式,因为任何与许可相关的噪音都不是你想听的噪音。
最终,Facebook落后于React可能会成为项目的责任而不是实力,这就是为什么拥有独立基金会或组织负责成功的开源软件项目通常会更好。Facebook应该做正确的事情,以IBM为例,当IBM收购Strongloop时,他们将Express.js捐赠给Node.js这样一个重要软件所属的基金会。社区的压力和IBM的意愿确保了软件的连续性。Twitter是另一个很好的例子,他们在非常宽松的MIT许可下发布了Bootstrap,没有人在谈论Bootstrap的License问题。
最后的话
在我做出决定之前研究的许多网页中,有一个图表引起了我的注意,开发人员对Sacha Greif @sachagreif每年进行的Javascript调查状态的满意度。我承认,正如作者所做的那样,这不是科学调查,但确实提供了大量信息,后来当我们有更清晰的图片时,我们的决策点证实了这一点,特别是关于Vue.js,因为我们对它一无所知我们研究的开始。您可以通过以下链接阅读Javascript状态。
总体而言,Vue.js是我们评估的赢家,它在Stack Overflow上有很多问题,最简单的三个选项的官方文档,最小的代码库,与Bootstrap很好地集成,并且学习它是有强大的项目支持的Laravel和像阿里巴巴这样的大公司是一个很大的优势。没有像React这样大的社区并不是影响我去用它的一个真正的因素,因为它本身足够大。
选择Vue.js是正确的选择,我花了一段时间来说服我的首席技术官,我非常感激他总是问正确和棘手的问题并100%肯定我的所做出的决定。如果我弄错了,我会后悔的。
最后整个决策过程真的很有帮助,但是我能够快速学习的事实产生了巨大的变化,如果你喜欢就称之为直觉,但是学习一些东西真的快的时候让我对更复杂的问题有了很大的信心。我知道在实际开发过程中我会面对。
我不是说React是一个糟糕的选择,我对社区如此之大感到惊讶,并且有充分的理由,虽然jQuery也有很多人使用,并没有使它成为我们想要的项目的良好框架/库去做。
Vue.js正在获得更多开发者的支持,我们在开发过程中看到了这一点,让我们更加相信,我们的选择是对的。

为什么我们从Angular 2迁移到Vue.js(为什么我们没有选择React)的更多相关文章

  1. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  2. 我们为什么以及是如何从 Angular.js 迁移到 Vue.js?

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

  3. 我从Angular 2转向Vue.js, 也没有选择React

    译者按: 通过使用Angular的经历,作者已经完全转为Vue粉了!我们Fundebug目前还是用AngularJS 1,坦白说,学习曲线蛮陡的. 原文: Why we moved from Angu ...

  4. 主流前端框架对比:Vue.js , React, Angular.js

    个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vu ...

  5. 致敬尤雨溪,Vue.js 让我赚到了第一桶金

    最近这个 Vue.js 纪录片在前端圈广为传播,相信不少人已经看过了.第一次看编程领域的纪录片,感觉还挺新鲜的.这部 30 分钟左右的纪录片制作精良,主角是 Vue.js 作者尤雨溪,还穿插采访了框架 ...

  6. GitHub趋势:Vue.js大有超过TensorFlow之势!

    2月,Github上第二受欢迎的项目是Flutter.Flutter的第一个测试版本是作为2018年世界移动通信大会的一部分而开始的. Flutter是一款移动UI框架,旨在帮助开发人员在iOS和An ...

  7. Vue.js 学习笔记之三:与服务器的数据交互

    显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...

  8. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  9. Vue.js与angular在数据实现的思考

    Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架 ...

随机推荐

  1. 四-2、Move、fix、unfix命令

    1.Move命令--移动命令 1.对应的菜单和工具栏 2.以移动单个器件为例(以推荐的操作步骤进行操作)(具体步骤如下) 1--光标位于元件的原点 2--光标位于元件的几何中心 3--光标位于鼠标单击 ...

  2. Alisha’s Party

    Alisha’s Party Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  3. vue 3.0 vue-cli项目搭建要点

    一.使用vue-cli搭建项目(可使用vue ui图形化界面搭建项目,配置dist时,将名称设为项目名称) 二.项目搭建后 1.配置vue.config.js // 翻阅文档https://cli.v ...

  4. Dpr ppi 适配 等概念 弹性属性的讲解

    Dpr: Dpr的全称(Device pixel ratio)像素设备比例:就是说每个设备像素上占有的css位像素的个数 苹果手机常见的设备像素比:1.0安卓 iPhone2.0  3.0 如果是1. ...

  5. scrapy--meta参数传递问题

    scrapy使用大坑---meta参数传递出现之重复问题 问题描述: 爬虫目标: 实现哔哩哔哩网站的视频信息爬取,只要的信息结构爬去顺序为**关键词的搜索结果,拿到第一页上某个视频的标题,url,和时 ...

  6. jQuery中的serializer序列化—炒鸡好用

    jQuery.serializer()序列化 serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串. serialize()函数常用于将表单内容序列化,以便用于AJAX提 ...

  7. npm install 安装不成功,提示python2.7

    npm install 安装不成功的原因 是因为缺少python的环境 解决方法: 1.去官网下载https://www.python.org/download/releases/2.7/ 2.安装成 ...

  8. 20150722---点击按钮使指定的控件可见部分平移(JS)

    前段代码: <div id="out" style=" width:400px;overflow:hidden;"> <div id=&quo ...

  9. sql 为什么要用where 1=1?

    之前一直不太明白,sql语句里为什么要写where 1=1 提升某种执行效率? 其实,1=1 是永恒成立的,意思无条件的,也就是说在SQL语句中有没有这个1=1都可以. 这个1=1常用于应用程序根据用 ...

  10. 最长连续公共子序列(LCS)与最长递增公共子序列(LIS)

    最长公共子序列(不连续) 实际问题中也有比较多的应用,比如,论文查重这种,就是很实际的一个使用方面. 这个应该是最常见的一种了,不再赘述,直接按照转移方程来进行: 按最普通的方式就是,直接构造二维矩阵 ...