2018-10-12 14:37:59 i_dont_know_a 阅读数 949

Angular、Vue和React都是目前比较流行的前端框架,不同的企业对其前端工作者有不同的要求,那么这三个框架之间有什么样的区别呢?

 

▍Angular

  1. 框架比较成熟完整,过于庞大,上手难;
  2. 指令以ng-xxx开头;
  3. 由谷歌开发和维护;
  4. 版本1比较适合PC端开发,版本2在往移动端靠;
  5. 不支持低版本浏览器;
  6. 内置指令和自定义指令;
  7. 内置过滤器和自定义过滤器;
  8. 支持双向数据绑定;

 

▍Vue

  1. 它是一个轻量级框架,其核心库只关注视图层,简单小巧、易学易上手;
  2. 指令以v-xxx开头;
  3. 个人维护项目;
  4. 适合于移动端开发;
  5. 不支持低版本浏览器;
  6. 内置指令和自定义指令;
  7. 内置过滤器和自定义过滤器;
  8. 支持双向数据绑定;
  9. 使用DOM模板。中心思想:一切都是组件,组件实例之间可以嵌套;
  10. 核心库不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载;
  11. 基于依赖追踪的观察系统,并且异步队列更新。

 

▍React

  1. 依赖虚拟DOM;
  2. 采用特殊的JSX语法;
  3. 中心思想:一切都是组件,组件实例之间可以嵌套;
  4. 核心库不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

 

▍参考文章

vue、react、angular三者的比较 | 博客园vue 与 react,angular 优缺点对比 | 简书

 

2018-04-27 10:06:31 runOnWay 阅读数 1987

今天分享的内容是前端3大框架,主要有介绍前端的发展历程,框架出现的原因和介绍angular、react和vue各自的优缺点,让大家能够对这3个框架有一个大致的了解。
首先介绍一下前端技术的发展
1994年可以看作是前端历史的一个起点,在这一年的10月13日,网景公司推出了第一版的navigator,这一年tim创建了w3c,他的好基友发布了css,还是这一年,php诞生。
navigator是一个对象,它包含了有关浏览器的信息,w3c是万维网联盟,是web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,w3c发布了超过200项影响深远的web技术标准和实施指南。php是加拿大的Rasmus Lerdorf创建的,他当时是为了支持他的个人网站。php的原意是personal home page,宣传语是超文本处理者。让前端页面可以和后端进行交互,实现了数据库的交互。直到现在php也是一门重要的服务端语言。

这张图片就是最早期的浏览器
这里写图片描述
因为当时的万维网www目的很单一。是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的,这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字和图片构成的HTML页面,在当时,这样的功能就已经完全满足了学术交流的需要,所以网页的早期形态和Document一样,完全基于HTML页面,并且所有内容都是静态的。
然而,随着网页从学术机构走向公众社会,网页承载的功能便超出了学术范围而变得更加丰富,因此早期网页的局限性也逐渐显露出来。

局限性主要有三点
第一,所有的网页都基于HTML页面,因为没有任何手段可以控制局部内容的显示和隐藏,不像现在可以用if或者hide这些属性去完成这个任务,因此任何局部的变化哪怕只多出一个标点符号,都只能重新下载一个新的页面。
第二,计算任务只能在服务端实现。由于当时网速的限制,与服务器通信的过程是非常缓慢的,并且此过程是同步阻塞的,于是就会出现这样的一个场景:用户提交一个表单,然后整个页面消失,浏览器呈现白屏,经过漫长的等待,浏览器渲染出一个和之前一模一样的页面,只不过输入框旁边多了一排红色小字:用户名错误。
第三,所有页面都是静态的,这意味着一个电商网站有一千种商品,哪怕页面布局一模一样,也必须写一千个单独的页面。
以上第一条和第三条限制,证明早期网页形态低下的效率是无法仅仅通过提高网速解决的,即使是第二条,在很快的网速的条件下,它会闪屏,也是不行的。
随后:
1995年网景推出了JavaScript,实现了客户端的计算任务(如表单验证就是在前端完成,而不是请求发给后端,在请求页面了),不会再出现那种等了半天只为了返回一行用户名错误的情况。
1996年微软推出了iframe标签,实现了异步的局部加载。iframe就相当于页面中的一个页面,只需要刷新这个页面而不用刷新整个页面。
1999年W3C发布第四代HTML标准,同年微软推出了用于异步数据传输的ActiveX,ajax的前身,随即各大浏览器厂商模仿实现了XMLHttpRequest。这标识着Ajax的诞生,但是Ajax这个词是在六年之后问世的,特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后,Ajax才获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术,它标识着Web2.0时代的到来。web2.0的核心主旨是以用户为中心。用户不再是单纯的读网站作者输出的内容,同时也在向网站输出内容。
2006年,XMLHttpRequest被W3C正式纳入标准。
至此,早期的Document终于进化为了Web page,上述三个局限都得到了妥善的解决。
之后就来到了jquery的时代
早期的网页开发是由后端主导的,前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery,jQuery主要用于操作DOM,其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手,因此很快风靡全球,大量基于jQuery的插件构成了一个庞大的生态系统,更加稳固了jQuery作为JS库一哥的地位。
在百度搜索jquery,第一条内容就是它的一个比较庞大的插件库网站。
这里写图片描述
再看这个图,老夫写代码就用jquery,这里写图片描述
这个图不仅是用来搞笑的,他也确实代表着jq在鼎盛时期,在前端人员心里的一个地位。
其实在web初期,制约Web开发从后到前的因素很简单,就是前端很多事干不了或干不好,当时的浏览器性能弱,标准化程度低。特别是占据大量市场份额的IE,不仅ugly,并且buggy。
于2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代,前端的计算能力一下子变得过剩了。标准组织也非常配合的在2009年发布了第五代JavaScript,前端的装备得到了整体性的提高,前端界就像当年改革开放一样,走进了一个令人目不暇接的新时代。
2009年AngularJS诞生,随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生……前端能做的事越来越多,前后端分离就是大势所趋了。
这张图片显示的是目前各大浏览器的使用情况,可以看出chrome已经算是一家独大。IE8之所以还有12.03%的使用率,是因为还有一部分人在使用win7系统。这里写图片描述
如果继续将时间缩短,可以看出chrome浏览器所占比例在逐步增加。
这里写图片描述
从前端的发展历程可以看出,前端开发在产品的整个开发中所占的比重在不断变大,现代浏览器强大的计算能力让前端开发可以做更多的事情,不单单是实现页面的特效,展示内容等。随着数据量的飙升,前端接触到了越来越多的数据,jQuery专注于DOM的开发模式就显得力不从心了。
框架应运而生。
框架的始祖,angularjs
对于实现静态页面的动态话,最初的解决方案是使用js或jq来操作dom,这就导致在一个复杂的页面,开发人员需要进行大量dom操作。而且很多重复的操作,只能通过编写重复的代码或封装函数来解决复用,jq就封装了一些常用的js函数。
angularjs的出现,简化了开发人员对dom的操作。我们不需要再像之前使用js、jq那样,要高度关注dom结构的操作,而是只需要关注数据模型的变化,框架会帮助我们去改变dom。还有最重要的一点,就是代码的复用问题,不再是简单的复制粘贴,而是可以将一个模块进行封装,然后实现高度复用。这种封装是无法通过封装方法来解决的。
angularjs是2009年由Misko Hevery等人创建,后被Google收购。现在的angular系列也一直由google的团队进行维护。angularjs在当时可以称作一个完整的解决方案,在构建CRUD应用时,有着很大的便利,CRUD中需要的数据绑定、表单验证、路由、组件重用等都包含在angularjs中。大部分的网页都是crud,除了网页游戏那些。
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。
例如:
使用双大括号{{}}语法进行数据绑定;
使用DOM控制结构,来实现迭代或者隐藏DOM片段;
支持表单和表单的验证;
能将逻辑代码关联到相关的DOM元素上;
能将HTML分组成可重用的组件。
随着前端技术的继续发展,越来越多的框架出现了。
随后出现的其他框架完成的任务其实与angularjs基本相同,只不过在实现方式和效率等方面有所差别。大浪淘沙,现在还活跃在人们视野中的框架,就是要说的3大框架。
angularjs是通过directive(指令)去封装组件,react和vue是通过component,就是组件。
angular、react和vue都是mvvm模式,(model,view,view-model),angular的数据绑定、操作dom就是通过viewmodel完成的。react和vue的view-model的高效率通过框架自身提供的virtual dom(虚拟dom)来实现,它是一个js对象,我们数据的变化会被映射到这个虚拟dom上,然后虚拟dom再去和真实的dom通过各框架自己的算法进行对比,来修改真实dom结构,这就要比angular的viewmodel直接绑定真实dom树的操作要更有效率一些,因为虽然现在的浏览器计算性能大幅度提高,但是频繁对真实dom树的操作依然是一个很大的开销,这要比操作一个js对象,就是virtual dom,的开销大很多。然后这里说的效率不是指人工优化性能提升的那种效率,因为它经过算法的比较再去找树一定会比开发人员针对某一个dom节点的操作效率要低,它完成的是提升了一个整体的水平,因为开发人员无法在一个大项目中对每一个dom元素的操作都去优化。
简单点说,viewmodel就是帮我们完成了对dom的操作,不需要我们自己去整了。然后angularjs的viewmodel要比react的和vue的落后,效率低。
既然框架的目的和解决的主要问题是相同的,那么哪一个是更加优秀的方案,就成为了前端人员一直争论的一个话题。
由于es版本的不断升级,js的不断进步,已经有许多操作不再需要框架去完成,比如一些新关键字、新方法的使用就可以完成angularjs框架内部复杂的过程。再由于数据量的飙升,用户对网页性能的不断看重,等等原因,让angularjs逐渐的被淹没在时代的洪流中。
随后google也看出了angularjs不再适应时代的发展,开始对其进行跨时代的、破坏性的升级,这就导致angular2之后的版本和angularjs就相当于两个框架了,无论是写法还是实现方式上都有了巨大的差别。
所以现在所谓的框架之争,其实已经把angularjs即angular1.x排除在外了。指的是angular、react和vue的争斗。
angular是google升级、维护。
react由facebook升级、维护。
vue是由中国人尤雨溪和他的团队负责。
介绍三者各自的优缺点之前,我们先看一下目前这三个框架在调查中的表现,也算一个可以参考的数据。
这里写图片描述
图中深紫色代表用过还想用,浅紫色代表用过之后不想用,深黄色代表听过想去用。我们基本上可以通过这个图看出,在2017年,被调查的这些人中对于框架的选择。React的深紫色和深黄色占的比重是最多的。对于用过还想用这部分来说,它要比angular2、vue、angularjs加起来还要多。再看浅紫色,用过不想再用的人数,angularjs是最多的。再看深黄色,可以看出vue的比重是最大的,这证明vue给大家的印象还是不错的,也许会在不久的将来逐渐占领市场的部分份额。
如果单从这张图来看,那么react无疑是框架之争的赢家,再看这张图。
这里写图片描述
angularjs的极速下滑伴随着angular的极速上升,这证明google的angular系列还是有某些特质在吸引着开发者。
最后再看一组数据。
这里写图片描述
这里写图片描述
从比例来看,react和vue的满意度都超过了90%,angular2基本不变,这个angular指的是angularjs,下降了7%。
以上的数据毕竟是别人的感受,对于自身而言,在开发过程中是否要使用框架,或又是使用哪种框架还要根据实际情况来决定,下面要说的就是各框架之间的优缺点,之所以没有说对比,是因为这三个框架还没有一个可以说在任何方面都完胜对手,因此更好的办法我认为就是去了解他们的优缺点,再来对比自身项目,看哪个框架更适用。

