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


在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正在获得更多开发者的支持,我们在开发过程中看到了这一点,让我们更加相信,我们的选择是对的。

原文地址:https://www.cnblogs.com/jlfw/p/11888271.html

时间: 2024-10-11 15:56:05

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

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

个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vue.js? 1.安装 (1)script 如果项目直接通过script加载CDN文件,代码示例如下: <script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"

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

最近这个 Vue.js 纪录片在前端圈广为传播,相信不少人已经看过了.第一次看编程领域的纪录片,感觉还挺新鲜的.这部 30 分钟左右的纪录片制作精良,主角是 Vue.js 作者尤雨溪,还穿插采访了框架的几个核心贡献者和早期用户. 之前看过一次尤雨溪介绍 Vue.js 的视频,他英文之流利,表达之清晰,给我留下了深刻的印象.加上这次的纪录片,确实值得给他点个赞. 我算是比较早接触 Vue.js 这个框架(库)的一批人了.过去十年,前端领域发展日新月异,各种框架和库层出不穷.从最早使用的 jQuer

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介 课程地址:https://ke.qq.com/course/432961 机构名称:大华软件学院 授课讲师:大强老师 课程名称:Vue.js 实战教程 V2.x(一)基础篇 课程简介:包括前端发展史.Vue.js简介.第一个Vue.js程序.安装环境和Vue.Vue实例.模板语法.计算属性和侦听器.Class与Style绑定.条件渲染.列表渲染.事件处理.表单输入绑定.组件基础等等. 适合人群: 1.初出茅庐,想学习前端开发的同学: 2.没用过Vue.js,想学习更多框架的同学: 3.

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌

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

Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架,MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angular的指令机制:用户可以通过具有特殊前缀的HTML 属性来实现数据绑定,也可以使用常见的花括号模板插值,或是在表单元素上使用双向绑定: <!-- 指令 -->

Vue.js和angular.js的区别

关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单 关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 由此可以看出Vue比Angular相对来说简单一些,在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发

Vue.js 很好,但会比 Angular 或 React 更好吗?

文章转自:http://www.oschina.net/translate/vuejs-is-good-but-is-it-better-than-angular-or-rea Vue.js 是一个用来构建网页界面的 JavaScript 库.同其它的一些工具结合在一起,它也可以成为一个新“框架”.通过阅读我们最近一次在ValueCoders 上发表的 文章, 你会了解到 Vue.js 是顶级的 JavaScript 框架之一,它在许多场景中可以被用来替换 Angular 和 React.这就引

Vue.js Is Good, but Is It Better Than Angular or React?

Vue.js is a JavaScript library for building web interfaces. Combining ?with some other tools It also becomes a "framework". Now,?from our last blog?on?ValueCoders, you already know that Vue.js is one of the top JavaScript frameworks and it is re

angular.js和vue.js中实现函数去抖(debounce)

问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间.本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖. angular.js中解决方案 把去抖函数写成一个service,方便多处调用: .factory('debounce', ['$timeout','$q', function($timeou