文档章节

以react为核心的企业级前端架构

IT_小翼
 IT_小翼
发布于 2016/04/08 14:45
字数 2101
阅读 225
收藏 4

1

导语:

我们正处在一个技术大爆发时代,IT技术作为与人们生活息息相关的领域,得到了飞速发展。前端技术,又是所有IT技术中,更新最快的领域之一,考虑到前端社区“激进 ”的创新风气,似乎也可以把“之一 ”去掉。

1八一八前端的历史

在笔者看来,从技术上进行划分前端大概经历了这几个阶段:

图文信息展示阶段:这是前端技术的公元前,主要是为了展示信息给受众,网站几乎没有什么交互功能
DHTML时代:DHTML让网页具有了更丰富的展示手段,页面能够对人们行为产生更多的反馈,具备了更好的交互性,大名鼎鼎的web2.0就是处于这个阶段
前端工程化时代:随着页面功能的丰富,前端部分的代码逐渐变得庞大,代码维护和复用,成了前端技术发展的主旋律。在这个时代,前端技术得到了空前的发展:语言特性得到加强,新的标准紧锣密鼓的出炉(HTML5,CSS3,ES2015 and ES7 is coming~);各种类库层出不穷,各种思想百花齐放;更多的问题被尝试用前端技术解决,前端技术被用于完成更多领域的任务,这是前端的黄金时代

2

前端的黄金时代(图片来源于网络)

前端技术的每一次变革,引领着人类信息生活的变革。门户网站,让我们能够随时获取最新的咨询;Youtube、twitter、微博,让普通人能够发出自己的声音,被世界聆听;能够运行在多平台上的web语言,快速的开发效率,极大的减小了我们表达自己思想的代价,创业、创新不再是大集团,大组织的专属活动。

2我们需要什么样的前端架构

企业级前端技术,说起来挺唬人的...我们平时在公司做的前端工作,又不是个人的,那不就是企业级的么。

是的,不过根据具体运用技术的不同,前端架构会具有不同的features,笔者所指的企业级前端架构,是需要具有很多features,能满足较高要求网站开发的架构。

笔者根据自己经验,一般对于高可维护性,高访问量的网站,应该具有如下features(在文末会配合选型框架对部分features实现进行说明):

基本features
低版本IE支持(IE8+) - 前端开发人员的痛点
前端性能优化支持 - 压缩、合并、图片优化

进阶features
代码风格检查 - 从源头控制代码风格
前后端完全分离 - 通过接口进行交互
使用语法糖 - 使用新版本的语法,精简代码,提高代码健壮性和可维护性,与未来保持一致
开发时的文件变动侦测 - 自动加载改动部分,体现在浏览器中
组件化 - 提高可复用性和复用度
代码模块化 - 提高代码内聚性和可维护性,充分利用浏览器缓存机制,提高前端性能
模块懒加载 - 防止一次性加载过多代码,导致长时间用户等待
移动端和pc端代码可以不同 - 针对移动端和pc端分别打包
带版本或者hash的文件名 - 方便部署的时候,先上传代码,然后上传html,就可以更新网站
前端测试 - 前端单元测试和黑盒自动化测试
接口mock - 进一步解耦前后端开发,开发时按照接口,使用mocker,防止服务器重启,代码更新带来的干扰

3具体框架选型

由于项目时间压力和人力的关系,我们暂时还不能去创造轮子,不过无妨,社区已经有很多优秀的轮子供我们选用。框架选型设计到很多方面,可以独立写一篇或者多篇文章,笔者这里只简单对比人气最高的框架,突出一下框架的特点。

主体框架选择
主体框架决定了我们前端代码的形态,框架能帮我们做的事情越多,我们自己需要做的事情就越少。

AngularJS等MVX(X)框架,能够提供模型到显示的绑定,这样我们就从操作dom中解放出来了,自带的模块管理,也可以帮助我们实现模块化。

但是笔者认为,从组件的封装性上来讲,React做得更好,再者AngularJS饱受诟病的性能问题,正好是React的强项,我们有理由选择React作为主体框架。

3

web打包工具
web打包工具可以将我们的开发,发布流程自动化,让我们的开发和发布更方便。

既然用了React,webpack作为React的亲密小伙伴,自然为我们选用。Gulp也是很优秀的打包工具,笔者认为,gulp的语法更清晰,更浅显易懂,gulp的功能也更加强大,无奈React和webpack太亲密了,webpack也有很多很好的特性,比如在代码中直接引入样式,图片等,可以让模块的内聚性更高,另外,gulp也可以和webpack双剑合璧,实现更NB的功能。

