浅谈前端项目工程化

自从前端开发工程师这个称谓出现以来，前端的发展可谓日新月异，前端技术层出不穷，相比后端而言，虽然较晚出现，但其增长速度是其他领域不能比拟的，近来时间比较充裕，回想一下自己的开发之路，从原来的页面切图到后端的填充模板，再到现在的前后端分离，以及nodejs的出现，现在大火的大前端，算是见证了前端的发展历程，接下来从以下几方面谈一谈我对前端工程化的理解。

前端开发的演变

前端开发的现状

工程化是什么

如何理解工程化

业界的前端工程化思想

基于开源框架的前端开发

我们的现状以及工程实施

现状缺失

我们的期望是什么

谈谈解决问题的思想

1、前端开发的演变

网页设计+切图+html代码编写 —— webpage1.0

UI+(CSS+JS+HTML)[jquery/bootstrap/less] ——webpage2.0

用户体验设计（UI+UE） +（CSS+JS+H5）[前端框架+三方包管理工具+less/sass +模板引擎]——webapp

想想当初的页面仔，拿到设计的psd文件，大概了解一下页面的布局结构，就是一顿切图、div+css，也很少有前端的逻辑，有的也只是一些表单操作，出现了更复杂的页面之后，jquery、bootstrap等框架库应运而生，大大简化了页面的开发工作，然而随着需求的不端增加，开发难度的不端加大，出现了react、angula、vue等mvvm框架，让前后端开始分工合作，各司其职，开发效率大大提升。

2、前端开发的现状

webpage -> webapp

multi-page -> single page application（单页面应用）

前后端技术组合应用（服务端渲染+客户端渲染）

应用复杂，更注重架构设计

开发团队人数越多，越注重多人协作

随着移动互联网的到来，对有限资源的手机端性能的要求以及对用户体验的要求越来越高，随之项目复杂度增加，体量越来越庞大，开发团队人数也越来越多。

这种情况下，如果以原有的难以拆分和难以量化的开发方式，像变魔术一样隐匿中间流程而直接得出结果的东西，后果可想而知：项目复杂度越增加就越难以管理，开发效率低，合作混乱，结果甚至导致项目死亡。

面对这种现状，急需一种可量化，可分解，可验收的精细管理流程，来hold住项目开发。

3、工程化是什么

通过技术把需求转化为产品的实现过程

什么事情需要工程化：复杂系统、多人协作、按需交付

工程化的过程就是一套项目管理流程：对接到产品需求通过现有技术进行分解，达到可量化、分权责、高敏捷、验收交付清晰、易管理的目的

特点：有计划、有步骤、可量化、分权责、交付清晰、易管理

4、如何理解工程化

互联网的世界，都可以在现实中找到映射

例子：建筑工程需求->预研->需求分析(业务逻辑角度)->可行性分析(技术层面)->立项->设计(架构设计，数据结构设计，数据流设计，业务模块分解)->施工(业务模块分工，开发周期，开发粒度，人力规划，环境部署)->测试(单元测试，集成测试)->验收->交付使用

5、业界的前端工程化思想

模块化、组件化、规范化、自动化

①模块化就是在解决一个复杂问题时，用分解的思想对系统进行功能模块拆分，将系统功能块进行分割后，再复杂的系统都可以将管理、开发、维护变得有理可循 。

模块化实现步骤：

1.模块封装定义 2.模块依赖定义 3.模块引入支持

CommonJs规范 — 同步加载模块的方式，适用于服务端node程序

AMD规范（异步模块定义） — 异步加载模块的方式，适用于客户端渲染程序，RequireJS是AMD规范的阐述

CMD规范（通用模块定义）— 异步加载模块的方式，既可以适用客户端也可以适用服务端node SeaJs是CMD规范的阐述，

前端模块化CMD规范seajs的使用

②组件就是一个UI小单元，实质是也是分解的思想。每个组件都包含独立的（JS+CSS+HTML）实现逻辑，组件化可让代码复用率高，结构清晰，分工明确，与模块化区别的是，模块化是功能代码层面的分解，而组件化是UI界面上的分解

③为何要规范化？进行分解后的系统，虽然个体变简单了，但如果没有全局的规范协调，就会让系统变得无组织而混乱不堪，系统规范是分解单元间的粘合剂，小哥哥小姐姐们这里有一份前端开发规范，求求看一遍吧

目录结构：清晰的目录结构有利于代码组织、资源管理、减少开发时的思维障碍

编码规范：对象定义、配置规范，命名规范...

前后端接口规范：每个业务的数据流和数据结构都需要严格定义、确定前后端各自负责的逻辑、清晰的API文档输出。

文档规范：写好注释，善用文档生成工具

注释说明：每个模块，组件，内部的重要逻辑块，都需要注释说明

模块/组件划分规范：功能模块的抽象层级要确定，哪些需要抽象哪些不需要。组件拆解要尽可能复用，最好是除了容器，其他UI单元都组件化

gitflow代码管理：严格按照gitflow的管理流程，提交颗粒度以一个模块或一个组件问基本单位

静态资源管理：静态资源需要进行归类

部署管理：本地，开发，生产环境的部署配置

④自动化

性能优化：网络资源请求的优化，模块加载，前端逻辑实现算法...

部署优化：不同环境中的代码自动化管理

代码生成器：按组件规范进行代码定制生成

6、基于开源框架的前端开发

Vue.js：前端应用框架，MVVM模式，忽略DOM操作，着力于组件通信，数据绑定的实现模式

Express： 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

webpack:模块/资源打包工具

babel:语法转换工具

less/scss:css生成工具

nuxt.js:一套整合前端项目开发的服务器端渲染框架

这一套也是我目前所使用的技术栈，真的可以了解一下哦。

7、我们的现状以及工程实施

服务端渲染 for PC（支持SEO） + 客户端渲染 for Mobile

基于Vue.js，Koa，webpack等开源库，已实现模块化

UI组件切分

公用方法模块抽象

基于pm2的部署管理

基于gitflow的代码管理

8、现状缺失

命名规范

注释规范

文档规范

组件切分层级需再清晰

静态资源请求再优化

9、我们的期望是什么

高效的团队协作：敏捷而不变形的开发效率

可量化的清晰流程：业务查分清晰，功能代码模块化，UI界面组件化，权责到人

高可维护性：无论是对已有的业务代码还是对后期的新增迭代都达到易于维护的目标

统一的开发规范：统一的协作规范

10、谈谈解决问题的思想

分解：已了解未来特定时间产品目标的情况下，对所做的事情进行分解是比较科学的做法

演化：对不可预见未来的产品目标，常常无从下手，所需要注意的就是大方向的把控，在最大的可预见未来里进行设计上的预留，而实在不确定的就不要做过度的设计，让外部环境来决定进化

时间意识：做一件事常常有时间周期的，特别是交付上的要求，我们难以预估通常是对自身的不自信。时间不确定是影响事情推进的最大阻碍。

突破口探索：有些硬骨头通常难以下手，怎么办？别惧怕复杂，复杂都由简单组成。

作为前端开发者，要有以下基本要求：

单兵作战能力：扎实的技术基础，深刻的产品理解，权责明确，对任务负责。

团队作战能力：互助，全局考虑，对整体目标负责。

遇到坑？把问题摆上桌面！