普元云计算-React风格的企业前端技术

转载本文需注明出处：EAII企业架构创新研究院，违者必究。如需加入微信群参与微课堂、架构设计与讨论直播请直接回复公众号：“EAII企业架构创新研究院”。（微信号：eaworld）

​

亲爱的各位朋友们，你们下午好！

 

首先祝你们国庆节快乐！

 

很高兴能够在国庆前夕，能够为你们分享一下React风格的企业前端技术。

 

谈到前端，可能之前你们的第一感受就是，前端嘛，无非就是作作页面切图，顶多加上CSS作作页面样式，或者JS作页面的交互、动画、特效等等。

其实，随着近几年前端的飞速发展，像组件化、模块化理念的出现，MVC、MVVM等前端框架愈来愈成熟，以及愈来愈健全的开发、调试工具，前端能够说已经不是之前的那个前端了，前端正在变得像后端同样的复杂。

而另外一方面，随着互联网+的热潮的到来，愈来愈多的传统系统内部应用，正在转型成为互联网化的应用。

 

而互联网化应用的一个鲜明特色就是快速，那怎样打造一个快速、React的前端应用呢，这就是咱们今天所要将的React风格的企业前端技术。

 

首先仍是稍微啰嗦一下谈谈前端的发展简史。

 

 

早期仍是以JSP、PHP、ASP等为主的页面开发年代，那个时候的主要场景是

1. 用户在页面上进行一个操做，好比Button的点击或者Form表单的提交

2. 浏览器发送请求到后端

3. 后端通过DB查询拿到数据，再将数据绑定到JSP、PHP、ASP

4. 最后生产HTMl，返回给浏览器

5. 浏览器进行全屏渲染

注意，这里讲到了全屏渲染，全屏这个词注定了用户体验的不佳，开发人员能够作的优化的事情是很是少的。

另外，前端逻辑放在后端JSP里，这种先后端混淆的开发方式首先下降了开发效率，尤为当页面变复杂后，以及带来了后期的一系列维护性、扩展性等问题。

 

 

带着前期的这些问题，咱们来到了中期AJAX的时代。

这个时候场景从第三步开始变成了

3. 后端通过DB查询拿到数据

4. 根据数据，生成对应的JSON/XML这种先后端达成一致的数据格式，返回给浏览器

5. 浏览器对JSON/XML进行解析，绑定到对应的组件上，再进行组件渲染

 

你们能够看到，这个阶段全屏渲染换成了组件渲染，用户体验能够说是提高了。

而业务逻辑也慢慢得从后端移向了前端，这种先后端代码分离的方式提高了必定的维护性、可扩展性。

但与此同时，咱们的应用也慢慢地变成了JavaScript的富应用，而打造一个富应用实际上是不简单的，咱们须要

1. 基础类库来对请求、DOM、事件、特效等的封装

2. 组件库来达到组件复用

3. 框架来进行数据的解析及绑定

4. 解决不一样浏览器的兼容性问题，以及相同浏览器不一样版本的兼容性问题

 

这个阶段的早期都是各家公司本身造轮子的时代，能够说当时打造一个富应用是很是痛苦的。直到后来出现了一批优秀的类库，好比jQuery、Prototype，以及好的一些开发理念，好比jQuery UI的组件化、YUI的模块化、EXT JS的MVC框架，借助这些优秀类库及开发理念，大大减轻了咱们打造富应用的痛苦。

 

另外06年初FireFox的Firebug插件的出现，终于可使咱们前端开发人员可以像后端同样，能够方便的调试前端代码，告别了手写alert这种繁琐的调试方式。

 

 

这个阶段的优势，刚刚也说了，就是在用户体验以及开发效率等方面的提高。

而缺点就是，随着业务逻辑慢慢变复杂，应用变为复杂的富应用，当前的类库或开发理念显得力不从心，像jQuery UI Widget Factory将一个页面分红几块开发，这种组件化开发的理念虽然是好的，可是块与快之间的数据传递、同步仍是没有解决，致使开发人员仍是须要经过reference传递、callback、listener绑定等繁琐方式来进行数据传递或同步。而ExtJS虽然MVC理念也很是好，可是初期被人诟病的就是它的性能、稳定性问题，以及3.0以后的license问题。

 

总之这个阶段虽然理念有了，但仍是处于萌芽阶段，还尚不成熟。

 

其实正是因为中期的这些缺点及不足，才来到了咱们当代生机勃勃的生态圈。

 

主要分为四大块

1. Angular、React、Ember为首的优秀前端框架

2. Bootstrap、Semantic UI为首的优秀组件库

3. npm、webpack模块化开发

4. Gulp、Grunt等构建工具来进行项目构建

 

 

 

能够说正是因为当代这些优秀的、成熟的技术，才能使咱们快速地打造很是棒的前端应用。

 

说了这么多，那到底具体怎么作呢，下面就来说讲咱们认为的构建React风格应用的三大要素。

 

首先成熟的框架是项目的支柱

 

为何说成熟呢，由于你不是第一个吃螃蟹的人！

Google使用了AngularJS在Google Trends、Google Analytics上，Facebook、Airbnb等使用了React相关的技术，而Apple、Amazon等也使用了Ember相关的技术。

能够说，这些前端框架已经在生产线上通过反复验证过了，因此你们彻底能够放心大胆的使用。

另外一方面，如今优秀的前端框架选择也很是多，各自有各自的优势。

 

像Angular经过双向绑定的方式，使开发人员不用关心View和Model之间的数据同步，简化了代码。

 