angular4对于2来说,有了一定的进步,比如也在逐步拆分它的功能,减少体积,增强性能以及router的升级等,在最初,三者之间的性能也会总被拿出来作为某个框架更强的一个论据,最后从各大网站的性能统计上来看,在用户实际使用中,三大框架对于PC端的用户来说是差不多的(虽然性能上的确angular会弱于另外两个,但是毫秒之间的差距,用户是很难体验出来的)。它更多的是在影响开发者,而2和4对于开发者来说是相差不大的,这一点从angular2的代码向4升级时并不难就可以看出来。因此下面会将angular2和4,统称为angular。
angular是最早出现的框架,第一个优点就是背后靠着google这座大山,有着稳定的维护团队。并且google的Adwords业务(一个按点击量收费的广告业务,据说是google比较赚钱的一个业务)就使用了angular,作为一个赚钱的业务,google也会让它的环境更稳定一些。
第二个:angular+typescript,google和微软的双剑合璧。angular全面支持typescript语法,typescript不仅包含es6中的语法,也包括一些新的语法,最重要的一点是它增加了类型规则,这让代码的可读性和可维护性大大的提高,它也可以让有java或.net背景的开发人员更快的掌握。
第三个优点:完整。其实相对react和vue来说,angular更可以说是一个框架,而react和vue本身只能算是一个库。angular自带了几乎所有页面应具有的功能,路由、表单、ajax、模版、双向数据绑定等等。它原生的form表单模块非常强大,除了双向绑定的基本功能,还自带验证等,开发人员不需要再去为了这些功能找第三方库,angular一个框架就包含了这些的所有,因此对于选择困难症人群,这是一个优点。
还有一个优点可以算在这里,每个框架都有自己的cli脚手架,可以快速搭建项目雏形。angular-cli自带国际化。
第四个优点:它的每一个组件都是一个文件夹,html、js、和css文件是分开的,让代码更加清晰。
而且它的各类型文件单独存在,在开发中使用任何IDE都可以检查代码。可以使用自带的格式化功能,让开发过程中的代码更整洁。

这些是它的优点,然后是缺点。
第一个,最大的缺点,难调试。angular的代码整洁、规范,很容易维护和审查,但是它的控制台报错信息太差了,大部分情况是无法看出问题到底在哪,这就在开发过程中给调试增加了很大的难度。而react和vue在开发中会更加明确的让开发人员了解到错误出在哪里。
第二个,它是一个胖子,它自带了很多模块,这解决了开发人员在选择上耗费的时间,但是这也导致它太重了,压缩后达到了168k,是vue50k的三倍还多,即使在4版本中,拆分了一些功能,但是它依然是个胖子。这些功能无论你用还是不用,它就在那里,占着空间。如果在pc端或许还体现的不是很明显,如果在移动端就会体现出胖的缺点。
第三个,就是学习成本的问题,首先ts,它的确对后台的同学们更友好,但是对于一个纯前端人员来说,就是一个另外要学习的知识点。然后是angular它有超多的概念,有一些单单通过文档还很难于理解,还有不友好的api文档。因为它的东西太多,所以api文档内容也很多,增大了阅读难度。这就导致了刚接触angular的人很难上手。也给心理上造成了很大的压力,那文档一看就不想看了,还有api,它是英文的。
难于调试和更高的学习成本,让许多人望而生畏。

我们来看react,react的第一个优点,和angular一样,有一个大厂的团队在维护(万万没想到facebook最近遭遇了天价罚单,这是否会对react的维护造成影响还未可知,所以暂时把这个仍然算作它的一个优点,如果react因此死了,简直就是一个大写的尴尬)。
react本身不能算作一个框架,因为它本身的功能有限,不过它有一个庞大的生态系统,全世界无数开发人员在为它提供开源包,也许对于开发人员一个很难完成的问题已经有其他人员帮你完成了,只需要引入就好了。
之前一直在说angular很重。react和vue要比它轻量,体积小本来应该是算在react和vue的优点中,但是在一个大型的项目中,就比如一般的spa,react要用的是react+redux+react-router或许还要加上发送请求的axios,如果有一些其他的需求还要再加包,vue也同样,vue+vuex+vue-router+vue-axios,这就导致react和vue体积小的优点在逐步减小。所以这一方面我们应该说react和vue的可组装性是强于angular的,更加灵活,想用什么用什么。
第四点就是react的单项数据流机制,这相对angular的双向数据流来说,因为单向,所以它的各种变化都是可预计的,不像双向数据流,一旦数据流复杂起来,大家都互相触发变化,开发人员根本猜不出你改变一个地方会在另外什么地方跟着变。
react下载量高居不下的一个重要原因是它的react-native,一个优秀的移动端开发框架,使用react特有的jsx语法,可以让开发人员像写pc端页面那样去写移动端,它自动适配了不同的移动端的屏幕分辨率。jsx语法是将html融入到js中。虽然angular的ionic和vue的weex现在也可以进行移动端开发,不过最优秀的,最被大众认可的仍然是react-native。这是github上的下载量,可以看出来下载量远远超过其他两者
这里写图片描述
这里写图片描述
这里写图片描述
最后一点,react的最大优点就是state,所有的数据都储存在state中,只可以使用setState方法去改变。开发人员可以把所有的数据都存放在state中,让所有组件都去这里边取数据,当然如果组件过多的话会让顶级组件的state过重,这时可以将公用的放在顶级state中,各自私用的存放在自身的state中。这样在开发和维护的过程中只需要关注各个state就好。

下面来看react的缺点。
第一点,react的灵活性就导致了在选择上要耗费成本,确定使用框架的人要去考量这个项目有哪些功能,要用到哪些包还要去看哪些包的质量要高一些,因为相同的功能也会有很多开源人员贡献包。这些工作耗费的时间成本也是一个项目不得不考虑的问题。这一问题在vue上也同样存在
第二点,react的jsx语法,它学习起来并不是很难,应该是比ts要简单一些。但是它的写法是把html和js结合起来,这就导致在一些IDE上,你没法对它格式化,如果格式化的话,它会将html像js语法那种格式排列。代码的可读性要差一些。而且在js中写html时就要避免两者出现相同的关键字,比如class,在jsx中就要写成className,还要是驼峰式写法
第三点,使用redux,redux在处理数据流的时候是使用saga语法,开发人员要去学习saga的写法,然后saga的异步操作和同步操作是分开在两个函数中写,要在组件本身写一次,数据流到父组件时还要再写一遍,写法上要更复杂,如果想简化它,就要用一个前端应用框架-DVA,就还是通过加东西来增加开发效率。
最后是vue,vue的一个特点是每一个.vue文件都是一个组件,在这一个vue文件中包括style、scripts、template三个标签来包含css、js和html。它是最后一个出现的框架,所以在它的实现中,它取其他两个框架之长,去其他两个框架之短,借鉴了许多好的设计理念,比如angular的指令、双向绑定,react的component思想。
相比其他两个框架,vue是国产框架,所以它对国内开发者在学习它时要更友好。它的第一个优点,就是它的学习成本是三个框架中最低的。中文的api文档,我觉得单这一点,就让国内的开发者在学习vue时能够节省超多的精力。
它的vuex,完成了redux的功能且在写法上更加便捷,不再需要dva这种框架去帮他简便写法。
vue的体积是三个框架中最小的,加上它的处理机制,在非大型项目的对比中,它的性能是最高的。
其实无论再说哪些优点,归结起来就是:vue在非大型项目上,有了react和angular的优点,且更简单,更易上手。
vue的缺点同样也很明显。
首先相比其他两个,它是由个人团队开发和维护的,虽然个人的团队并不一定没有大厂的团队稳定,但总感觉个人团队对于维护vue这种用户越来越多的框架来说,还是存在着更大的风险。
第二个,由于vue的实现原理利用了es5中的一个方法,这就导致了,如果浏览器是不支持es5的,那么它只能放弃vue了。比如ie8
第三点,vue的响应系统无法检测属性的添加和删除,以及某些数组的修改,开发人员有时会忽略这一点。
第四点只能说是对比其他两个框架算是缺点,就是它毕竟发展的时间没有它们长,生态环境要更小,有时在开发中出现了问题,无法在网络上寻求到有效的帮助。
至此,三个框架的优缺点就基本介绍完了,最后简单总结一下。
就我个人认为,angular的缺点更明显、它难以调试的缺点更会影响一个项目在开发过程中的进度。vue较小的生态环境和少解决方案也让它在大型项目的开发中败给了react。所以我觉得react更适用在一个成规模的项目中去使用。
对于一个前端开发人员来说,框架或者库始终只是一个有助于开发的工具,无论使用哪个,都需要有扎实的js基础,将js掌握牢固是所有前端人员达成的共识,没有哪个框架是脱离它的,我们可以不使用框架,但是不能不用js,只要把它掌握好了,无论哪个框架都能够更加轻松的上手,不仅是使用它们,还包括了解他们的机制。甚至可以自己去封装一个库。
随着前端技术的不断发展,框架和库也越来越多,对于到底哪个才是最符合项目的,需要经验更加丰富,对框架和项目有更加深入的了解,这样才能够有一个更加可靠的决策。

