工作流程与过程
技术项目的一个重要方面，但初学者常常忽略的是对大局的理解。他们可能学习了某个工具或语言，但却不了解为了交付一个完整的 Web 应用程序所需的所有库、工具、系统和工作职责。以下各节将从高层次介绍不同的“大局”方面。
| 预备知识 | N/A |
|---|---|
| 学习成果 |
|
典型的技术组合
在构建网站时，您将使用不同技术的组合，通常称为“技术栈”。随着网站变得越来越大、越来越复杂，技术栈也会随之变得复杂。当您创建演示版，只有您和少数同事会查看它时，技术栈可能很简单。然而，一个看似简单的生产网站的技术栈可能比您最初想象的要复杂，因为它需要做到：
- 快速加载（这是性能的目的）。
- 同时处理大量用户（它必须能够扩展）。
- 设计良好，以便用户可以轻松访问其中包含的信息和服务。
- 易于团队协作和维护。
从非常高的层次来看，一个 Web 应用程序的技术栈可能如下所示：
Front-end HTML, CSS, JavaScript | Back-end Node.js, .NET, PHP, Python, or some other server-side language | Database MySQL, Postgres, MongoDB, or some other database | Web server Your own, built around a server product such as Apache, or a service like Netlify
在 MDN 上，我们主要关注前端部分，但即使是前端也可以分解成许多不同的部分。以前端为例：
- 您可能会使用 JavaScript 框架（例如 React）来定义组成用户界面的组件。
- 该框架可能会使用某种模板语言（例如 Mustache）来定义 HTML 结构，同时提供动态包含可变内容的功能。
- 您将通过 CSS 包含信息来样式化您的内容，使其与框架兼容。这可能以纯 CSS、CSS 框架（例如 Tailwind）或预处理器（例如 Sass）编写。
- JavaScript 项目应包含测试，以确保任何新代码添加不会破坏其功能。测试通常使用测试框架（如 Jest）实现。
- 大型网站将使用打包/构建工具（例如 Parcel）来通过减小文件大小、从生产代码中删除未使用的组件等方式提高性能。
- 以此类推。
注意：您经常会听到网站和应用程序被描述为使用特定的“架构模式”构建的。例如，模型-视图-控制器 (MVC) 是许多 JavaScript 框架遵循的一种模式，而 发布-订阅 (pub/sub) 通常用于消息传递应用程序。您不必详细理解这些模式，但熟悉它们对于理解新框架或工具可能会很有用。
除了实际的技术栈本身，还会有一些工具来帮助您管理它或为网站创建资产，例如：
- 计划工具，帮助您在高层次上规划整个项目过程中将要做的事情（例如 Miro）。
- 版本控制系统 (VCS)。您可能会使用基于 Git 的 VCS，例如 GitHub。
- 图形/界面设计软件包（例如 Figma 或 Canva）。
- 项目管理工具，例如 Trello 或 Asana。
好的，这有很多东西要消化。我们的建议是：不要恐慌！本文的目的不是让您突然觉得需要学习的东西比以前多了 10 倍而感到焦虑。其目的只是让您了解网站项目的大局，并让您对可能遇到的一些术语有一个基本的熟悉。
最终，您将对上述几种工具和技术有所了解，但您不会成为所有这些方面的专家，也不需要成为专家——这就是团队的意义所在。目前，您正在做的事情绝对正确，那就是学习核心技能，例如 HTML、CSS 和 JavaScript。更多的工具和专业化将在您的职业生涯后期出现。
工作角色
在 Web 开发团队中，涉及许多不同的工作角色；了解每个角色都包含什么很有用：
- 产品经理
-
从产品角度负责整个网站——产品在市场上的表现如何，与竞争对手相比如何？它的优点和缺点是什么？目标受众正在寻求哪些新功能，哪些是最高优先级的？网站的主要成功标准是什么，最近的新功能如何帮助达到这些标准？产品经理将收集数据并撰写报告，以帮助团队了解他们的工作效率，并优先安排未来的工作。
- 项目经理
-
负责组织团队需要完成的工作。项目经理将制定包含优先任务和截止日期的项目计划，分配人员完成每项任务，定期召开签到会议以查看是否达到进度目标并发现任何问题，并根据需要调整计划。
- 用户体验 (UX) 设计师
-
负责了解产品目标受众的需求，并设计产品工作流/体验，以最有效地满足这些受众需求。典型的 UX 问题是“当用户登陆我们的主页时，我们应该首先将用户引导到哪里？”以及“我们如何才能使注册帐户尽可能简单直观？”这项工作通常与用户研究和测试相结合，以更好地了解目标受众，并创建线框图以传达想法。UX 设计师是产品经理报告的主要消费者之一。
- 平面设计师
-
负责网站项目的视觉设计工作。平面设计师负责各种设计领域，例如排版、选择配色方案、创建图标和其他图形资产，以及根据 UX 设计师的线框图创建网站模型。
- 前端开发人员
-
如果您正在阅读本文，这（可能）就是您的目标！前端开发人员使用 HTML、CSS 和 JavaScript 创建用户交互的网站视觉部分，将 UX 和平面设计师创建的行为和视觉模型变为现实。
- 后端开发人员
-
负责网站的非视觉部分。他们编写后端代码来请求内部数据，从模板生成 HTML 页面，并处理用户提交的外部数据。他们还处理 Web 服务器配置、确保网站安全等。
- 全栈开发人员
-
同时处理前端开发和后端开发任务。
- 质量保证 (QA) 工程师
-
负责测试新功能以确保它们正常工作并报告错误，与开发人员沟通以帮助他们优先处理必要的修复。
- 内容专家/技术撰稿人
-
负责确保网站的文本内容尽可能地适合目标受众。这包括信息结构及其导航方式、用户界面文本标签、博客文章、营销文本和产品文档。
不太常见的工作角色
其他不太常见的工作角色包括：
- 用户研究员
-
大型团队通常会有一个专门的研究员来进行用户研究和测试。
- 搜索引擎优化 (SEO) 专家
-
分析网站的内容和结构，并进行更改，以使网站在相关的搜索引擎结果中更显眼。有关更多信息，请参阅 SEO。
技术项目阶段
一个典型的技术项目可能按以下方式进行：
- 产品经理确定了一组新的网站用户需求。
- 他们与团队讨论，并决定可以通过向网站添加新功能来满足这些需求。
- 项目经理与团队讨论创建新功能所需的各项工作，并创建管理这些工作的流程。
- UX 设计师为新功能设计工作流，描述其应如何工作，并创建线框图以提供其在网站上可能适合的位置的概念。
- 平面设计师设计了一个模型，显示该功能在网站上的外观，以及选择的字体和调色板。
- 内容专家编写该功能所需的 UI 文本，以及支持该功能所需的文档。
- 后端开发人员创建必要的系统，以安全地存储和处理为该功能提供数据的数据。
- 前端开发人员根据平面设计师的模型创建交互式功能，并将其连接到后端，以便它检索所需的数据。
- QA 工程师彻底测试新功能，并撰写一份详细报告，说明他们发现的问题。
- 开发人员修复被认为足够严重以至于应该阻止该功能发布的错误。
- 一旦（阻止性）错误得到修复并且项目获得批准，该功能就可以在网站上上线。
这是一个简化的视图——在功能实现本身周围会存在其他阶段，并且这些阶段不一定都按所示顺序完成，但这为您提供了所涉及内容的概述。
工作管理流程
项目经理将使用某种流程来管理网站项目，监控不同工作项的进度，确保它们按正确的顺序和时间完成等。两种主要的流程类型是：
- 瀑布
-
指以清晰、固定的阶段运行项目，每个阶段都依赖于前一个阶段，并且预计需求不会有太多变化。通常在项目结束时交付一个大型结果。团队管理倾向于更官僚化，自主权较少。
- 瀑布项目在开始时往往有更好的规范，并且范围蔓延（项目中期添加需求）较少。此外，更大、不那么频繁的产品发布在发布计划、营销、提供培训和文档等方面更容易处理。
- 然而，瀑布通常灵活性较差，更改发生的速度也慢得多。等待数月才能获得错误修复可能会令人沮丧。
- 敏捷
-
指更灵活地运行项目，多个阶段可以同时进行，并且在整个项目的不同里程碑期间会交付多个较小的结果。需求变更在预料之中，并且可以根据需要通过调整优先级来处理。团队通常更具自主性。
- 敏捷项目灵活，可以更容易地适应需求变化。更频繁的发布也可能很好——错误修复得更快，创新更频繁，并且营销团队总是有东西可以谈论。敏捷团队经常谈论持续改进。
- 然而，范围蔓延和截止日期延迟的风险更大，项目往往感觉从未真正完成，并且交付的节奏和压力更加持续。
注意：Web 开发团队通常更喜欢使用敏捷流程，因为软件开发本质上容易因新错误、用户反馈、公司战略等原因导致（有时是快速的）需求变化。
Scrum 和看板
有一种特定的敏捷方法学称为 Scrum，它有一套固定的规则来规定项目如何运行。例如：
- 负责 Scrum 的人被称为 Scrum Master。这通常只是项目经理的另一个称呼。
- 要完成的工作被划分为周期，称为“冲刺”，通常为期两周。
- 在每次冲刺之前，会讨论潜在的新工作项，如果被接受进入冲刺，它们就会被放入待办事项列表。
- 工作项从待办事项列表中取出，并经过不同阶段直至完成，例如“进行中”和“审查中”。
- Scrum Master 每天举行简短的“站立会议”，每个人都会谈论他们取得的进展以及可能遇到的任何问题，以便及早发现问题。
- 在每次冲刺结束时，Scrum Master 会举行一次回顾会议，回顾哪些方面做得好，哪些方面做得不好，以及在下次冲刺之前可以吸取哪些经验教训。
另一种敏捷方法学称为“看板”，它比 Scrum 规则更少，不使用冲刺，并且更侧重于敏捷的持续改进方面。看板特别适用于管理没有明确定义结束的持续流程，例如客户支持工单。
看板
Trello 和 Asana 等工具提供可视化界面，显示项目中不同工作项的状态。它们通常被称为“看板”，尽管它们可以用于管理不同类型的流程，而不仅仅是看板。看板由不同的列组成，这些列可以代表 Scrum 项目中不同的工作状态（“待办事项”、“待办”、“进行中”等）、不同类型的工作（“研究”、“设计”、“开发”等）或对您的项目有用的任何其他内容。
GitHub Projects 提供另一个不错的工具选项，并且免费使用——您只需注册一个 GitHub 帐户。
实践项目工作流
您应该阅读上述流程，并练习使用看板跟踪您的一些工作或个人项目。不用担心使用复杂的 Scrum 方法；目前基本的看板就足够了。即使您是独自一人，练习以下工作流也会很棒：
- 创建任务。
- 决定它们的大小或需要多长时间。
- 确定任务的优先级。
- 按截止日期排序。
- 开始处理不同的任务。
- 随着工作的进展设置其状态（“进行中”、“受阻”、“完成”等）。
跟踪一个完整项目从开始到结束的进度——尝试在您自己的网站或某种副项目上进行。此外，尝试为一个或两个开源项目做贡献；它们中的许多项目都会使用类似于我们上面描述的流程来跟踪它们的工作。
另见
- 什么是技术栈，它们如何工作？, mongodb.com
- 网站开发团队结构：角色和流程, truemark.dev (2017)
- 敏捷与瀑布, ProductPlan
- 什么是 Scrum？, scrum.org