web前端工程化-刘晓林

WEB前端工程化,创建者：刘晓林时间：2017.02.14,2,目录,前言前端模块化前端组件化前端规范化前端自动化,3,前言一,近年来，前端领域风云变幻，各种技术栈层出不穷。React、Angular2、Vue2逐步三分天下，Webpack+Babel+ES6模式如日中天，PostCSS大有取代SASS、LESS、Stylus的趋势，还有HTTP2、WebComponents、WebAssembly、函数式编程等新概念不断涌现。让我们这些前端工程师应接不暇、感叹不已：“今年一个技术还没学会，明年可能就不用学了。”回顾前端发展历史，按照xufei前端开发技术的发展一文中的观点，大概可以分为三个阶段：刀耕火种：典型特征是服务器语言（ASP、JSP、PHP）为主，结合简单的CSS和JS代码片段。是最早期的WebPage模式；手工工场：典型特征是Ajax的出现，它使得WebApp模式成为可能。这期间jQuery、Prototype和Mootools几个库占主导地位，并出现了初步的模块加载方式；工业革命：典型特征是各种MV*框架的不断出现，各种开发模式的不断演进，各种自动化工具的不断革新，各种标准的不断确立。,4,前言二,目前来说，Web业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？前端工程化是前端架构中重要的一环，就是为了解决上述各种效率方面的问题的。而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。那么前端工程化需要考虑哪些因素？我认为前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考。,5,模块化,“分工产生效能”模块化是“刀耕火种”和“手工工场”的分界线。它的作用是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载，这为多人协作提供了可能。,6,模块化-js的模块化,社区制定的模块加载方案，如CommonJS、AMD和CMD，兼容几种规范的UMD。代表性的有requireJs、seaJS.CommonJS规范：模块的标识应遵循的规则（书写规范）定义全局函数require，通过传入模块标识来引入其它模块，执行的结果即为别的模块暴露出来的API如果require函数引入的模块中包含依赖，那么依次加载这些依赖如果引入模块失败，那么require函数应该报一个异常模块通过变量exports来暴露API，exports只能是一个对象，暴露的API须作为此对象属性。,7,模块化-js的模块化,AMD执行输出结果如下：a.js执行b.js执行main.js执行hello,a.jsa.Js和b.js被预先执行了,8,模块化-js的模块化,CMD执行输出结果如下：main.js执行a.js执行hello,a.jsa.Js和b.js都会预先下载，但是b.js中的代码却没有预先执行，点击按钮后输出b.js执行、hello,b.js,9,模块化-js的模块化,UMD,10,模块化-js的模块化,框架自带的模块化，angular2、reactjs等。Es6原生模块化，技术选型webpack+Babel+ES6,11,模块化-CSS的模块化,虽然SASS、LESS、STYLUS等预处理器实现了对css的文件拆分，但并没有解决CSS模块化的一个重要问题：选择器的全局污染问题。为了避免全局选择器的冲突，各个公司都制定了自己的CSS命名风格，有BEM风格、Bootstrap风格、Semantic风格等。BEM风格,12,模块化-CSS的模块化,CSS从工具层面有ShadowDOM、CSSinJS和CSSModules三种解决方案ShadowDOM是WebComponents的标准。它能解决全局污染问题，但目前很多浏览器不兼容，对我们来说还很久远；ShadowDOM是一个HTML的新规范，其允许开发者封装自己的HTML标签、CSS样式和JavaScript代码。,13,模块化-CSS的模块化,CSSinJS是彻底抛弃CSS，使用JS或JSON来写样式。这种方法很激进，不能利用现有的CSS技术，而且处理伪类等问题比较困难；React,14,模块化-CSS的模块化,CSSModules仍然使用CSS，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。Vue的scopedstyle,15,组件化,组件化不等于模块化，模块化只是在语言层面上，对代码的拆分；而组件化是基于模块化，在设计层面上，对UI的拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先按顶层设计来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者本质的区别。组件化是一种在设计层面上，对项目中UI进行整体的疏理和拆解，再按照HTML+CSS+JS三位一体的面向对象来进行封装的过程或思想。目前市面上的组件化框架，主要的有Vue、React、Angular、Polymer和WebComponent,16,组件化,在HTML结构中通过selector制定标签来实例化组件Loading.,Angular2,17,组件化-Vue,组件实例化可以通过标签来实现,Vue,18,组件化,通过react-dom的render方法以标签的形式实例化组件,React,19,规范化,模块化和组件化确定了开发模型，而这些东西的实现就需要规范去落实。规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。目录结构的制定编码规范前后端接口规范文档规范组件管理Git分支管理Commit描述规范定期CodeReview代码视觉图标规范其中编码规范最好采取ESLint和StyleLint等强制措施，因为人是靠不住的，比如可以Lint通不过不能提交代码等。,20,自动化-开发流程,切图创建模版（html、jade、haml）、脚本（javascript、coffeescript）、样式（css、less、sass、stylus）文件，搭建基础的项目骨架。文件（jade、coffeescript、less、sass）编译执行测试用例代码检测移除调试代码静态资源合并与优化静态资源通过hash计算指纹化部署测试环境发布上线,21,自动化-工具化,任何简单机械的重复劳动都应该让机器去完成，前端工程化的很多脏活累活都应该交给自动化工具来完成。图标合并：不需要在PS拼雪碧图了，有gulp+SpriteSmith持续集成自动化构建自动化部署自动化测试构建工具：团队不只有一个项目，如果每个项目都搭建一套gulp+webpack+babel+，维护成本比较高，而且不能保证统一性。,22,自动化-工具化,下图是网易蜂巢的构建工具任务流。,23,自动化-工具化,FIS3是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。模块化开发：FIS提供了ModJS模块化方案让用户无需关注模块化方案细节，只需像NodeJS一样简单的声明模块依赖便能轻松完成模块化工作，支持同步、异步的加载方式和依赖的管理。无缝支持AMD/CMD等规范：FIS同样支持开源的AMD/CMD等规范，通过自动化编译简化现有模块化方案的开发和依赖的分析管理等工作，让用户更专注于功能开发。更简单的依赖打包机制：FIS在分析过程中获取了整个项目模块化资源的依赖分析工作，使得诸如webpack的依赖打包和管理变得更加简单。静态资源机制：作为FIS静态资源管理的核心