为什么使用React作为云平台的前端框架(PPT)

大家好,很高兴可以和大家分享“为什么使用React作为我们的前端框架”。

首先,我们来看一下普元云的总体架构图

从图中可以看到,在我们普元云平台中,我们最终选择了React相关技术栈作为我们前端以及终端技术,以服务于业务应用和业务平台。

选择React的原因,总共七大点:

一、简单易学,上手快

二、JSX使编程更简单

三、组件化编程方式好处多

四、虚拟Dom技术,使得开发简单,而页面性能又好

五、前后端同构, 搜索引擎更友好

六、强大的开发工具

七、社区强大

一、简单易学,上手快

严格意义上来说,React并不是一个框架,只是一个类库,它专注于MVC中的V,但是正是由于这种专注,简单易学,上手快,学习React,你只需了解如何编写JSX风格的React组件就可以上手了。

而不像其他前台框架较大的学习成本,比如Angular,你要学习作用域,双向绑定,指令,控制器,模块,模板,依赖注入等等一系列知识。

(当然,随着项目的日益庞大,你还可以灵活选择自己喜欢或熟悉的第三方类库,比如Redux来管理数据流,React Router来管理页面跳转,通过第三方类库,你可以更好的管理React应用。)

从上图中可以看到,相比于AngularJS的庞然大物,React可以称得上小巧玲珑。所以,只要你以前有JavaScript的经验,学习React是相当简单的。

二、JSX使编程更简单

举个例子,我们有一个人员列表(张三、李四、王五、赵六),需求是:对每个人员,打出你好+人员姓名。

为了实现该需求,我们定义了一个HelloWorld组件,里面有一个render方法和一个getColor方法。

getColor方法根据姓名返回不同的字体颜色。张三是红色字体,其他姓名是黑色字体。

render方法里,通过遍历属性names,生成一个h1元素的集合,最终返回一个包含该集合元素的div元素。

初看这种有JavaScript又有HTML混搭的风格,你可能会觉得相当糟糕,因为这完全打破了多年以来一直推崇的界面(HTML模板)和业务逻辑(JavaScript)相互分离的最佳实践。

但是我们真的有必要这么分么?分离HTML模板和JavaScript其实只是分离了文件位置,事实上模板和JavaScript代码两者是紧密耦合的,很多情况当你改了模板后,你还得改JavaScript代码,所以这种分离只是技术上的分离而不是本质的分离(It’s a separation of technology, not aseparation of concern)而且模板是需要学习成本的,降低了开发效率。

JSX使用声明式直观的定义用户界面,除了另类的HTML标记之外,并没有引入其它任何新的概念。这也就意味着,你不需要学习第三方模板库,可以利用熟悉的JavaScript语法去构建界面,你的思维过程中其实已经不需要存在模板的概念,需要考虑的仅仅是如何用代码构建整个界面。

这种自然而直观的方式使得编程更加简单并且让代码更容易理解。

三、组件化编程方式好处多

向大家分享下我们在普元云平台中是如何使用React做组件化的,以Home页面为例。

该页面就是用户登录我们云平台后的首页。大家可以看到,其实这个略显复杂的页面主要由四部分组成:

1.TopBar

顶层栏包含查看用户基本信息、登出、搜索等功能

2. SideBar

侧边栏用于快速导航到不同业务应用

3. SummaryInfo& Dashboard

中间的概括和卡片面板主要用于展现当前微服务各阶段的缺陷和功能列表,并可以添加新的缺陷和功能

4. ChartPanel

聊天面板

而对各部分再做进一步细分,其实是这样的:

我们可以看到,4大块又细分了子块,子块又衍生出了子子块。这种组件化的开发方式虽然看似繁琐,但带来的好处却是实实在在的。主要有如下好处:

1. 组件职责单一,代码更易理解,减少重构、维护成本

由于组件职责单一,高内聚,不会出现以前改了一个组件上的小功能,还要级联更新其他依赖组件。

2. 组件之间松耦合,代码更易复用、扩展

在我们的卡片面板中,设计、开发、测试、预发、生产五种不同的卡片容器用的是同一个组件DashboardCardContainer。

而以后如果我们想在卡片上添加新的功能,比如删除功能,我们只需修改DashboardCard组件就可以了,而不需要修改其他组件。

3. 各组件可同时交由不同开发人员开发,加快开发效率

如聊天面板和卡片面板完全可以交由不同开发人员开发,两者互不影响。

4. 代码更易测试,提高代码质量

在这种细粒度的组件划分下,各组件之间松耦合,方便编写前端测试代码,提高代码测试覆盖率,保证产品质量。

