2022年Web前端开发流程和学习路线（详尽版）_web开发 ui 前端 后端 对接 流程

前言

前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。

前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个要求：要折腾，爱折腾，反复折腾。

一、前端开发流程

需求评审

一般在做需求评审时，PRD里只有交互稿，尚未有视觉稿。需要在评审结束并达成一致后，再输出视觉稿。

1、需求分析：需求点逐一讨论、需求合理性、交互评审、逻辑梳理，以及可能遗漏的部分。

提示：逻辑梳理的过程很花时间，贯穿开发始末。

2、涉及渠道/环境：

渠道和环境，往往是需求盲点，也是影响技术选型和开发进度的关键因素。

• App：App原生页面、App内嵌H5、App内嵌小程序。
• 小程序：技术栈视角：小程序原生页面、小程序内嵌H5、App内嵌小程序。
• 普通H5：微信H5、M站（即普通浏览器环境）
• B端：运营管理平台等等

3、可行性分析：是否有技术上的实现难点，是否有其他的依赖条件。

数据来源：哪些是调接口，哪些是做成可配置，哪些是前端写死；可配置的部分，是前端读取，还是接口读取然后返给前端。提示：可配置的灵活性与风险正相关。

异常流设计：容错、容灾、兜底、降级、回退机制、风险可控。prd一般只写了正常流的逻辑，异常流往往需要研发同学配合做全盘考虑。

6、需求变更：如有需求不明确、改需求、加需求、砍需求、加时间、改时间、加人力等等，需要提前预判风险。

视觉评审

1、进度跟进：视觉稿是分批交付，还是一次性给到？这是要首先考虑的。

按照历史经验，前端项目进度的延误，有一半的概率依赖于视觉稿的进度；因为一个新页面的开发，前端有30%~50%的工作在做页面构建。

2、视觉稿的文件格式：

• Sketch 原型设计软件：.sketch 格式。一般用来画视觉稿。
• Figma 原型设计软件：.fig 格式。
• Axure 原型设计软件：：.rp 格式。Axure 一般用来画交互稿。如果是输出高保真的视觉稿，推荐用 Sketch 或 Figma。
• Photoshop 软件： .psd 格式。专门做图片处理。当然，有些CP外包人员的技能单一，喜欢用PS输出视觉稿。
• Adobe Illustrator 软件（简称AI软件）：.ai格式。制作矢量图。
• Adobe After Effects（AE） 软件：.aep 格式。制作动画。

备注：Sketch 是Mac平台独有的原型设计软件，最为知名和常见。Figma 是最近比较火的全平台原型设计软件，有取代 Sketch 的趋势。

【划重点】交付视觉稿时，需要视觉同学输出“带尺寸标注”的视觉规范文件。

3、检查需求：是否覆盖需求和交互设计中的全部设计点。

4、检查视觉规范：

• 样式和配色，是否符合页面和产品的整体风格。
• 尺寸规范：移动端的视觉稿宽度是750px。
• 排版、对齐、一致性。推荐阅读书籍《写个大家看的设计书》，了解基本的设计原则。
• 字体：字号大小（一般是12px以上，特别小的是10px以上）、字重（注意bold属性值为700），以及有哪些特殊字体。尤其要注意字体的版权问题。

5、哪些图是前端构建，哪些图是写死图片资源，哪些是可配置；可配置的图中，需要把每个元素做拆解，这个元素是合并到背景图中，还是单独切图，还是读取数据。

6、切图格式：png（透明格式）、jpg

切图的图片大小，不要太大。移动端的大图（比如幕帘弹窗的背景图）建议不超过50kb，小图建议不超过20kb。图片在上传之前，可以先在 TinyPNG – Compress WebP, PNG and JPEG images intelligently 上进行压缩。

7、复杂图形、动画的实现难度和实现方式，技术评估。详见接下来要讲的「技术选型」。

排期评估

1、排期一般包含这几个要素：

• 开发时间：视觉构建时长、接口文档（接口协议）交付时间、前后端联调时间、自测时间
• 转体验时间
• 转测时间
• 上线时间（以及，需确认业务投放时间）

2、评估排期时，要根据视觉稿排期，不要根据交互稿排期。这是首先要强调的。一个新页面的开发，前端有30%~50%的工作在做页面构建。 只看交互稿的话，无法评估真实的开发工作量。

3、前端开发工作包括：概要设计、视觉构建、逻辑代码、前后端联调、自测、转体验。每一项都要单独拆解后评估时间，加在一起就是整体的排期。

4、排期时，要考虑其它的依赖因素：比如视觉稿延期、需求不明确、接口进度、测试进度，当然最重要的是上线进度。紧急项目，经常是根据上线时间倒推开发排期。

5、即将进入开发阶段后，与测试部门协调测试资源，确认转测时间；大型项目&重点项目，需要在需求评审阶段，提前知会测试部门，让其预留时间。

6、如果自己有在并行开发其他项目，则排期时需要给自己预留 buffer。并行开发两个项目是家常便饭；但，这个项目在测试时，往往很难抽身去做别的项目，因为会一直被测试童鞋牵制。

7、开发排期：如果开发排期有变更，需要立即周知其他相关人员，尤其是要评估测试排期的风险。测试排期比开发排期 更难变更。

技术选型

技术选型千变万化，百家争鸣。这里需要列出你所在部门的常用技术选型，并非市面上的技术栈罗列。

1、页面开发框架：

（1）多端页面：（小程序原生页面、H5）

• Taro 框架（基于 React技术栈）

注2：有些业务，一开始只做H5，后来迭代时，要求做小程序原生页面。这一点也要纳入需求评估。

（2）H5页面：Vue.js 框架、React 框架

（3）App端：

• Android端开发语言：Kotlin（新）、Java（老）
• iOS端开发语言：Swift（新）、Objective-C（老）

（4）B端开发，UI框架：

• React 技术栈：Ant Design（简称Antd）
• Vue 技术栈：Element、Ant Design Vue
• 较简单的CSS响应式框架：Bootstrap

（5）Node.js后端开发框架：

• Koa：新一代 Node.js 框架。
• Egg.js：Egg 是在Koa基础上进一步封装的企业级Web开发框架。
• Express：比较老的Node.js 框架。

2、CSS预处理器：SASS

3、复杂图形、动画的实现难度和实现方式，技术评估：

• gif 动图：尽量不用。因为文件太大，且效果模糊。

• CSS3 动画：适合简单的、有规律的动画。举例：摆动的鱼、京喜工厂

• Canvas：Canvas 动画、小程序分享图采用 Canvas 绘制

• 3D动画：WebGL（Three.js 是 WebGL 的综合库）常见案例：太阳系

• 游戏框架：Cocos 引擎

概要设计

• 需求背景及资源
• 风险评估
• 技术选型
• 项目结构设计
• 主要功能点逻辑设计
• 可扩展可复用设计
• 依赖接口
• 工作量拆解和排期

开发环节

1、代码设计：

（1）目录结构设计、代码风格