今天分享的内容是前端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,只要把它掌握好了,无论哪个框架都能够更加轻松的上手,不仅是使用它们,还包括了解他们的机制。甚至可以自己去封装一个库。
随着前端技术的不断发展,框架和库也越来越多,对于到底哪个才是最符合项目的,需要经验更加丰富,对框架和项目有更加深入的了解,这样才能够有一个更加可靠的决策。

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

Logo

前往低代码交流专区

更多推荐