讲了这么多优点,结合现在非常流行的微服务,大家是否发现了两者的共同之处?

没错,两者同样拥有职责单一、松耦合、快速开发的优势。使用React作为我们的前端框架,可以说和后台的微服务是一次强强联手的合作。

下面来看看普元云平台上前端组件和后端微服务之间的关系

我们可以清晰的看到,使用到微服务的前端组件和微服务之间基本是1对1的关系,职责单一、松耦合,提高了代码的可读性、可复用性、可维护性、可扩展性。

四、虚拟Dom技术,使得开发简单,而页面性能又好

传统的页面开发,或多或少会牵扯到dom操作,而进行dom操作时,就会有相应的各种优化策略来尽可能地减少页面重新布局和重绘的次数。

比如下面dom批量更新的优化就主要有三种:

1. 使用documentFragment进行dom批量更新,然后一次性更新到document上

2.克隆你将要更新的node,在克隆的node上进行dom批量更新,然后克隆的node和原始的node进行交换

3.先隐藏将要更新的node,然后进行dom批量更新,最后重新显示隐藏的node

传统的这种手工的批量更新复杂且易错,而React的虚拟DOM技术让我们远离了这种复杂,我们无需再时刻考虑何时以及如何做DOM性能调优。

基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React会产生以下情况:

1.触发相应组件render方法

2.重新构建新的虚拟DOM树

3.将当前新的虚拟DOM树和上一次的旧树进行对比

4.得到DOM结构的区别,计算出最小变化集,进行实际的浏览器DOM更新(批量更新)。

尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要因某个数据的变化而考虑如何更新到一个或多个具体的DOM元素,无需再写额外的代码来做性能优化,将之完全交给React类库来做,而我们只需要关心在相应数据状态下如何实现相应组件的render方法即可,使得开发简单。

那么使用了虚拟DOM技术的React性能到底如何呢,到底是徒有虚名还是货真价实呢,接下来我们来看看React和其他一些流行框架的性能比较。

第一个例子,比较React、jQuery、AngularJS,绘制10000个元素的渲染时间。

我们可以看到,在渲染上,React比jQuery快了57%,比Angular快了17%左右.

React版本: 0.13.1

jQuery版本: 2.1.3

Angular版本: 1.3.15

第二个例子,比较React、Knockout、AngularJS,绘制1000个元素的渲染时间。

我们可以看到React依然是最快的, 比Angular快了30%,比Knockout快了68%.

React版本: 0.12.1

Knockout版本: 3.2.0

Angular版本: 1.3.3

从这2个例子可以看出,React的虚拟DOM技术,简化开发过程的同时,确实又提高了页面的性能。

五、前后端同构, 搜索引擎更友好

传统的JavaScript富应用的问题是比较慢,用户体验差,同时对搜索引擎不友好。因此,业界开始探索JavaScript的服务器端渲染。

早期的做法,在服务器端根据不同技术选择不同的模板进行,如Rails的ERB模板,Java的Mustache、HandleBar、Velocity等等。

而React通过ReactDomServer,同样一个React组件,现在也可以用于后台渲染,达到了真正前后端同构,前后端只要维护一套代码。在解决SEO的同时,又可以组件前后端复用,这是其他很多MVVM框架很难做到的。

六、强大的开发工具

Facebook提供了React Developer Tools以方便开发者页面调试,包括查看组件的层次结构,实时查看和编辑组件的属性、状态等等,大大提高了开发者开发效率。目前已支持Chrome/FireFox。

第一张图是React.js 2016大会Nick Schrock演讲的时候,我们可以看到当时Chrome商店里React开发者工具使用者22万人。而第二张图是我5.9号刚刚截的图,其用户数量已经迅速蹿升到了28万人,才2个多月的时间,用户数量增长了6万,影响力可见不一般。

除了React Developer Tools,另一个强大的工具就是React Hot Loader。

通过React Hot Loader结合Webpack, 真正实现不用重启服务器、不用刷新浏览器,即可见刚刚修改代码后的页面,给予开发者与众不同的开发体验,加快开发效率。

七、社区强大

大家可以看到,React GitHub上4万1的Star数量,以及将近700人的contributor,以及一眼望不到边的使用React网站列表,让我们感叹React如此之火的同时,完全不用担心React的未来。

之前讲“简单易学、上手快”的时候提过,其实React并不是一个框架,只是一个类库,它专注于MVC中的V。随着项目的发展深入,我们可以选择使用自己喜欢或熟悉的第三方类库,比如Redux来进行数据流的管理,React Router来进行页面跳转。以上列出了部分第三方类库,包括常用组件库、单向数据流类库、页面路由、Ajax类库、基础类库等等。

