web前端工程化-刘晓林

WEB前端工程化创建者：刘晓林时间：2017.02.142目录前言前端模块化前端组件化前端规范化前端自动化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规范：1.模块的标识应遵循的规则（书写规范）2.定义全局函数require，通过传入模块标识来引入其它模块，执行的结果即为别的模块暴露出来的API3.如果require函数引入的模块中包含依赖，那么依次加载这些依赖4.如果引入模块失败，那么require函数应该报一个异常5.模块通过变量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.js9模块化-js的模块化UMD10模块化-js的模块化框架自带的模块化，angular2、reactjs等。Es6原生模块化，技术选型webpack+Babel+ES611模块化-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技术，而且处理伪类等问题比较困难；React14模块化-CSS的模块化CSSModules仍然使用CSS，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。Vue的scopedstyle15组件化组件化不等于模块化，模块化只是在语言层面上，对代码的拆分；而组件化是基于模块化，在设计层面上，对UI的拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先按顶层设计来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者本质的区别。组件化是一种在设计层面上，对项目中UI进行整体的疏理和拆解，再按照HTML+CSS+JS三位一体的面向对象来进行封装的过程或思想。目前市面上的组件化框架，主要的有Vue、React、Angular、Polymer和WebComponent16组件化在HTML结构中通过selector制定标签来实例化组件amazing-angular2[text]='HelloAngular2!'Loading.../amazing-angular2Angular217组件化-Vue组件实例化可以通过标签来实现amazing-vuetext=HelloVue!/amazing-vueVue18组件化通过react-dom的render方法以标签的形式实例化组件AmazingReacttext=HelloReact!/React19规范化模块化和组件化确定了开发模型，而这些东西的实现就需要规范去落实。规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。1.目录结构的制定2.编码规范3.前后端接口规范4.文档规范5.组件管理6.Git分支管理7.Commit描述规范8.定期CodeReview代码9.视觉图标规范其中编码规范最好采取ESLint和StyleLint等强制措施，因为人是靠不住的，比如可以Lint通不过不能提交代码等。20自动化-开发流程1.切图2.创建模版（html、jade、haml）、脚本（javascript、coffeescript）、样式（css、less、sass、stylus）文件，搭建基础的项目骨架。3.文件（jade、coffeescript、less、sass…）编译4.执行测试用例5.代码检测6.移除调试代码7.静态资源合并与优化8.静态资源通过hash计算指纹化9.部署测试环境10.发布上线21自动化-工具化任何简单机械的重复劳动都应该让机器去完成，前端工程化的很多脏活累活都应该交给自动化工具来完成。•图标合并：不需要在PS拼雪碧图了，有gulp+SpriteSmith•持续集成•自动化构建•自动化部署•自动化测试•构建工具：团队不只有一个项目，如果每个项目都搭建一套gulp+webpack+babel+…，维护成本比较高，而且不能保证统一性。22自动化-工具化下图是网易蜂巢的构建工具任务流。23自动化-工具化FIS3是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。•模块化开发：FIS提供了ModJS模块化方案让用户无需关注模块化方案细节，只需像NodeJS一样简单的声明模块依赖便能轻松完成模块化工作，支持同步、异步的加载方式和依赖的管理。•无缝支持AMD/CMD等规范：FIS同样支持开源的AMD/CMD等规范，通过自动化编译简化现有模块化方案的开发和依赖的分析管理等工作，让用户更专注于功能开发。•更简单的依赖打包机制：FIS在分析过程中获取了整个项目模块化资源的依赖分析工作，使得诸如webpack的依赖打包和管理变得更加简单。•静态资源机制：作为FIS静态资源管理的核心，通过它不仅能灵活适配modjs/AMD/CMD等模块化方案，更能方便地扩展实现更多应用。•后端静态资源管理框架：静态资源管理应当能适配php、java等各种后端方案，通过与后端的结合更好的实现网站资源的管理。•灵活控制资源加载：按需加载、延迟加载、预加载等多种方式灵活控制，从性能优化角度出发优化首屏渲染等页面展现性能。面对前端工程化，我们怎么做？