导语:
我们正处在一个技术大爆发时代,IT技术作为与人们生活息息相关的领域,得到了飞速发展。前端技术,又是所有IT技术中,更新最快的领域之一,考虑到前端社区“激进 ”的创新风气,似乎也可以把“之一 ”去掉。
1八一八前端的历史
在笔者看来,从技术上进行划分前端大概经历了这几个阶段:
图文信息展示阶段:这是前端技术的公元前,主要是为了展示信息给受众,网站几乎没有什么交互功能
DHTML时代:DHTML让网页具有了更丰富的展示手段,页面能够对人们行为产生更多的反馈,具备了更好的交互性,大名鼎鼎的web2.0就是处于这个阶段
前端工程化时代:随着页面功能的丰富,前端部分的代码逐渐变得庞大,代码维护和复用,成了前端技术发展的主旋律。在这个时代,前端技术得到了空前的发展:语言特性得到加强,新的标准紧锣密鼓的出炉(HTML5,CSS3,ES2015 and ES7 is coming~);各种类库层出不穷,各种思想百花齐放;更多的问题被尝试用前端技术解决,前端技术被用于完成更多领域的任务,这是前端的黄金时代
前端的黄金时代(图片来源于网络)
前端技术的每一次变革,引领着人类信息生活的变革。门户网站,让我们能够随时获取最新的咨询;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作为主体框架。
web打包工具
web打包工具可以将我们的开发,发布流程自动化,让我们的开发和发布更方便。
既然用了React,webpack作为React的亲密小伙伴,自然为我们选用。Gulp也是很优秀的打包工具,笔者认为,gulp的语法更清晰,更浅显易懂,gulp的功能也更加强大,无奈React和webpack太亲密了,webpack也有很多很好的特性,比如在代码中直接引入样式,图片等,可以让模块的内聚性更高,另外,gulp也可以和webpack双剑合璧,实现更NB的功能。
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小时内回复您的投稿和合作需求。
本文作者:孙彬,程序猿一只。对有技术含量的事情,都感兴趣。足球爱好者,喜欢球场上奔跑的感觉,现任职于点融技术部成都分部。