4

4以react为核心的企业级前端架构技术栈

react - 主体框架,可以通过引入额外文件,实现对IE8的支持

react-router - 配合react,实现单页面应用程序

bootstrap - 前端样式框架,3.x可以引入额外文件,实现对IE8的支持

webpack - web打包工具

eslint - 检查代码风格和潜在的风险,尽量在提交之前更正他们

babel - 将ES6语法编译成ES5语法,支持语法糖的使用

最终成型的代码,可以在笔者的github上下载到,地址请继续往下看,在文章结尾。

5部分features实现说明

低版本IE支持(IE8+)
React需要es5-shim、es5-sham,bootstrap需要respond.js html5shiv才可以在IE8下正常运行,这4个文件不经常变动,连同console-polyfill打成1个文件节省http请求数。具体做法是ie相关的js单独作为一个chunk,因为mobile端没有ie,不需要这些文件,然后browser端的代码,将ie相关的js写到添加注释中。

代码风格检查
将eslint-loader用于js文件的即可,注意,eslint-loader应该放在babel-loader下面,让其先执行,然后再执行babel-loader。

使用语法糖
使用babel-loader即可,然后尽情使用es6新语法吧。

开发时的文件变动侦测
有两种方式,一种是webpack-dev-server,放在webpack config文件中,另一种是webpack-dev-middleware,提供node api调用,这里选用webpack-dev-middleware,可以更加灵活。

代码模块化
可以使用chunk来代表模块,chunk可以通过配置entry产生,也可以通过require.ensure和require AMD产生,还可以插件产生,可以根据具体的情形,选用不同的方式。例如,如果是基本类库,可以选择作为entry;如果是业务模块,而且需要动态加载的,可以使用require.ensure。

移动端和pc端代码可以不同
使用不同entry,将不同平台需要加载的脚本打包成不同的文件,然后,通过HtmlWebpackPlugin插件,将不同entry放入不同模板中,在不同平台下,访问不同模板,从而实现不同平台访问不同代码。

结语

以上只是部分features实现的说明,也可能有不清晰的地方,具体实现请移步:https://github.com/Pliman/enterprise-react,如有需要,欢迎留言讨论。

如果您想投稿给我们,或者想转发和采用我们的稿件,请回复“合作”,小编会在2小时内回复您的投稿和合作需求。

本文作者:孙彬,程序猿一只。对有技术含量的事情,都感兴趣。足球爱好者,喜欢球场上奔跑的感觉,现任职于点融技术部成都分部。


本文转载自:http://www.dianrong.com/caifu/405691.html

IT_小翼

IT_小翼

粉丝 44
博文 153
码字总数 36364
作品 0
西安
程序员
私信 提问
SpringBlade 2.4.1 发布,增强代码生成模块

简介: SpringBlade 是由一个商业级项目升级优化而来的 SpringCloud 微服务架构,采用 Java8 API 重构了业务代码,完全遵循阿里巴巴编码规范。采用 Spring Boot 2 、Spring Cloud Greenwich ...

smallchill
08/20
3K
0
SpringBlade 2.5.1 发布,增加动态网关鉴权功能

简介: SpringBlade 是由一个商业级项目升级优化而来的 SpringCloud 微服务架构,采用 Java8 API 重构了业务代码,完全遵循阿里巴巴编码规范。采用 Spring Boot 2 、Spring Cloud Greenwich ...

smallchill
前天
2.6K
0
SpringBlade 2.2.1 发布,抽离封装代码生成模块

简介: SpringBlade 是由一个商业级项目升级优化而来的 SpringCloud 微服务架构,采用 Java8 API 重构了业务代码,完全遵循阿里巴巴编码规范。采用 Spring Boot 2 、Spring Cloud Finchley 、...

smallchill
04/15
1K
9
企业如何挑选一款适合的前端框架?

  【IT168 评论】前端语言和框架发展迅速,每年都有很多的库和框架产生和消亡,企业如何才能在高产且良莠不齐的框架中保持理性,选择出正确的前端框架呢?   新加坡CXA Group在对其核心网...

it168网站
2017/03/30
0
0
SpringBlade 2.3.1 发布, 升级业务架构

简介: SpringBlade 是由一个商业级项目升级优化而来的 SpringCloud 微服务架构,采用 Java8 API 重构了业务代码,完全遵循阿里巴巴编码规范。采用 Spring Boot 2 、Spring Cloud Greenwich ...

smallchill
05/17
2.2K
8

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
6
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部