※如果有代码展示就更好了,积累不够,贻笑大方

2017-09-15 08:09:33 victoryzn 阅读数 4428

原文地址:http://www.cnblogs.com/dadifeihong/p/6958337.html

我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结。无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划,你都有可能从学习这个主题中受益。

为了节省你的时间,提前做出如下声明:在哪个框架更好这个问题上,本文不会给你一个明确的答案。但是,不想其他类似主题的文章。我不能告诉你答案,是因为一项特定的技术是否适合你的开发环境和使用场景取决于多种因素。

由于不能直接回答这个问题,我们会尝试从其他的方面进行解释。我们将会通过对比 Angular(2+,不是老版本的AngularJS)和 React 来演示在两个类型相似的框架中,如何选择并调试适合自己环境的框架。你知道的,“授人以鱼不如授人以渔”。这样在以后,当这两者被更好的框架取代的时候,你能再次用同样的思路做出最优的选择。

开始

在选择任何工具之前,你都需要回答两个简单的问题:“它本身是好的工具吗?”,“它是否适合我的使用场景?”他们本身没有什么意义,所以你需要把这两个问题时刻放在脑海中。好吧,问题可能不是那么的简单,所以,我们尝试把他们分解成一些小的问题。

工具本身的问题:

  • 它的成熟度如何以及背后支持它的是谁?
  • 它有什么样的特性?
  • 它使用什么样的架构,开发范式,和模式?
  • 围绕它的生态圈怎么样?

自我反思的问题:

  • 我和我的同事能否轻松的学会如何使用它?
  • 它适合我的项目吗?
  • 它的开发体验怎么样?

用这一系列问题,你可以评估任何工具,而我们将以 Angular 和 React 为基础进行比较。

还有另外一件事我们需要说明。严格来说,拿 Angular 比较 React 不是完全公平的,因为 Angular 是一个成熟、功能完备的框架,而 React 只是一个 UI 组件库。为了弥补差距,我们谈论 React 的时候,包含了一些它经常使用的库。

完备性

作为一个熟练开发者的主要能力就是能够在旧技术和前沿技术之间保持平衡。惯例是,当采用还未成熟的新工具时,应注意一些风险:

  • 工具可能有缺陷并且不稳定
  • 它可能会被供应商意外的抛弃
  • 假设你需要帮助,可能没有一个大型的知识库或者成熟的社区

React 和 Angular 都有良好的出身,所以从这方面来看,我们是没必要担心的。

React

React 是由 Facebook 开发并维护的,并且用在了他们自己的产品线上, 包括 Instagram 和 WhatsApp. 它已经出现大约 3年半 了, 所以它已经不算新了。它也是Github上最流行的库之一 ,在撰写本文的时候,它大约有60,000多个 star。听起来不错。

Angular

Angular(2及以上)出现的比 React 晚一点,但是如果算上之前的版本 AngularJS,情况就反过来了。它主要由 Google 维护并且用在AdWords 和 Google Fiber 产品上,很明显他们对此很有信心,显然它不会短时间内消失。

特性

像前文提到的,Angular 比 React 多些开箱即用的特性。这是有两面性的,取决于你看待它的角度。 两者的核心功能是相似的:组件,数据绑定和平台无关的渲染

Angular

Angular 提供了很多现代 web 应用所需的开箱即用的特性。一些标准特性是:

  • 依赖注入
  • 以 HTML 的扩展版本为基础实现模板
  • 由 @angular/router 提供路由功能
  • 利用 @angular/http 实现 Ajax 请求
  • 利用 @angular/forms 创建表单
  • CSS 组件化
  • XSS 防御
  • 单元测试组件

当你自己不想花费时间去挑选类库的时候,有这么多开箱即用的特性是很方便的。 而这也意味着你被它们束缚在了一起,即使你不需要它们。并且,通常替换它们需要付出更多的努力。例如,考虑到依赖注入可以用引入来替代,我们相信使用它的小的项目相对于收益会付出更多的开销。

React

使用 React,你的入门更加简单。如果我们只看 React,那么只有:

  • 无依赖注入
  • JSX模板,通过 JavaScript 实现的类 XML 语言
  • XSS 防御
  • 单元测试组件

特性不多,未必不是好事。这意味着根据需求选择第三方类库的时候,你有更多的自由度。不好的是你不得不自己做出选择。经常与 React 一起使用的流行类库有:

我们拥有了选择类库时的自由。这让我们可以根据每个项目的特定需求来调整我们的技术栈,并且不会产生很高的学习成本。

语言、范式和模式

回顾一下两个框架的特性,让我来看一下有哪些流行的高级概念。

React

当研究 React 的时候,有一些重要的概念涌上心头:JSX,Flow,Redux

JSX

许多开发者对 JSX 持不同的看法:有的人喜欢它,有的人认为这是技术的巨大退步。不是遵循内容与逻辑分离的传统方法,React 决定用一种类 XML 语言把两者组合在一起放到组件中,这样你可以在 JavaScript 代码中直接编写内容标记。

虽然关于标记和逻辑混合写法这个话题是有争议的,但是它有一个明显的优势:静态分析。如果你的 JSX 标记中有错误,编译器不会保持沉默,它会报出这个错误。这能帮助我们立即发现拼写错误和其他一些愚蠢的错误。

Flow

Flow也是由 Facebook 开发的一款 JavaScript 的类型检查工具。它能解析代码并检查一些常规的类型错误,像隐式转换或空引用。

不像有着相似目的的 TypeScript,它不需要你迁移到一个新语言并且通过注释你的代码来进行类型检查。对 Flow 来说,类型注释是可选的,可以当做分析器的额外提示。如果你想用静态代码分析,但又不想重写已有的代码,对此而言 Flow 是一个不错的选择。

[扩展阅读: Writing Better JavaScript with Flow]

Redux

Redux 是一个清晰的管理状态变化的类库。它受 Flux 的启发,但是做了一些简化。Redux 的核心思想是用单个对象来代表应用的整个状态,该对象被叫做 reducers,通过函数实现。reducers 是纯函数,通过组件分别实现。这能更好的做到关注点与测试分离。

如果你正在做一个简单的项目,引入 Redux 可能会更加复杂,但是对中大型项目来说,它是一个很好的选择。这个类库变得非常流行,也可以用在 Angular 项目中实现。

所有的三项特性可以显著的增强你的开发体验:JSX 和 Flow 允许你快速的定位潜在错误,Redux 帮助你搭建一个整洁的项目架构。

Angular

Angular 也有一些有趣的东西,叫 TypeScript 和 RxJS。

TypeScript

TypeScript 是一门在 JavaScript 基础上,由微软开发的新语言。他是 ES2015 的超集,并且包含了JS语言即将到来的新版本的一些特性。你能用它替代 Babel 来编写最新的 JavaScript。它也提供了一个极其强大的类型检查系统,能够通过注释和类型推理静态分析你的代码。

还有一个相当微妙的优势。TypeScript 受 Java 和 .NET 的影响很深,所以如果开发者有那些语言背景,他们会发现 TypeScript 比原生 JavaScript 学起来更轻松(注意我们如何根据个人情况选择工具)。虽然 Angular 是第一个采用 TypeScript 的主要框架,但它和 React 用在一起,也是可行的。

[扩展阅读: An Introduction to TypeScript: Static Typing for the Web]

RxJS

RxJS 是一个响应式的编程类库,允许对异步的操作和事件做更加灵活的处理。它是利用函数式编程把观察者模式和迭代器模式混合的组合体。RxJS 允许你把一切都当做是一个连续的流值,并且在此之上实现各种各样的操作,像映射,过滤,拆分或合并。

该类库被 Angular 的 HTTP 模块采用,也在一些内部使用。当你执行一个 HTTP 请求,它返回一个 Observable 替代通常的 Promise。虽然这个库极其强大,但它也相当的复杂。想要精通它,你需要知道不同类型的 “观察者”,“主题” ,以及上百种方法和操作符。呀,这看起来只是执行 HTTP 请求的一点小工作。

当需要很多连续的数据流方面的工作的时候,比如 web sockets,在这种情况下 RxJS 是十分有用的,然而,这看起来仍然很复杂。无论如何,当使用 Angular 的时,你至少要对此要有基本的了解。

[扩展阅读: Introduction to Functional Reactive Programming with RxJS]