我们可以看到借助于NPM方便的包管理平台,React拥有非常强大、丰富的第三方类库,面对如此庞大的类库、如此多的选择,我们是幸福的,但同时如何选择也是个难题。

以下是我们普元云现今选择的第三方类库,仅供大家参考。

好了,这就是本期微课堂的所有内容,按照国际惯例做下总结:

通过七大原因,详解了为什么我们普元云会选择React作为我们的前端框架,希望大家在做技术选型的时候,可以有所参考。

附: 各 群 答 疑

(解答人:普元产品部前端架构师奚金鑫)

Q1、群友:普元的所有前端组件都是基于bootatrap自己封装的?

答:现在普元的前端组件大部分使用的是第三方类库,比如React Bootstrap,今后会自己做封装,重点是一些复杂的组件,比如图表、列表等。

Q2、群友:两个测试过程中版本是怎么选择的?

答:这两个例子是直接从github上找的,比较有代表性。应该是当时开发的时候的版本。

Q3、群友:请问React适合做哪些类型的项目,互联网类型还是企业级类型?

答:不管是互联网还是企业级,React都是合适的,正是因为它的简单。

Q4、群友:React目前存在的不足是什么?

答:就我们这几个月的开发体验来讲,暂时还没发现有啥不足。可能使用第三方类库的时候,会有坑要踩,所以建议大家使用成熟的口碑良好的第三方类库。

Q5、群友:React的兼容性如何,对浏览器有什么要求吗?

答:React的兼容性很好,我们开发的时候初期其实并没有特别考虑兼容性问题,最后修改一些小的bug后,IE10+, FireFox, Chrome, Safari, 乃至Mobile端也可以通过网页浏览。

Q6、群友:React支持移动应用开发吗?

答:支持,可以使用React Native,全端同构。

关于作者:

奚金鑫

EAII-企业架构创新研究院 专家委员

现任普元云计算前端架构师,新一代云架构设计初始团队的一员。曾为花旗金融软件开发经理,负责CitiRisk UI框架(Core View)的前后端设计、开发工作。

原文发布于微信公众号 - EAWorld(eaworld)

原文发表时间:2016-05-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android-JessYan

今日头条屏幕适配方案终极版正式发布!前言方案对比AndroidAutoSize总结

我在前面两篇文章中详细介绍了 今日头条适配方案 和 SmallestWidth 限定符适配方案 的原理,并验证了它们的可行性,以及总结了它们各自的优缺点,可以说...

4352
来自专栏葡萄城控件技术团队

不用Visual Studio,5分钟轻松实现一张报表

常规的报表设计,如RDLC、水晶报表等,需要安装Visual Studio,通过VS提供的报表设计界面来设计报表,通过VS设计报表对.NET开发者而言非常方便,...

2975
来自专栏ytkah

两周“学会”bootstrap搭建一个移动站点

  一直想着用bootstrap搭建网站,它的自适应、元素封装完善、现成的Glyphicons字体图标,省去很多的css、js、ui的工作,可以快速搭建一个客户...

2926
来自专栏分布式系统和大数据处理

ppk谈JavaScript

这本书买得比较早,断断续续读了几次。这次花了一周时间重新读了一遍。总得来说,这本书中的部分理念,不说完全过时,但在现在的技术环境下也很难实现了。例如书中提到的“...

1052
来自专栏李成熙heyli

腾讯新闻React同构直出优化实践

按照经验来说,直出,能够减少20% - 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。

6485
来自专栏知晓程序

你的微信输入速度超过全国 99.9% 的好友 | 晓技巧

1305
来自专栏phodal

分享下 Backbone、Vue、Angular、React 在项目上的使用经验

上周,知乎上有几篇关于 Angular 和 Vue 对比的文章。本来想着的是,这些文章倒是可以指导下新手,作一些技术选型。可遗憾的是,开始的文章失去了一些偏颇,...

3696
来自专栏编程微刊

vue2.0移动端自定义性别选择提示框

这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来。

1291
来自专栏技术/开源

TypeScript 优秀开源项目大合集

TypeScript出来有段时间了,也冒出了很多用TypeScript开发的优秀开源项目,搜寻了一些基于TypeScript项目,分享给大家:https://g...

5049
来自专栏非著名程序员

最美动画特效库,你们值得收藏

昨天,我抽时间整理了一下我收藏的一些开源库,真的是收藏了很少看,但是昨天整理的时候,感觉到了一些真的不错的开源动画特效的库,在这里分享给大家。 1 Slid...

2538

扫码关注云+社区

领取腾讯云代金券