【项目流程】前端项目的开发流程_前端开发工程步骤

1. 项目中涉及的所有角色及其职责

- PM 产品经理
产品经理（Product Manager，简称PM）负责明确和定义产品的愿景和战略，与客户、用户、业务部门和其他利益相关者进行沟通，收集并分析他们的需求和期望。负责制定产品的详细规划，并根据产品的战略目标和需求优先级，确定功能的开发优先级。

产品经理是与开发团队沟通的桥梁。他们与开发团队密切合作，向开发团队传达产品需求和功能细节，解答问题，并确保开发团队理解产品的愿景和目标。

产品经理撰写产品需求文档（PRD），其中包含产品的功能描述、用例、用户故事等详细信息，以便开发团队和测试团队理解需求和开展工作。

产品经理根据需求提供原型图。

- UE 视觉设计师
简称UE或UI/UX Designer）的职责主要围绕用户体验和界面设计展开。根据产品需求和用户研究的结果，设计用户界面，包括页面布局、图标、按钮、颜色、字体等。视觉设计师要考虑界面的易用性和美观性，以及与品牌风格的一致性。

视觉设计师根据原型图绘制出较为美观的设计稿。

- FE 前端开发
前端开发工程师（Front-end Developer，简称FE）是负责构建用户界面和用户体验的关键角色。他们主要负责开发和实现用户在浏览器中直接交互的部分，即前端部分。前端开发工程师需要根据设计稿还原页面。具体职责如下：

• 网页设计实现：将设计师提供的网页设计转化为实际的网页界面，使用HTML、CSS和JavaScript等技术进行页面的构建和布局。
• 用户界面开发：负责开发和维护用户界面，包括各种页面、表单、按钮、导航栏等用户交互元素的实现。
• 响应式设计：确保网站或应用在不同设备上（如桌面、平板、手机等）的响应式布局，以便在不同屏幕尺寸下提供良好的用户体验。
• 前端框架使用：熟悉并应用各种前端框架（如React、Angular、Vue.js等），以提高开发效率和代码质量。
• 数据交互：与后端开发人员合作，实现前端与后端数据的交互，通过AJAX或API调用获取和展示数据。
• 浏览器兼容性：确保网站或应用在主流浏览器中具有良好的兼容性，以确保用户在不同浏览器中都能正常使用产品。
• 性能优化：优化前端代码和资源，以提高网站或应用的加载速度和性能，提升用户体验。
• 测试和调试：进行前端代码的测试和调试，确保产品的稳定性和可靠性。
• 版本控制：使用版本控制系统（如Git）来管理和追踪前端代码的版本变更。
• 技术研究和学习：持续跟踪前端技术的发展和最新趋势，不断学习和提升自己的技能。

- RD 后端开发
后端开发工程师（Back-end Developer）的职责是负责开发和维护与前端用户界面无直接交互的部分，即后端部分。后端开发工程师主要关注服务器端的业务逻辑、数据库操作和数据处理等功能。

- CRD 移动端开发
移动端开发工程师（Mobile App Developer）通常是指“移动端开发”（Mobile App Development）的缩写，而不是“CRD”。移动端开发工程师的职责主要围绕开发移动应用程序，为移动设备（如智能手机和平板电脑）上的用户提供功能和服务。

- QA 测试人员
测试人员（Quality Assurance，简称QA）的职责主要是确保软件的质量，他们负责进行各种测试活动，以发现并报告潜在的缺陷和问题。

2. 项目开发的流程

3. 各个阶段常见的问题

① 需求分析

• 作为前端开发工程师，我们在需求分析阶段需要了解项目背景，我们要知道为什么要做这个需求。
• 可以质疑产品经理提出的需求是否合理。
• 思考所提需求是否全面，能否实现闭环。
• 评估所提需求的开发难度。
• 在需求分析阶段，如果需要其他支持，比如人力支持，就要在需求分析的阶段提出来。
• 不要急于给排期，可在需求分析会议结束之后，在给出排期。要考虑其他人员的排期，同时给自己的排期时长可以预留一些时间，考虑如生病的特殊情况。

② 技术方案设计

• 在技术方案设计时，尽量考虑简单的方案，不要过度设计。
• 最好先产出一个文档，文档的内容可以是对问题的文本描述，以及对代码的描述。
• 找准设计重点。
• 技术方案设计过程中，需要和后端进行沟通。设计完成后需要进行组件评审，同时发出会议结论，可以是聊天记录或者邮件的形式。

③ 开发

作为一个前端开发工程师，我们应该如何保证项目和代码的质量？

• 合理规划自己的排期时长，需要预留出工作量时长的1/4以应对突发情况。
• 开发过程符合开发规范，如commit、git、branch的规范。
• 需要些开发文档（比如公共API需要写文档介绍）。
• 及时进行单元测试。
• 使用Mock API模拟数据，从而提升开发效率。
• 经常进行Code Review，可以找项目团队中经验丰富的老员工帮忙。

④ 联调

• 和后端进行技术联调。
• 让UE确定视觉效果。
• 让PM确定产品功能。（如果需求已经开发结束，此时产品经理增加了需求，我们不应该拒绝，而是走需求变更流程，增加排期，实现需求）

⑤ 测试

• 提测发邮件，抄送项目组。
• 测试问题可以用表格详细记录。
• 有问题时，QA和FE要及时沟通，因为二者之间的信息是不对称的。
• 不能说，这个问题在我的电脑上没有出现。
• 可以去找测试，当面让QA帮你复现。

⑤ 项目上线

• 项目上线后，QA会及时进行回归测试。
• 如果存在问题，及时回滚。先止损，确保其他功能正常使用，再排查。

4. 项目沟通的重要性

• 软件开发是多人协作的工作，因此沟通是最重要的事情。沟通 > 设计 > 开发
• 最好是每日一沟通，汇报工作安排及完成情况，存在问题的问题要及时汇报。
• 要预估到项目中可能存在的风险，及时汇报。