我们发现在提高项目的可维护性上,TypeScript 是一个强大的工具,尤其是那些代码量巨大或业务逻辑十分复杂的项目。用 TypeScript 写的代码更容易阅读与跟进。虽然 Angular 已经采用了 TypeScript,我们仍然希望更多的项目使用它。RxJS,换句话说,看起来只在特定情况下有用并且要小心使用。否则,它能给你的项目带去难以想象的复杂度。

生态圈

关于开源框架很重要的事情是围绕它而衍生出的工具数量。有时候,那些工具甚至比框架本身更有用。我们来看一下这两个框架最流行的工具和类库。

Angular

Angular 命令行工具

现代框架的流行趋势是通过一个命令行工具来帮助初始化项目,而不必亲自配置。Angular 的工具叫 Angular CLI。它允许通过一系列的命令来生成和启动项目。所有与创建应用,启开发环境,跑测试有关的脚本都被巧妙的隐藏在叫 node_modules 的文件夹中。你也能在开发期间通过它生成新的代码。这使得创建新项目十分的简单。

[扩展阅读: The Ultimate Angular CLI Reference]

Ionic 2

Ionic 2 是一款用来开发移动端混合应用的流行框架的新版本。它提供了一个完美集成了 Angular 2 的 Cordova 容器,和一个漂亮的组件库。通过它,可以轻松的创建移动端应用。如果相比原生应用更倾向于混合应用,那么它将是一个不错的选择。

Material design 组件

如果你钟爱于 material design,你可能很高兴听到 Material 组件库可以用于 Angular。虽然当前得到了诸多支持,但其仍然处于早期阶段并且有点简陋,所以,我们希望不久的将来能有所改善。

Angular universal

Angular universal 是一个种子项目,被用来创建支持服务端渲染的项目。

@ngrx/store

@ngrx/store 是受 Redux 启发,利用 pure reducers 基于状态突变,用于 Angular 状态管理的类库。通过集成 RxJS,可以利用变化侦测策略达到更好的性能。

[扩展阅读: Managing State in Angular 2 Apps with ngrx/store]

这里有更多的类库与工具 the Awesome Angular list.

React

Create react app

Create-react-app 是用于快速创建 React 项目的命令行工具。跟 Angular CLI 相似,它允许生成一个新项目,启动开发服务和打包。它用 Jest 做单元测试,一款来自于 Facebook 的比较新的测试工具,本身有一些好的特性。它也支持通过环境变量做灵活的应用分析,本地环境的后端代理,Flow,和其他特性。更多内容请查看 introduction to create-react-app

React Native

React Native 是由 Facebook 开发的,用 React 编写移动端原生应用的平台。不像提供混合应用的 Ionic,React Native 提供真正的原生界面。它提供了一套用于绑定原生控件的标准 React 组件。也允许使用Objective-C,Java 或 Swift等原生代码编写的组件绑定到它们上。

Material UI

同样,这是用于 React 的 material design 组件库。跟 Angular 的版本相比,这个更加成熟并且已经有很多可用的组件。

Next.js

Next.js 是用于 React 应用在服务端渲染的框架。它提供了一个灵活的方式在服务端全部或部分渲染应用,返回结果给客户端并继续保持在浏览器中。它尝试完成一项复杂的任务,尽可能简单的创建一个通用应用,所以设置也被设计的尽可能简单。

MobX

MobX 是一个管理应用状态的可选库。代替在一个单一稳定的仓库中保存状态,就像 Redux 所做的,它鼓励你尽量存储所必须的最小状态并且推导出剩下的。它提供了一套修饰符来定义可见性和观察者和介绍状态的逻辑变化。

[扩展阅读: How to Manage Your JavaScript Application State with MobX]

Storybook

Storybook 是 React 的组件开发环境。它允许快速的创建单个应用来展示你的组件。在此基础上,它还提供了许多组件来记录,开发,测试和设计你的组件。在应用的其他部分,我们发现它在独立开发组件上是极其有用的。在上一篇文章中,你能学到 关于 Storybook 的更多知识

这里有更多的类库与工具 the Awesome React list.

接受度,学习曲线和开发体验

选择一项新技术的重要标准就是学习它有多么的容易。当然,答案取决于很多因素,比如你之前的经验,熟悉相关的概念和模式。不管怎样,给定一个框架我们仍然能评估必须学习的新东西的数量。现在,我们假设你已经了解 ES6+,构建工具和所有的这些,让我们看看你还必须要理解什么。

React

使用 React 遇到的第一个障碍就是 JSX。对有些开发者而言,它写起来颇为棘手,然而,它并没有增加太多的复杂性;就像真正的 JavaScript 表达式,和特殊的类 HTML 语法。你也需要学习如何编写组件,用属性来配置和管理内部状态。你不需要学习任何新的逻辑结构与循环,因为所有的这些都是原生 JavaScript。

官方教程是入门 React 的优秀资源。一旦你完成了它,那么开始熟悉路由。React 路由 v4 版本可能有一些复杂和特别,但无需担心。使用 Redux 需要转变范式,学会利用类库建议的方式完成已经熟悉的任务。免费视频教程 Getting Started with Redux 能够帮助你快速熟悉一些核心概念。根据项目的大小和复杂度你可能不得不寻找和学习一些额外的类库,这可能是比较棘手的部分,但在这之后,一切都会顺风顺水。

我们很惊喜入门 React 是如此的简单。甚至有后端经验和前端经验有限的人都能快速上手。有完善清晰的错误提示,并且提供了如何解决潜在问题的解释说明。最难的部分可能就是为所需功能寻找合适的类库,但构建和开发一个应用真的十分简单。

Angular

学习 Angular 需要比 React 了解更多的概念。首先,你需要熟悉 TypeScript。对于有静态类型语言像 Java 或 .NET 使用经验的开发者来说要比 JavaScript 更好理解,但对纯 JavaScript 开发者而言,可能需要付出一些努力。

框架背身就有很多主题需要学习,从基础的开始像模块、依赖注入、装饰器、组件、服务、管道、模板和指令,到高级主题像变化侦测、区块、AoT编译和 RxJS。这些此文档中都可以找到。RxJS 本身就是很繁重的主题,在官方网站上有更多的描述。虽然从基础水平上使用它比较容易,但要使用高级主题会十分的复杂。

总而言之,我们注意到使用 Angular 要比 React 难得多。眼花缭乱的新概念对新手来讲十分的困惑。即使你已经入门了,你也需要时刻注意像 RxJS 订阅管理,变化侦测性能和未知的东西(是的,这是来自文档实际建议)。我们会经常遇到难以理解的错误信息,所以不得不经常检索它们并祈求得到一个精准的匹配。

这看起来好像我们更倾向于 React,的确是。结合我们利用同样大小和复杂度的 Angular 和 React 项目,对新手开发者进行培训的经验,React 更加的顺滑。但是,像我之前所说的,这取决于多种因素,可能对你来说会有所不同。

契合度

你可能已经注意到每个框架都有它本身一系列的功能,有好的也有坏的。但在特定环境外的分析已经完成并且没能在选择哪个框架上给出答案。为了做出决定,你不得不从你自己项目的角度来考查它。这些事情需要你自己来做。

现在,结合你的项目试着回答下面这些问题,顺便想想是否符合关于这两个框架你已经学到的特性。列表可能还不完全,但是应该够开始讨论了:

  1. 项目有多大?
  2. 要维护多久?
  3. 所有的功能都被提前定义好还是你希望灵活一些?
  4. 如果所有的特性已经明确,你需要什么功能?
  5. 应用场景和业务逻辑是否复杂?
  6. 针对哪些平台?Web端,移动端,桌面端?
  7. 是否需要服务端渲染? SEO 重要么?
  8. 是否需要处理许多实时事件流?
  9. 你的团队有多大?
  10. 开发者的经验和他们的知识背景如何?
  11. 是否有一些你想用的现成组件库?

如果你打算启动一个大项目,你可能想最小化做出不当选择的风险,首先考虑做一个概念性的验证产品。使用框架,通过简单方式,试着实现项目的一些关键特性。这通常不会花费你太多的时间,但会给你一些有价值的经验来验证关键技术需求。如果你对结果满意,你可以继续进行完整的开发。如果不满意,从长远来看其实节省了你的时间。

一招绝?

一旦你为你的项目选择了一个框架,你将会在接下来的项目中忍不住的想用同样的技术栈。不要这样。虽然保持技术栈统一是一个不错的注意,但不要总是使用同样的方法。每一个项目开始之前,花点时间再回答一遍上面的问题。可能对下个项目而言,答案就不一样了。另外,如果你想用不熟悉的技术栈做一个小项目,做吧。这些经历会带给你宝贵的经验。开放你的思维,并且从错误中不断学习。在某一点,一项特定的技术会让你自然而然的觉得正确。

此文由同行 Jurgen Van de Moere 和 Joan Yin 校对. 谢谢 SitePoint 所有的校对人员,你们让 SitePoint 的内容更加的优秀!

2018-08-28 11:30:03 ladymorgana 阅读数 10324

推荐使用:Vue.js > ReactJS > Angular 2 > AngularJS

 

 

概要:

现在, Vue 还没有 React (由 Facebook 维护) 或者 Angular 2 (受到 Google 的支持) 流行。不过,许多开发者都已经转向 Vue 了。Laravel 社区也在考虑将它作为可选用的前端框架之一。

总之,Vue 给 React & Angular 的弊病提供了一道良方,为你提供了一种更加简单和轻松的方法来编写代码。

满意度对比:

