前端工程化(一)

前言

web应用复杂度的增加，特别是单页面应用的风靡。组件化，工程化，自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。

前端工程的3个阶段

第一阶段： 库/框架选型

Animate.css
jQuery
vue.js
underscore.js
React.js
Backbone.js
Bootstarp
zepto.js
jade
normalize.css
compass
Angular.js
解决开发效率

第二阶段： 简单构建优化

选择构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并。

第三阶段： JS/CSS模块化开发

解决维护效率
js的模块化方案
ADM/CDM/UMD/ES6 Module

css的模块化：less，sass。

第四阶段: 前端是一个技术问题较少，工程问题较多的开发领域

当我们要开发一款完整的Web应用时，前端将面临更多的工程问题，比如：
- 大体量：多功能、多页面、多状态、多系统；
- 大规模：多人甚至多团队合作开发；
- 高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

组件化开发和资源管理

1. 组件化开发：
   光有JS/CSS的模块化还不够，对于UI组件的分治也有着同样迫切的需求

2. 资源管理：
   根据“增量”的原则，我们应该精心规划每个页面的资源加载策略，使得用户无论访问哪个页面都能按需加载页面所需资源，没访问过的无需加载，访问过的可以缓存复用，最终带来流畅的应用体验。

由增量原则引申的前端优化技巧成为了性能优化的核心:
按需加载
延迟加载
预加载
请求合并

浏览器的缓存

静态资源管理系统 = 资源表 + 资源加载框架

前端模块化框架肩负着模块管理和资源加载2个重要的功能

webpack已经成为了前端打包构建的主流。

开发框架则是形成了三国时代：
React ， Vue， Ng

移动端也以混合开发为主的方式，Native嵌入了Webview页面。

SPA依靠首次加载的Loading动画，来掩盖一些页面加载性能的问题。

用户验证问题，怎么来确认Native的用户身份，是用原来Web网站常用的session还是使用Native比较常用的token，但是不管用哪种，都需要Native帮忙来注入标识。

前端业务重量化，场景多样化。
未来的趋势： 组件化。

美团的工程化

关于前端工程化，我看了美团团队的分享：
他们分享的前端化的实践总结：
1. 前端开发要自成体系，包括构建、部署及运维，不再和后端项目耦合，后端通过RESTful接口提供服务。
2. 避免重量级的框架，没有一个框架可以满足所有的业务场景。
3. 设计要分层，来应对需求和技术的变化。

前端工程化项目分为3大模块：
1. Node服务，提供数据代理，路由，和服务器渲染，通过restful api和后端通信。
2. web应用开发，专注于web交互体验。
3. 前端运维：包含构建，测试，部署及监控等。

• Node服务：用于实现前后端分离，核心功能是实现数据代理中转，附带url路由分发和服务端渲染功能。
• Web应用开发：纯粹的前端模块，给予前端工程师极大的自由度进行技术选型，专注于Web交互体验的开发。
• 前端运维：主要指前端项目构建和部署、工程质量（源码质量检查和测试等）及监控服务（日志、性能等）等工作。

前后端分离：
- 为了前后端彻底的分离，引入Node服务层。
- 即在Node端通过HTTP请求得到数据后，Web端再通过Ajax的方式从Node端间接获取后端数据，Node服务起到“桥梁”的作用。
- 路由分发
- 服务器端渲染：Node服务端最后一个核心功能是渲染：输出 HTML Shell和 JSON。输出JSON字符串的用途是为了浏览器端能以Ajax形式动态获取数据，而输出的HTML内容则是我们Web应用的所需的HTML“壳子”。

这主要是SPA的快速发展，前端的用户体验大幅提升。

静态资源与Node端衔接：
- 前端静态资源构建工作与Node服务相互分离，Node服务在开启的过程中会读取前端构建生成的静态资源映射表。
- 静态资源映射表的生成：
- 预编译：ES6语法转义，css预编译器处理，源码质量审查，测试
- 模块依赖解析
- 压缩，静态资源版本号

前端构建工具基本都提供静态资源映射表生成插件，比如构建工具Webpack就存在插件assets-webpack-plugin来实现该功能。

鼓励遵循下面几条“约定”：
- Ajax请求从Node端代理，而非具体后端服务。
- 鼓励将JavaScript、CSS、HTML视为前端领域的“汇编”。
- 重视前端页面状态管理，推荐的方案有Redux、vuex及MobX等。
- 强调组件化，面向组件集开发。

项目的脚手架，来搭建项目的开发环境。

工程质量保证，在每次的commit，同个项目要求遵循同一套编码规范，并采用ESLint等工具进行约束，对于一些复用性高的核心组件也强制要求写测试。
甚至是接入单独的系统测试。

总结

前端工程化体系的引入，让前端开发能和原生App应用项目开发一样“自成体系”，脱离了对后端项目的依赖。基于“约定优于配置”、“按照约定写代码”的原则对Node层功能的设定能够降低沟通协调成本，构建、部署等工作的规范化，使前端技术人员的开发重点回归到Web应用的交互体验本身，回归到“纯粹”的前端研发。

后言

作为一个前端的新人，我做了几个项目，也在不停的写博客，demo项目，那为什么我会关注前端自动化，工程化？

前端既然是一个技术快速迭代的领域，我们就该关心技术栈的发展。从这个层面上，才规划我们的技术学习，国内的很多互联网公司都有对外的技术博客，和分享沙龙，这些是我们这些小前端来领略大公司风采的好机会。

当我们对一线互联网公司的做法有了一定的了解，就开阔了自己的视野，也会不断的扩充自己的技术栈，而不仅仅是做一个简单的切图崽，这是驱动我们不断学习新技术的动力，在市场上已经有互联网公司在这么做。

这是理念的革新，前端早已不是刀耕火种的时代，有了自己完整的技术栈。从我在武汉的面试的公司来说，有公司还很落后，对前端的理解还很浅。用这些的好处是不言而喻的，那么为什么还有那么多的公司没有采用这样的前端开发方案，可能是没有对前端自动化，工程化，组件化的理解不全吧，或许是没有动力这么做，像有些前端工具用了就再也回不去了。所有果断的拒绝了武汉的一些实习，学习，准备春招。