而React能够说是另辟蹊径，经过组件化的开发方式，虚拟Dom的理念，以及结合Redux单向数据流，更高效的开发咱们的前端应用。

 

这么多优秀的、成熟的前端框架到底怎么选择呢？

 

首先从框架自己来讲 (上图评分仅供参考)

1. 学习难度

如官网的文档、示例是否多

2. 框架特性

浏览器兼容性、先后端同构、移动端的支持等等

3. 社区

github的Star数、github上解决issue数以及解决速度、官方的维护者是谁等等

其次从项目团队来讲，也须要从人力、项目大小、时间、指望等来考虑。好比前端团队里若是不少是从后端转为前端的，可能Augular更加合适，若是大多都是专业的JS开发人员，那么React可能更加合适。

 

前端框架有了，还得配合成熟的测试框架才能保证产品质量。

 

说到单元测试、集成测试，后端已经历史悠久，TDD、BDD等测试理念都是从后端发扬光大的。而如今前端也能够很方便地来编写测试。

如上图，能够选择Karma做为Test Runner，Mocha/Chai做为测试类库（相似后端Junit），Sinon做为Mock类库（相似后端Mockito），结合不一样的Karma Launchers来测浏览器的兼容性问题，而且配合CI Job，实时地监控代码问题，从而下降Regresssion，提高编码信心、代码质量。

 

上面给出的就是咱们在The Platform里面的一个前端测试用例，是经过BDD的given/when/then的测试方式

1. given一个Portal组件

2. when这个组件渲染到DOM以后

3. assert该组件的layout

经过该示例你们能够看到，如今编写前端测试能够说是很是方便了。

 

选好了前端框架、测试框架，下面就得正式进入前端工做流程了。

 

咱们能够看到如今的前端流程实际上是复杂的。

 

在搭建的时候，咱们可能须要

1. 根据不一样前端框架搭建不一样的项目结构，好比MVC的得model/view/actions的结构，react+redux的得components/actions/reducers结构

2. 根据不一样的前端、测试框架配置不一样的配置文件

3. 若是是先后端同构的，还须要搭建前端服务器

 

而在开发的时候，咱们须要

1. 各类预处理器来处理中间语言，好比CoffeeScript、TypeScript或者Sass、Less

2. JS、CSS代码实时检查

3. 模块化开发

4. 热加载、实时加载

 

最后在构建的时候，咱们须要

1. 编译JS/CSS等中间语言

2. 运行单元测试

3. 资源压缩、合并

4. 资源懒加载

 

你们能够看到，从搭建到开发再到构建，仍是作了不少事情的，一个流畅的工做流程必不可少。

 

主要分为四大块

1. BoilerPlate或者Yeoman命令行的方式快速搭建项目结构

2. Npm、webpack进行模块化开发

3. 以Sublime插件/Atom插件/webSotrm，进行中间语言的预处理、以及代码Lint

4. Gurnt/Gulp/npm Scripts进行项目构建

 

最后一点，也是很是重要的一点，就是用户体验了。

 

能够说，用户体验是成功产品的基石。一些优秀的、成功的产品，每每用户体验也是很是棒的。

 

要想提高用户体验，首先咱们先得从设计作起，上图中的五大层次实际上是出自于Ajax之父James Garrett所著的用户体验要素，而对于咱们开发人员来说，尤为要注重于表现层、框架层、结构层，分别从配色、字体、导航、交互等方面进行设计。

 

 

其次只有经过不断优化才能提高用户体验。咱们能够从内容优化、关键渲染路径优化、渲染性能优化三大方面进行性能优化。

 

 

同时借助好的开发工具能够帮助咱们进行性能优化。Chrome的开发者工具就是款很好的开发工具，咱们可使用Source能够进行代码调试，经过Network分析页面上的资源请求状况，甚至能够跑一个Profile来定位长耗时方法、内存泄露等问题。

 

至此，三大要素已经所有讲完了。

下面再来谈谈React风格在咱们普元产品The Platform里的实践。

首先是咱们The Platform里前端的整体架构图

 

 

1. 框架这边

咱们使用了React + Redux + React Router做为前端框架。经过React组件化的开发方式，一个页面能够同时拆成几块给不一样的团队甚至是异地团队，从而加快开发效率。而Redux单向数据流的方式也下降了复杂页面的开发难度。

使用Karma+Mocha+Chai+Sinon做为测试框架，保证代码质量。

2. 工做流程

FE Template做为咱们的BoilerPlate来快速搭建前端项目

NPM webpack进行模块化开发

React/Redux开发工具以及Webpack的热加载来提高咱们的开发体验

Webpack进行项目构建，进行资源文件压缩、合并、懒加载等

3. 用户体验

优化设计，减小没必要要的菜单。

利用React自己的Virtual DOM提高页面性能，Webpack的懒加载减小资源文件下载，加快加载速度。

以及近期对字体作的异步加载。

 

 

最后的总结

 

 

好了。今天的分享就到这里，谢谢你们。

 

最后祝你们国庆长假，玩得开心！

 

 

关于做者：

奚金鑫

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

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

 

 

关于EAII

EAII（Enterprise Architecture Innovation Institute）企业架构创新研究院，是专一于企业架构与业务创新领域的研究机构，致力于金融、电信、能源与政务等行业领域的企业软件架构优化设计与 创新研究，以及分布式计算、服务构件技术、可视化技术、业务流程管理、内存计算、企业移动计算、数据治理等领域的技术研究。

 

 

eaworld项目（微信号：eaworld，长按二维码关注）

 

eaworld是EAII的官方微信帐号。