Hacker News (https://news.ycombinator.com/item?id=15999688)

前端框架 / 满意度

2016

2017

React

91%

93%

Vue 

91%

91%

Angular 2

65%

66%

Angular

40%

33%

                

1.首先,我们先了解什么是MVX框架模式?

      MVX框架模式:MVC+MVP+MVVM

      1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。

      2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。

      3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。

2.使用MVVM好处:

  1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。  
  2. 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
  3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
  4. 可试性。可以针对ViewModel来对界面(View)进行测试。可以针对ViewModel来对界面(View)进行测试  


3.Vue.js是什么?

看到了上面的框架模式介绍,我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢?

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue.js的特性如下:

1.轻量级的框架,易用

2.双向数据绑定

3.指令化

4.组件化

4.与angularjs的区别

    相同点:

都支持指令:内置指令和自定义指令。

都支持过滤器:内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

    不同点:

      1.更简单易用

AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

      2. 更灵活

比起 Angular更少专制,它能然你按照自己想要的方式构建应用,而非凡事非得 Angular 框架必须如此如此

      3.性能更突出

AngularJS依赖对数据做脏检查,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所

有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要

运行多次。 
Vue依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖

关系。唯一需要做的优化是在 v-for 上使用 track-by。做甚是2.0吸取的react的虚拟DOM的特性。

对于庞大的应用来说,这个优化差异还是比较明显的。

5.与React的区别

    相同点:

react采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,

两者都需要编译后使用。

中心思想相同:一切都是组件,组件实例之间可以嵌套。

都提供合理的钩子函数,可以让开发者定制化地去处理需求。

都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

在组件开发中都支持mixins的特性。

    不同点:

      1.性能更好:

Vue性能上更有优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些,整体大小比react.js更小更轻便

      2.更易学更简单: 
react.JS 彩用SX语法,对语大部分工程师入手比较困难,需要要大量的时间去学习适应这种新语法的形式,vue采用DOM模板的方法,易看易用

      3.优化更好:

在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。 然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的负担。

Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。

综上所述,在VUE.20更新以后。它更是吸取了 React 和 Angular 的教训,同时也吸收了它们的成功之处。我们看到的 Vue.js 是轻量级且容易学习掌握的新型mvvm框架。


Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

2018-08-10 14:19:58 weixin_41646716 阅读数 8679

一些历史

Angular 是基于 TypeScript 的 Javascript 框架。由 Google 进行开发和维护,它被描述为“超级厉害的 JavaScript MVW 框架”。Angular(也被称为 “Angular 2+”,“Angular 2” 或者 “ng2”)已被重写,是与 AngularJS(也被称为 “Angular.js” 或 “AngularJS 1.x”)不兼容的后续版本。当 AngularJS(旧版本)最初于2010年10月发布时,仍然在修复 bug,等等 —— 新的 Angular(sans JS)于 2016 年 9 月推出版本 2。最新的主版本是 4,因为版本 3 被跳过了。Google,Vine,Wix,Udemy,weather.com,healthcare.gov 和 Forbes 都使用 Angular(根据 madewithangularstacksharelibscore.com 提供的数据)。

React 被描述为 “用于构建用户界面的 JavaScript 库”。React 最初于 2013 年 3 月发布,由 Facebook 进行开发和维护,Facebook 在多个页面上使用 React 组件(但不是作为单页应用程序)。根据 Chris Cordle 这篇文章的统计,React 在 Facebook 上的使用远远多于 Angular 在 Google 上的使用。React 还被 Airbnb,Uber,Netflix,Twitter,Pinterest,Reddit,Udemy,Wix,Paypal,Imgur,Feedly,Stripe,Tumblr,Walmart 等使用(根据 Facebook, stacksharelibscore.com 提供的数据)。

Facebook 正在开发 React Fiber。它会改变 React 的底层 - 渲染速度应该会更快 - 但是在变化之后,版本会向后兼容。Facebook 将会在 2017 年 4 月的开发者大会上讨论新变化,并发布一篇非官方的关于新架构的文章。React Fiber 可能与 React 16 一起发布。

Vue 是 2016 年发展最为迅速的 JS 框架之一。Vue 将自己描述为一款“用于构建直观,快速和组件化交互式界面的 MVVM 框架”。它于 2014 年 2 月首次由 Google 前员工 Evan You 发布(顺便说一句:尤雨溪那时候发表了一篇 vue 发布首周的营销活动和数据的博客文章)。尤其是考虑到 Vue 在没有大公司的支持的情况下,作为一个人开发的框架还能获得这么多的吸引力,这无疑是非常成功的。尤雨溪目前有一个包含数十名核心开发者的团队。2016 年,版本 2 发布。Vue 被阿里巴巴,百度,Expedia,任天堂,GitLab 使用 — 可以在 madewithvuejs.com 找到一些小型项目的列表。

Angular 和 Vue 都遵守 MIT license 许可,而 React 遵守 BSD3-license 许可证。在专利文件上有很多讨论。James Ide(前 Facebook 工程师)解释专利文件背后的原因和历史:Facebook 的专利授权是在保护自己免受专利诉讼的能力的同时分享其代码。专利文件被更新了一次,有些人声称,如果你的公司不打算起诉 Facebook,那么使用 React 是可以的。你可以在 Github 的这个 issue 上 查看讨论。我不是律师,所以如果 React 许可证对你或你的公司有问题,你应该自己决定。关于这个话题还有很多文章:Dennis Walsh 写到,你为什么不该害怕Raúl Kripalani 警告:反对创业公司使用 React,他还写了一篇备忘录概览。此外,Facebook 上还有一个最新的声明:解释 React 的许可证

核心开发

如前所述,Angular 和 React 得到大公司的支持和使用。Facebook,Instagram 和 WhatsApp 正在它们的页面使用 React。Google 在很多项目中使用 Angular,例如,新的 Adwords 用户界面是使用 Angular 和 Dart。然而,Vue 是由一群通过 Patreon 和其他赞助方式支持的个人实现的,是好坏你自己确定。Matthias Götzke 认为 Vue 小团队的好处是用了更简洁和更少的过度设计的代码或 API

我们来看看一些统计数据:Angular 在团队介绍页列出 36 人,Vue 列出 16 人,而 React 没有团队介绍页。在 Github 上,Angular 有 25,000+ 的 star 和 463 位代码贡献者,React 有 70,000+ 的 star 和 1,000+ 位代码贡献者,而 Vue 有近 60,000 的 star 和只有 120 位代码贡献者。你也可以查看 Angular,React 和 Vue 的 Github Star 历史。又一次说明 Vue 的趋势似乎很好。根据 bestof.js 提供的数据显示,在过去三个月 Angular 2 平均每天获得 31 个 star,React 74 个,Vue.JS 107 个。

 

Angular,React 与 Due 的 Github Star 历史 (数据来源)

Angular,React 与 Due 的 Github Star 历史 (数据来源)

 

数据来源

更新: 感谢 Paul Henschel 提出的 npm 趋势。npm 趋势显示了 npm 包的下载次数,相对比单独地看 Github star 更有用:

 

在过去 2 年,npm 包的下载次数

在过去 2 年,npm 包的下载次数

 

市场生命周期

由于各种名称和版本,很难在 Google 趋势中比较 Angular,React 和 Vue。一种近似的方法可以是“互联网与技术”类别中的搜索。结果如下:

 

 

 

Vue 没有在 2014 年之前创建 - 所以这里有什么不对劲。La Vue是法语的 “view” ,“sight” 或 “opinion”。也许就是这样。“VueJS” 和 “Angular” 或 “React” 的比较也是不公平的,因为 VueJS 几乎没有搜索到任何结果。

那我们试试别的吧。ThoughtWorks 的 Technology Radar 技术随时间推移的变化。ThoughtWorks 的 Technology Radar 随着时间推移,技术的演进过程给人深刻的印象。Redux 是在采用阶段(被 ThoughtWorks 项目采用的!),它在许多 ThoughtWorks 项目中的价值是不可估量的。Vue.js 是在试用阶段(被试着用的)。Vue被描述为具有平滑学习曲线的,轻量级并具灵活性的Angular的替代品。Angular 2 是正在处于评估阶段 使用 —— 已被 ThoughtWork 团队成功实践,但是还没有被强烈推荐。

根据 2017 年 Stackoverflow 的最新调查,被调查的开发者中,喜爱 React 有 67%,喜欢 AngularJS 的有 52%。“没有兴趣在开发中继续使用”的开发者占了更高的数量,AngularJS(48%)和 React(33%)。在这两种情况下,Vue 都不在前十。然后是 statejs.com 关于比较 “前端框架” 的调查。最有意思的事实是:React 和 Angular 有 100% 的认知度,23% 的受访者不了解 Vue。关于满意度,92% 的受访者愿意“再次使用” React ,Vue 有 89% ,而 Angular 2 只有 65%。

客户满意度调查呢?Eric Elliott 于 2016 年 10 月开始评估 Angular 2 和 React。只有 38% 的受访者会再次使用 Angular 2,而 84% 的人会再次使用 React。

长期支持和迁移

Facebook 在其设计原则中指出,React API 非常稳定。还有一些脚本可以帮助你从当前的API移到更新的版本:请查阅 react-codemod。迁移是非常容易的,没有这样的东西(需要)作为长期支持的版本。在 Reddit 这篇文章中指出,人们看到到升级从来不是问题。React 团队写了一篇关于他们版本控制方案的博客文章。当他们添加弃用警告时,在下一个主要版本中的行为发生更改之前,他们会保留当前版本的其余部分。没有计划更改为新的主要版本 - v14 于 2015 年 10 月发布,v15 于 2016 年 4 月发布,而 v16 还没有发布日期。(译者注:v16 于 2017 年 9 月底发布)最近 React核心开发人员指出,升级不应该是一个问题。

关于 Angular,从 v2 发布开始,有一篇关于版本管理和发布 Angular 的博客文章。每六个月会有一次重大更新,至少有六个月的时间(两个主要版本)。在文档中有一些实验性的 API 被标记为较短的弃用期。目前还没有官方公告,但根据这篇文章,Angular 团队已经宣布了以 Angular 4 开始的长期支持版本。这些将在下一个主要版本发布之后至少一年得到支持。这意味着至少在 2018 年 9 月之前,将支持 Angular 4,并提供 bug 修复和重要补丁。在大多数情况下,将 Angular 从 v2 更新到 v4 与更新 Angular 依赖关系一样简单。Angular 还提供了有关是否需要进一步更改的信息指南

Vue 1.x 到 2.0 的更新过程对于一个小应用程序来说应该很容易 - 开发者团队已经声称 90% 的 API 保持不变。在控制台上有一个很好的升级 - 诊断迁移 - 辅助工具。一位开发人员指出,从 v1 到 v2 的更新在大型应用程序中仍然没有挑战。不幸的是,关于 LTS 版本的下一个主要版本或计划信息没有清晰的(公共)路径。

还有一件事:Angular 是一个完整的框架,提供了很多捆绑在一起的东西。React 比 Angular 更灵活,你可能会使用更多独立的,不稳定的,快速更新的库 - 这意味着你需要自己维护相应的更新和迁移。如果某些包不再被维护,或者其他一些包在某些时候成为事实上的标准,这也可能是不利的。

人力资源与招聘

如果你的团队有不需要了解更多 Javascript 技术的 HTML 开发人员,则最好选择 Angular 或 Vue。React 需要了解更多的 JavaScript 技术(我们稍后再谈)。

你的团队有工作时可以敲代码的设计师吗?Reddit 上的用户 “pier25” 指出,如果你在 Facebook 工作,每个人都是一个资深开发者,React 是有意义的。然而事实上,你不会总是找到一个可以修改 JSX 的设计师,因此使用 HTML 模板将会更容易。

Angular 框架的好处是来自另一家公司的新的 Angular 2 开发人员将很快熟悉所有必要的约定。React 项目在架构决策方面各不相同,开发人员需要熟悉特定的项目设置。

如果你的开发人员具有面向对象的背景或者不喜欢 Javascript,Angular 也是很好的选择。为了推动这一点,这里是 Mahesh Chand 引述

我不是一个 JavaScript 开发人员。我的背景是使用 “真正的” 软件平台构建大型企业系统。我从 1997 年开始使用 C,C ++,Pascal,Ada 和 Fortran 构建应用程序。(...)我可以清楚地说,JavaScript 对我来说简直是胡言乱语。作为 Microsoft MVP 和专家,我对 TypeScript 有很好的理解。我也不认为 Facebook 是一家软件开发公司。但是,Google 和微软已经是最大的软件创新者。我觉得使用 Google 和微软强大支持的产品会更舒服。另外(...)与我的背景,我知道微软对 TypeScript 有更宏伟的蓝图。

emmmmmmmm...... 我应该提到的,Mahesh 是微软的区域总监。

React,Angular 和 Vue 的比较

组件

我们所讨论的框架都是基于组件的。一个组件得到一个输入,并且在一些内部的行为/计算之后,它返回一个渲染的 UI 模板(一个登录/注销区或一个待办事项列表项)作为输出。定义的组件应该易于在网页或其他组件中重用。例如,你可以使用具有各种属性(列,标题信息,数据行等)的网格组件(由一个标题组件和多个行组件组成),并且能够在另一个页面上使用具有不同数据集的组件。这里有一篇关于组件的综合性文章,如果你想了解更多这方面的信息。

React 和 Vue 都擅长处理组件:小型的无状态的函数接收输入和返回元素作为输出。

Typescript,ES6 与 ES5

React 专注于使用 Javascript ES6。Vue 使用 Javascript ES5 或 ES6。

Angular 依赖于 TypeScript。这在相关示例和开源项目中提供了更多的一致性(React 示例可以在 ES5 或 ES6 中找到)。这也引入了像装饰器和静态类型的概念。静态类型对于代码智能工具非常有用,比如自动重构,跳转到定义等等 - 它们也可以减少应用程序中的错误数量,尽管这个话题当然没有共识。Eric Elliott 在他的文章 “静态类型的令人震惊的秘密” 中不同意上面的观点。Daniel C Wang 表示,使用静态类型并没有什么坏处,同时有测试驱动开发(TDD)和静态类型挺好的。

你也应该知道你可以使用 Flow 在 React 中启用类型检查。这是 Facebook 为 JavaScript 开发的静态类型检查器。Flow 也可以集成到 VueJS 中

如果你在用 TypeScript 编写代码,那么你不需要再编写标准的 JavaScript 了。尽管它在不断发展,但与整个 JavaScript 语言相比,TypeScript 的用户群仍然很小。一个风险可能是你正在向错误的方向发展,因为 TypeScript 可能 - 也许不太可能 - 随着时间的推移也会消失。此外,TypeScript 为项目增加了很多(学习)开销 - 你可以在 Eric ElliottAngular 2 vs. React 比较 中阅读更多关于这方面的内容。

更新: James Ravenscroft 在对这篇文章的评论中写道,TypeScript 对 JSX 有一流的支持 - 可以无缝地对组件进行类型检查。所以,如果你喜欢 TypeScript 并且你想使用 React,这应该不成问题。

模板 —— JSX 还是 HTML

React 打破了长期以来的最佳实践。几十年来,开发人员试图分离 UI 模板和内联的 Javascript 逻辑,但是使用 JSX,这些又被混合了。这听起来很糟糕,但是你应该听彼得·亨特(Peter Hunt)的演讲 “React:反思最佳实践”(2013 年 10 月)。他指出,分离模板和逻辑仅仅是技术的分离,而不是关注的分离。你应该构建组件而不是模板。组件是可重用的、可组合的、可单元测试的。

JSX 是一个类似 HTML 语法的可选预处理器,并随后在 JavaScript 中进行编译。JSX 有一些怪癖 —— 例如,你需要使用 className 而不是 class,因为后者是 Javascript 的保留字。JSX 对于开发来说是一个很大的优势,因为代码写在同一个地方,可以在代码完成和编译时更好地检查工作成果。当你在 JSX 中输入错误时,React 将不会编译,并打印输出错误的行号。Angular 2 在运行时静默失败(如果使用 Angular 中的预编译,这个参数可能是无效的)。

JSX 意味着 React 中的所有内容都是 Javascript -- 用于JSX模板和逻辑。Cory House2016 年 1 月的文章 中指出:“Angular 2 继续把 'JS' 放到 HTML 中。React 把 'HTML' 放到 JS 中。“这是一件好事,因为 Javascript 比 HTML 更强大。

Angular 模板使用特殊的 Angular 语法(比如 ngIf 或 ngFor)来增强 HTML。虽然 React 需要 JavaScript 的知识,但 Angular 会迫使你学习 Angular 特有的语法

Vue 具有“单个文件组件”。这似乎是对于关注分离的权衡 - 模板,脚本和样式在一个文件中,但在三个不同的有序部分中。这意味着你可以获得语法高亮,CSS 支持以及更容易使用预处理器(如 Jade 或 SCSS)。我已经阅读过其他文章,JSX 更容易调试,因为 Vue 不会显示不规范 HTML 的语法错误。这是不正确的,因为 Vue 转换 HTML 来渲染函数 - 所以错误显示没有问题(感谢 Vinicius Reis 的评论和更正!)。

旁注:如果你喜欢 JSX 的思路,并想在 Vue 中使用它,可以使用 babel-plugin-transform-vue-jsx

框架和库

Angular 是一个框架而不是一个库,因为它提供了关于如何构建应用程序的强有力的约束,并且还提供了更多开箱即用的功能。Angular 是一个 “完整的解决方案” - 功能齐全,你可以愉快的开始开发。你不需要研究库,路由解决方案或类似的东西 - 你只要开始工作就好了。

另一方面,React 和 Vue 是很灵活的。他们的库可以和各种包搭配。(在 npm 上有很多 React 的包,但 Vue 的包比较少,因为毕竟这个框架还比较新)。有了 React,你甚至可以交换库本身的 API 兼容替代品,如 Inferno。然而,灵活性越大,责任就越大 - React 没有规则和有限的指导。每个项目都需要决定架构,而且事情可能更容易出错。

另一方面,Angular 还有一个令人困惑的构建工具,样板,检查器(linter)和时间片来处理。如果使用项目初始套件或样板,React 也是如此。他们自然是非常有帮助的,但是 React 可以开箱即用,这也许是你应该学习的方式。有时,在 JavaScript 环境中工作要使用各种工具被称为 “Javascript 疲劳症”。Eric Clemmons 在他的文章 中说:

当开始使用框架,还有一堆安装的工具,你可能会不习惯。这些都是框架生成的。很多开发人员不明白,框架内部发生了什么 —— 或者需要花费很多时间才能搞明白。

Vue 似乎是三个框架中最轻量的。GitLab 有一篇关于 Vue.js(2016 年 10 月)的决定的博客文章

Vue.js 完美的兼顾了它将为你做什么和你需要做什么。(...)Vue.js 始终是可及的,一个坚固,但灵活的安全网,保证编程效率和把操作 DOM 造成的痛苦降到最低。

他们喜欢简单易用 —— 源代码非常易读,不需要任何文档或外部库。一切都非常简单。Vue.js “对任何东西都不做大的假设”。还有一个关于 GitLab 决定的播客节目

另一个来自 Pixeljets 的关于向 Vue 转变的博文。React “是 JS 界在意识层面向前迈出的一大步,它以一种实用简洁的方式向人们展示了真正的函数式编程。和 Vue 相比,React 的一大缺点是由于 JSX 的限制,组件的粒度会更小。这里是文章的引述:

对于我和我的团队来说,代码的可读性是很重要的,但编写代码很有趣也是非常重要的。在实现真正简单的计算器小部件时创建 6 个组件并不奇怪。在许多情况下,在维护,修改或对某个小部件进行可视化检查方面也是不好的,因为你需要绕过多个文件/函数并分别检查每个小块的 HTML。再次,我不是建议写巨石 - 我建议在日常开发中使用组件而不是微组件。

关于 Hacker newsReddit 上的博客文章有趣的讨论 - 有来自 Vue 的持异议者和进一步支持者的争论。

状态管理和数据绑定

构建用户界面很困难,因为处处都有状态 - 随着时间的推移而变化的数据带来了复杂性。定义的状态工作流程对于应用程序的增长和复杂性有很大的帮助。对于复杂度不大的应用程序,就不必定义的状态流了,像原生 JS 就足够了。

它是如何工作的?组件在任何时间点描述 UI。当数据改变时,框架重新渲染整个 UI 组件 - 显示的数据始终是最新的。我们可以把这个概念称为“ UI 即功能”。

React 经常与 Redux 在一起使用。Redux 以三个基本原则来自述:

  • 单一数据源(Single source of truth)
  • State 是只读的(State is read-only)
  • 使用纯函数执行修改(Changes are made with pure functions)

换句话说:整个应用程序的状态存储在单个 store 的状态树中。这有助于调试应用程序,一些功能更容易实现。状态是只读的,只能通过 action 来改变,以避免竞争条件(这也有助于调试)。编写 Reducer 来指定如何通过 action 来转换 state。

大多数教程和样板文件都已经集成了 Redux,但是如果没有它,你可以使用 React(你可能不需要在你的项目中使用 Redux)。Redux 在代码中引入了复杂性和相当强的约束。如果你正在学习React,那么在你要使用 Redux 之前,你应该考虑学习纯粹的 React。你绝对应该阅读 Dan Abramov 的“你可能不需要 Redux”。

有些开发人员 建议使用 Mobx 代替 Redux。你可以把它看作是一个 “自动的 Redux”,这使得事情一开始就更容易使用和理解。如果你想了解,你应该从介绍开始。你也可以阅读 Robin 的 Redux 和 MobX 的比较。他还提供了有关从 Redux 迁移到 MobX 的信息。如果你想查找其他 Flux 库,这个列表非常有用。如果你是来自 MVC 的世界,那么你应该阅读 Mikhail Levkovsky 的文章“Redux 中的思考(当你所知道的是 MVC)”。

Vue 可以使用 Redux,但它提供了 Vuex 作为自己的解决方案。

React 和 Angular 之间的巨大差异是 单向与双向绑定。当 UI 元素(例如,用户输入)被更新时,Angular 的双向绑定改变 model 状态。React 只有一种方法:先更新 model,然后渲染 UI 元素。Angular 的方式实现起来代码更干净,开发人员更容易实现。React 的方式会有更好的数据总览,因为数据只能在一个方向上流动(这使得调试更容易)。

这两个概念各有优劣。你需要了解这些概念,并确定这是否会影响你选择框架。文章“双向数据绑定:Angular 2 和 React”和这个 Stackoverflow 上的问题都提供了一个很好的解释。在这里你可以找到一些交互式的代码示例(3 年前的示例(,只适用于 Angular 1 和 React)。最后,Vue 支持单向绑定和双向绑定(默认为单向绑定)。

如果你想进一步阅读,这有一篇长文,是有关状态的不同类型和 Angular 应用程序中的状态管理Victor Savkin)。

其他的编程概念

Angular 包含依赖注入(dependency injection),即一个对象将依赖项(服务)提供给另一个对象(客户端)的模式。这导致更多的灵活性和更干净的代码。文章 “理解依赖注入” 更详细地解释了这个概念。

模型 - 视图 - 控制器模式(MVC)将项目分为三个部分:模型,视图和控制器。Angular(MVC 模式的框架)有开箱即用的 MVC 特性。React 只有 V —— 你需要自己解决 M 和 C。

灵活性与精简到微服务

你可以通过仅仅添加 React 或 Vue 的 JavaScript 库到你的源码中的方式去使用它们。但是由于 Angular 使用了 TypeScript,所以不能这样使用 Angular。

现在我们正在更多地转向微服务和微应用。React 和 Vue 通过只选择真正需要的东西,你可以更好地控制应用程序的大小。它们提供了更灵活的方式去把一个老应用的一部分从单页应用(SPA)转移到微服务。Angular 最适合单页应用(SPA),因为它可能太臃肿而不能用于微服务。

正如 Cory House 所说:

JavaScript 发展速度很快,而且 React 可以让你将应用程序的一小部分替换成更好用的 JS 库,而不是期待你的框架能够创新。小巧,可组合的单一用途工具的理念永远不会过时

有些人对非单页的网站也使用 React(例如复杂的表单或向导)。甚至 Facebook 都没有把 React 用在 Facebook 的主页,而是用在特定的页面,实现特定的功能。

体积和性能

任何框架都不会十全十美:Angular 框架非常臃肿。gzip 文件大小为 143k,而 Vue 为 23K,React 为 43k。

为了提高性能,React 和 Vue 都使用了虚拟 DOM(Virtual DOM)。如果你对此感兴趣,可以阅读虚拟 DOM 和 DOM 之间的差异以及 react.js 中虚拟 DOM 的实际优势。此外,虚拟 DOM 的作者之一在 Stackoverflow 上回答了性能的相关问题

为了检查性能,我看了一下最佳的 js 框架基准。你可以自己下载并运行它,或者查看交互式结果表

 

 

 

Angular,React 和 Vue 性能比较(源文件

 

 

 

内存分配(源文件

总结一下:Vue 有着很好的性能和高深的内存分配技巧。如果比较快慢的话,这些框架都非常接近(比如 Inferno)。请记住,性能基准只能作为考虑的附注,而不是作为判断标准。

测试

Facebook 使用 Jest 来测试其 React 代码。这里有篇 Jest 和 Mocha 之间的比较的文章 —— 还有一篇关于 Enzyme 和 Mocha 如何一起使用 的文章。Enzyme 是 Airbnb 使用的 JavaScript 测试工具(与 Jest,Karma 和其他测试框架一起使用)。如果你想了解更多,有一些关于在 React(这里这里)测试的旧文章。

Angular 2 中使用 Jasmine 作为测试框架。Eric Elliott 在一篇文章中抱怨说 Jasmine “有数百种测试和断言的方式,需要仔细阅读每一个,来了解它在做什么”。输出也是非常臃肿和难以阅读。有关 Angular 2 与 KarmaMocha 的整合的一些有用的文章。这里有一个关于 Angular 2 测试策略的旧视频(从2015年起)。

Vue 缺乏测试指导,但是 Evan 在 2017 年的展望中写道,团队计划在这方面开展工作。他们推荐使用 KarmaVue 和 Jest 结合使用,还有 avoriaz 作为测试工具

通用与原生 app

通用 app 正在将应用程序引入 web、搬上桌面,同样将深入原生 app 的世界。

React 和 Angular 都支持原生开发。Angular 拥有用于原生应用的 NativeScript(由 Telerik 支持)和用于混合开发的 Ionic 框架。借助 React,你可以试试 react-native-renderer 来构建跨平台的 iOS 和 Android 应用程序,或者用 react-native 开发原生 app。许多 app(包括 Facebook;查看更多的展示)都是用 react-native 构建的。

Javascript 框架在客户端上渲染页面。这对于性能,整体用户体验和 SEO 是不利的。服务器端预渲染是一个好办法。所有这三个框架都有相应的库来实现服务端渲染。React 有 next.js,Vue 有 nuxt.js,而 Angular 有...... Angular Universal

学习曲线

Angular 的学习曲线确实很陡。它有全面的文档,但你仍然可能被吓哭,因为说起来容易做起来难。即使你对 Javascript 有深入的了解,也需要了解框架的底层原理。去初始化项目是很神奇的,它会引入很多的包和代码。因为有一个大的,预先存在的生态系统,你需要随着时间的推移学习,这很不利。另一方面,由于已经做出了很多决定,所以在特定情况下可能会很好。对于 React,你可能需要针对第三方库进行大量重大决策。仅仅 React 中就有 16 种不同的 flux 软件包来用于状态管理可供选择。

Vue 学习起来很容易。公司转向 Vue 是因为它对初级开发者来说似乎更容易一些。这里有一片说他们团队为什么从 Angular 转到 Vue的文章。另一位用户表示,他公司的 React 应用程序非常复杂,以至于新开发人员无法跟上代码。有了 Vue,初级和高级开发人员之间的差距缩小了,他们可以更轻松地协作,减少 bug,减少解决问题的时间。

有些人说他们用 React 做的东西比用 Vue 做的更好。如果你是一个没有经验的 Javascript 开发人员 - 或者如果你在过去十年中主要使用 jQuery,那么你应该考虑使用 Vue。转向 React 时,思维方式的转换更为明显。Vue 看起来更像是简单的 Javascript,同时也引入了一些新的概念:组件,事件驱动模型和单向数据流。这同样是很小的部分。

同时,Angular 和 React 也有自己的实现方式。它们可能会限制你,因为你需要调整自己的做法,才能顺畅的开发。这可能是一个缺点,因为你不能随心所欲,而且学习曲线陡峭。这也可能是一个好处,因为你在学习技术时必须学习正确的概念。用 Vue,你可以用老方法来做。这一开始可能会比较容易上手,但长此以往会出现问题。

在调试方面,React 和 Vue 的黑魔法更少是一个加分项。找出 bug 更容易,因为需要看的地方少了,堆栈跟踪的时候,自己的代码和那些库之间有更明显的区别。使用 React 的人员报告说,他们永远不必阅读库的源代码。但是,在调试 Angular 应用程序时,通常需要调试 Angular 的内部来理解底层模型。从好的一面来看,从 Angular 4 开始,错误信息应该更清晰,更具信息性。

Angular, React 和 Vue 底层原理

你想自己阅读源代码吗?你想看看事情到底是怎么样的吗?

可能首先要查看 Github 仓库: React(github.com/facebook/re…)、Angular(github.com/angular/ang…)和 Vue(github.com/vuejs/vue)。

语法看起来怎么样?ValueCoders 比较 Angular,React 和 Vue 的语法

在生产环境中查看也很容易 —— 连同底层的源代码。TodoMVC 列出了几十个相同的 Todo 应用程序,用不同的 Javascript 框架编写 —— 你可以比较 AngularReactVue 的解决方案。RealWorld 创建了一个真实世界的应用程序(中仿),他们已经准备好了 Angular(4+)和 React(带 Redux )的解决方案。Vue 的开发正在进行中。

你可以看到许多真实的 app,以下是 React 的方案:

以下是 Angular 版的 app:

以下是 Vue 版的 app:

总结

现在决定使用哪个框架

React,Angular 和 Vue 都很酷,而且没有一个能明显的超过对方。相信你的直觉。最后一点有趣的玩世不恭的言辞可能会有助于你的决定:

这个肮脏的小秘密就是大多数 “现代 JavaScript 开发” 与实际构建网站无关 —— 它正在构建可供构建可供人们使用的库或者包,这些人可以为编写教程和教授课程的人构建框架。我不确定任何人实际上正在为实际用户建立任何交互。

当然,这是夸张的,但是可能有一点点道理。是的,Javascript生态系统中有很多杂音。在你搜索的过程中,你可能会发现很多其他有吸引力的选项 —— 尽量不要被最新,最闪亮的框架蒙蔽。

我应该选什么?

如果你在Google工作:Angular

如果你喜欢 TypeScript:Angular(或 React

如果你喜欢面向对象编程(OOP): Angular

如果你需要指导手册,架构和帮助:Angular

如果你在Facebook工作:React

如果你喜欢灵活性:React

如果你喜欢大型的技术生态系统:React

如果你喜欢在几十个软件包中进行选择:React

如果你喜欢JS和“一切都是 Javascript 的方法”:React

如果你喜欢真正干净的代码:Vue

如果你想要最平缓的学习曲线:Vue

如果你想要最轻量级的框架:Vue

如果你想在一个文件中分离关注点:Vue

如果你一个人工作,或者有一个小团队:Vue(或 React)

如果你的应用程序往往变得非常大:Angular(或 React)

如果你想用 react-native 构建一个应用程序:React

如果你想在圈子中有很多的开发者:Angular 或 React

如果你与设计师合作,并需要干净的 HTML 文件:Angular or Vue

如果你喜欢 Vue 但是害怕有限的技术生态系统:React

如果你不能决定,先学习 React,然后 Vue,然后 Angular


二:不同的理解与分析

 

前端这几年的技术发展很快,细分下来,主要可以分成四个方面:

  1. 开发语言技术,主要是ES6&7,coffeescript,typescript等;
  2. 开发框架,如Angular,React,Vue.js,Angular2等;
  3. 开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术;
    就开发框架这块,Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间,所以这里对比一下这三门技术,以便之后的技术选型。

一. 趋势

Vue.js


Reactjs


Angularjs


2.对比
虽然放在一起Angular还是最火的,但从单个趋势图可以看出来reactjs和vuejs明显是火箭一般上升。很明显可以看到Angular在16时候有个大跌幅,那时候正是React坐火箭上升最快的。就是那时候很多Angular的项目转成了React。如果Angular没有出2,那估计Angular就真的离灭亡不远了。


3.GitHub受欢迎程度


4.定位
虽然Vue.js被定义为MVC framework,但其实Vue本身还是一个library,加了一些其他的工具,可以被当成一个framework。ReactJS也是library,同样道理,配合工具也可以成为一个framework。AngularJS(本文AngularJS特指Angular 1, Angular 2特指第二版Angular)是一个framework,而Angular 2虽然还是一个framework,但其实在设计之初,Angular 2的团队站在了更高的角度,希望做一个platform。
5.上手容易度
Vue.js hello world


ReactJS hello world


** 6.文档清晰度**
现在的前端framework,用起来就像按照说明书使用家用电器一样。按照文档一步步写就好了,所以文档的清晰度非常重要。同时小伙伴也很重要,越多的人使用,那遇到一样问题的人就越多,stackoverflow上面可能早就有帮你解决问题的小伙伴了。就这几个来说,我个人认为Vue.js的文档最恳切。我认为结合文档和遇到问题Google答案的匹配度来讲:

 

Vue.js > ReactJS > AngularJS > Angular 2

二. 数据流

1.Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
实现原理:
$scope
变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,
$scope.$watch
函数,监视一个变量的变化。函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。
使用ng-model时,你可以使用双向数据绑定。 使用$scope.$watch
(视图到模型)以及$scope.$apply
(模型到视图),还有$scope.$digest
双向绑定的三个重要方法:
$scope.$apply()$scope.$digest()$scope.$watch()
在AngularJS双向绑定中,有2个很重要的概念叫做dirty check,digest loop,dirty check(脏检测)是用来检查绑定的scope中的对象的状态的,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会**调用相应的处理方法来实现双向绑定。

  1. Vue 也支持双向绑定,默认为单向绑定数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解
    Vue相比():
    Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。
    并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
    Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

  2. React-单向数据流
    MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,当界面发生变化的时候,按照配置规则去更新相应的数据,然后,再根据配置好的规则去,从数据更新界面状态。
    React推崇的是函数式编程和单向数据流:给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。
    React和Vue都可以配合Redux来管理状态数据。

三. 视图渲染

  1. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。
    React
  2. React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构当状态发生变化时,React 重新渲染 Virtual DOM,比较计算之后给真实 DOM 打补丁
    Virtual DOM 提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
    超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染
    React 的 Virtual DOM 也需要优化。复杂的应用里可以选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render;2. Components 尽可能都用 pureRenderMixin,然后采用 Flux 结构 + Immutable.js。其实也不是那么简单的。相比之下,Vue 由于采用依赖追踪,默认就是优化状态:动了多少数据,就触发多少更新,不多也不少
    React 和 Angular 2 都有服务端渲染和原生渲染的功能。
  3. Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好,而且几乎不用手工优化。

四. 性能与优化

性能方面,这几个主流框架都应该可以轻松应付大部分常见场景的性能需求,区别在于可优化性和优化对于开发体验的影响。Vue 的话需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手动指定 change detection strategy。从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是在构建方式、缓存、图片加载、网络链路、HTTP/2 等方面。

五. 模块化与组件化

Angular1 -> Angular2
Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。不是异步加载的,根据依赖列出第一次加载所需的所有依赖。
可以配合类似于Require.js来实现异步加载,懒加载(按需加载)则是借助于 ocLazyLoad 方式的解决方案,但是理想情况下应该是本地框架会更易懂。
Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。
Vue
Vue中指令和组件分得更清晰指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑**。在 Angular1 中两者有不少相混的地方。

React
一个 React 应用就是构建在 React 组件之上的。 组件有两个核心概念:props,state。 一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。
传统的 MVC 是将模板放在其他地方,比如 script 标签或者模板文件,再在 JS 中通过某种手段引用模板。按这种思路,想想多少次我们面对四处分散的模板片段不知所措?纠结模板引擎,纠结模板存放位置,纠结如何引用模板。
React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法,就是为了把 HTML 模板直接嵌入到 JS 代码里面,这样就做到了模板和组件关联,但是 JS 不支持这种包含 HTML 的语法,所以需要通过工具将 JSX 编译输出成 JS 代码才能使用(可以进行跨平台开发的依据,通过不同的解释器解释成不同平台上运行的代码,由此可以有RN和React开发桌面客户端)

六. 语法与代码风格

React,Vue,Angular2都支持ES6,Angular2官方拥抱了TypeScript这种 JavaScript 风格。
React 以 JavaScript 为中心,Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。React 将 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 试图让 HTML 更强大的方式。
React 推荐的做法是 JSX + inline style,也就是把 HTML 和 CSS 全都整进 JavaScript 了。Vue 的默认 API 是以简单易上手为目标,但是进阶之后推荐的是使用 webpack + vue-loader 的单文件组件格式(template,script,style写在一个vue文件里作为一个组件)

七. 一些大公司使用例子

1. Vue

滴滴出行, 还出了一本书 Vue.js 权威指南饿了么,开源了一个基于Vue的UI库 GitHub - ElemeFE/element: Desktop UI elements for Vue.js 2.0**
阿里的 weex GitHub - alibaba/weex: A framework for building Mobile cross-platform UI**
GitLab选择了Vue https://about.gitlab.com/2016/10/20/why-we-chose-vue/**
小米移动商城
饿了么
苏宁易购触屏版、

2. React

阿里,React 和React-native (杭州)
知乎的评论功能

3. angular2

新出的例子少

八. 总结

1. 上手难度

Vue < react < angular

2. 使用场景

Vue React 覆盖中小型,大型项目。
angular 一般用于大型(因为比较厚重)。
优缺点

3. 渲染性能

Vue> react >angular

渲染性能

4. 前端库实力参数对比

image.png

以上3大框架均不支持IE8以下;
IE9以下解决方法:Bootstrap (在IE8也会不支持一些样式和属性)+jQuery;
其他框架稳定性欠缺



作者:Su丶_33b0
链接:https://www.jianshu.com/p/b2b8161c9565
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。