# 前端工程简史

# 1.前端工程师的基本素养

前端工程师的发展史

• 1990年 Tim Berners Lee发明了第一个网页浏览器 WorldWideWeb。

• 1995年 Brendan Eich完成了第一版的网页脚本语言的设计。

（这时期没有专门的前端人员）

• 2005年 Ajax技术的问世 令静态的页面“动”了起来。（第一批专职前端工程师产生了，大批是设计出身）。

（这个我有体会， 在学校的时候聊起来WEB开发，学校也没有转门的前端开的课程，顶多是一门网页设计的选修课）

• 2008年 JS的V8引擎推出，采用JIT技术使得JS的运行效率大大的提高。业内开始提倡使用REST风格的Web服务API 和 SAP单页应用。

• 2009年 Node.js 问世，将JS语言带入到了服务器端开发领域

（我在这这段时期还有一些体会，可能和工程化无关，但确实是前端工程师发展的一个经历） （V8引擎在初期性能还不是很高，那时候流行了很长时间的 RIA技术（富客户端），以adobe的FLEX框架 和 微软的Silverlight最为出名，也就是那个时候真正的前后端分离的开发才被广泛的应用。后期的很多框架 如AngularJs也都是受到了FLEX的启发。而FLEX的开发语言和类库也是完全独立于JS体系之外的。

• 2012年 HTML5规范正式定稿，导致了前端工程的重大变化，富客户端不再是首选，这个时候才更多的人重新回到JS的世界。

前端工程师的技能栈

• 硬技能 ：HTML/JS/CSS三驾马车，这里面有很多的延伸，比如ES6,TS,CSS3,WebGL等等
• 软技能 ：用户体验方面（ 性能优化，浏览器原理，HTTP簇协议，V8引擎原理，访问安全，跨域访问等等）
• 扩展技能：后端服务器语言JAVA Node等等 ，数据库知识。

# 2.Node.js带给前端的变革

Node带来了前端的第二次新生（第一次是Ajax）。

1. Node 实现异步的核心是 Event Loop 事件循环。
2. Node 并非一个JS框架，而是集成了V8引擎、事件驱动和底层I/O API，并且可使用JS开发的服务端应用的运行环境。
3. Node

• 使得JS开发 脱离了浏览器，可以完成像JAVA一样的服务端开发，
• 可实现同构JS，同构的目的就是领JS编写的代码既可以在浏览器端工作，也可以在服务器端工作，这意味着SPA浏览器的一些缺点可以使用SSR服务端渲染解决。
• 丰富多了前端的生态工具，npm、grunt、gulp、webpack、NWJS、Electron等等

# 3.前后端分离

前后端分析对于工作效率的提升。

1. 实现并行开发，缩短开发周期。
2. 可以在测试时更快更精准的定位问题。
3. 部署时将静态文件 和动态文件分离部署并结合回滚策略简化部署流程。（后端服务的修改只要接口不变对于前端是透明的无影响的）

前后端分离的基本模式 前端工程师主要负责

• CSS以及相关图片等媒体资源
• JS逻辑
• HTML文档

对于前端工程师后端提供的唯一产出就是数据。

开发阶段：主要解决两个问题，静态资源的处理和动态资源的处理。静态资源就是JS css 图片之类的 这种好处理，动态的就是HTML模板，这种需要服务端进行模板绘制，在开发过程中 最好的情况是前端人员也负责HTML模板的开发。 部署阶段：主要解决的是静态文件缓存的问题。可以通过nginx设置缓存策略，可以通过跟新文件名称的形式更新文件等等。

前端工程化的最终目的之一就是实现更合理、更便利的前后端分离开发环境。

# 4.前端工程化

前端工程化的衡量标准：快，准，稳

1. 从开发角度衡量的话就是“快”，在保证开发质量的前提下,尽可能的提高产品的开发速度。
2. 从测试角度就是“准，快”，快速定位问题，快速进入测试和体验阶段。
3. 部署环节体现的是“稳”，上线的稳定，持续更新的稳定。

前端工程化之前在目前情况下做前端开发需要解决的典型问题

• ES6的不兼容问题
• CSS的弱编程能力
• 资源的定位
• 图片压缩/base64内嵌/雪碧图
• 模块依赖分析和压缩打包
• JS部分逻辑依赖接口数据
• 部分资源需要借助后端工程师部署

前端工程化的第一步：“构建”,构建是通过一系列工具提高钱罐工程师单方面的工作效率

前端工程化的第二步：“加入本地开发服务器”，最典型的就是Mock服务器。

前端工程化的第三步：静态资源和动态资源的分离部署

前端工程化的3个阶段。

1. 本地工具链形态-工程化不是工具化，工具是实现的方法，工程化的灵魂是一整套规范。
2. 管理平台形态-进一步淡化差异加深规范。权限的几种管理，提高安全性。项目版本的几重管理便于危机处理和回滚。
3. 持续集成-前端工程化的目标是融入整体。

# 5.前端工程化方案架构

目前前端工具大体分为3类：

1. 工作流管理工具 ： grunt, gulp
2. 构建工具 : webpack, rollup
3. 整体解决方案： FIS, WeFlow

webpack : 相对于FIS grunt gulp 在目前的趋势下使用的人数更多，而且现在流行的vue和react都有官方支持。

工程化方案的整体架构

本书构建的整体架构如下图，是一套以Boi为例子的本地工具链。

功能规划

• yeoman 为内核的脚手架
• 以Express承载的本地服务器
• 以webpack 为内核的构建系统
• 基于SSH协议的远程部署功能

1. 命令行工具 Nodejs命令行工具开发并不是难事，可借助优秀的辅助工具完成，如 commander.js （命令行开发辅助工具是一个学习点）

   1.1 首先在package.json 文件中声明bin字段指向项目的入口文件。

    "bin":{
        "boi":"bin/boi.js"
    }
   

   key的值 boi 是命令行工具的主命令，value 值 “bin/boi.js”是词命令调用的文件路径。在 boi.js 顶部 #!/usr/bin/env node 的意思是需要node执行。 然后可以使用commander.js定制具体的子命令了。

   命令	功能
   boi new	脚手架
   boi build	构建
   boi server	开发本地服务器
   boi deplpy	远程部署

2. 构建功能规划： 主要解决前端开发层面的问题

• ES规范的转译。
• CSS预编译器的支持。
• PostCSS处理hack后缀。
• 自动创建CSS Sprites图。
• 图片压缩。
• 小体积图片base64内嵌。
• JS模块化规范支持。

3. 环境区分

一个前端项目从开发到上线需要经历三种不同的环境：开发环境 测试环境 生产环境。不同的环境对工程化的需求也不相同。比如生产环境需要压缩代码，而开发环境不需要，测试环境不对代码做混淆等等。

• dev 开发环境
• testing 测试环境
• prod 生产环境