每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

多年前，Web 应用程序开发人员拥有创建应用程序所需的知识和技术技能，但现在需要更多的专业化。

大约 15-20 年前，Web 应用程序开发人员拥有创建应用程序所需的知识和技术技能：HTML、CSS、JS、PHP/Python/ASP、Web 服务器管理、MySQL/Postgres（数据和服务管理）、等等

随着时间的推移，Web 应用程序变得越来越复杂，需求也越来越大。新技术、框架和范例反弹到开发中，并推动开发人员专注于某些领域，从这种专业化中产生新的角色。

如今，涵盖公开任务/技能和典型要求的 Web 应用程序的等效典型角色是设计师、前端开发人员、后端开发人员、平台工程师，并且在面向数据的公司中：数据工程师、数据科学家等。

我想将这篇文章的重点放在前三个角色上：设计师、前端开发人员和后端开发人员。

你可以认为我犯了一个错误，因为帖子的标题说tech roles，我添加了 designer 的角色。好吧，对我来说，这是一个技术角色；也许它是分散的，但它们是离应用程序用户最近的角色，它们是用户（和产品）与前端团队之间的一种桥梁。

让我通过与应用程序用户的距离来表示角色或团队（这种表示可能因应用程序而异，但它涵盖了很多情况）。

我将做一些简化来解释这一点：

• 设计团队负责用户在应用程序上看到的第一件事：视觉效果。
• 前端团队负责实现这些视觉效果和用户交互。
• 后端管理用户与数据的交互并实现业务逻辑。
• DevOps（平台）为一切工作创建上下文（服务器、数据库、网络）。

前端角*界色**面和边界

要定义前端角色（或团队）的职责，让我们开始定义边界：我将在图像的右侧进行。

前端和后端之间的天然接口是一个契约：一个API。它可以是 REST HTTP API、gRPC API、GraphQL API，甚至是应用程序的内部控制器。这个边界看起来是一个硬边界，但我们会看到它并不像你想象的那么难。

定义右边框后，让我们对左边框做同样的事情，即设计的那个。这通常是应用程序元素、布局和屏幕的静态设计、Figma 文档或类似内容。

这是一个简化；我知道还有其他工具、定义视觉和功能要求的方法等。

前端团队职责

了解边界后，让我们定义前端团队的高层职责：

• 将设计转换为 HTML/CSS
  • 应用布局
  • 创建和维护应用程序的组件
• 为组件和过渡添加和维护动画
• 处理使用交互
• 加载数据并将数据发送到 API
• 管理和显示后端错误消息
• 表单/实体验证
• 实施和维护业务逻辑
• 实现和维护 UI 逻辑

这些职责（以及更多）完全不同，需要不同的技能来管理它们。正如我之前提到的，在过去，一个开发人员在不考虑这种分离的情况下获得所有这些并解决相关任务是很常见的；很久以前后端和前端分离也发生过同样的情况，这种情况不存在，现在拥有前端和后端开发人员非常普遍。

如今，我们可以为前端中的每项职责提供更专业的角色。我们可以再次分为两个子组：前端视觉和交互以及前端 内部。我通常称其为“前端的后端”。

“前端视觉和交互”负责将设计转换为浏览器可以理解的代码（HTML 和 CSS），实现动画、布局、用户交互（例如，在用户点击时发出事件），以及渲染数据。所有这些通常都属于 Vue、React 等框架的组件。这组职责需要更多 HTML、CSS (SCSS)、SVG 和浏览器事件方面的知识。

前端内部承担更接近后端的职责：连接到后端，获取数据，为视图准备数据，验证表单，实现与数据流、约束等相关的业务需求。这个组需要更多的知识Typescript、浏览器 API、HTTP 和异步。

重要的是要说边界并不坚硬，这很好，因为我们将看到允许流动、传播和改进。

两个小组都需要了解业务领域，但以不同的方式，视觉团队需要更好地了解用户将如何与领域交互以及领域如何对这些交互做出反应，而内部团队需要更好地了解数据流，域，事件等。同样，我们应该理解边界是分散的。

我们可以走得更远，在前端视觉和前端内部组中创建更多专门的组，但这种分离背后的逻辑与我上面所揭示的相同。

角色分割、粒度和重叠

回到简单的场景，我们只有一个角色：前端开发人员，但是现在，考虑到之前的分组，我们可以在我们的前端团队中定义不同的角色，这些角色涵盖多个职责子组的技能和职责。

这种角色划分可以很容易地找到更适合团队的人。职位越广泛，就越难找到一个具备该职位所需的所有技能的人，而不是降低职位要求；同样的职位（例如：前端开发人员），今天通常需要比五年前更多的知识。

例如，如果公司需要 CSS/SVG 动画专家，我认为这个职位要求 GraphQL 知识是没有意义的；如果这个人知道，那么完美，但如果不知道，她/他可以学习。

重要的是她/他一开始就适合这个位置，开始分享动画知识；她/他以后可以将她/他的知识扩展到其他责任领域，使入职和适应过程更加顺利。

另一个例子，通常（不是一般规则）来自前端新手训练营的人比接近后端的角色有更多的技能，并且在视觉角色中感觉更舒服。我们是否应该仅仅因为它没有涵盖所有前端技能而放弃该人才？我不这么认为；随着他们获得更多经验，他们将传播知识领域并从其他角色那里获得任务。

角色间的流动性

这些角色之间没有硬边界的一个优点是可以轻松移动。开发人员可以开始参与新的角色，有机地增长他们的知识；例如，_visual's role_ developer 可能需要更改用例、解决错误修复或实现次要功能，但仍处于舒适状态，一次只增加一点，一段时间后可以开始做更多事情和内部的更多任务，相反，内部组中的开发人员可以在视觉中完成任务。

另一个好处是，重叠的领域很容易理解和理解他人和他人的任务，并理解“我可以做些什么来让别人的工作变得轻松”。

重叠角色

在这种角色定义狭窄和分散的情况下，拥有与另一个人的技能重叠的开发人员技能不是问题。这是一个优势；他们可以分担任务，一起工作，并在他们不重叠的领域分享知识。

打破边界

但是我们在设计、前端和后端之间仍然存在严格的界限； 为什么 不打破他们？

我之前提到的所有关于移动性、重叠和专业化的内容都适用于设计和后端的边界。显然，我们可以在设计和后端的角色中进行这种深度查找和细分。

谁不知道学过 HTML、CSS 和 JS 的设计师，也许只是为了让她/他的设计成为现实的好奇心或寻找更好的工作机会，为什么要忽视这些设计技能？让她/他与设计团队合作，或者只是帮助他们了解前端的技术可能性。

“越过”右边界比较常见，我们称他们为全栈，但是继前者之后，全栈开发者也有不同的类型，看他们把自己的知识领域限制在左右的哪个位置。在我看来，让前端开发人员，那些角色或知识领域更靠右的人，“跨界”参与后端的任务，至少参与那些与前端更相关的任务。它总是富有成效的，并增加了团队之间的沟通和协作；该开发人员不需要知道后端的所有细节和内部结构；例如，如果后端使用六边形架构，此人可以使用已经实现的服务和实体来实现或维护控制器和应用程序用例。

相反，后端开发人员可以实现从 API 读取数据并将数据转换为域实体的前端存储库，而无需深入了解前端框架的工作原理。

发挥团队成员的优势

A 所写的这种细分不是关于对团队进行细分或划分以创建更多或即将在组织中创建更多结构；它是 关于确定团队成员的优势并加以利用，通过更好地了解其他知识领域及其需求来增强与其他团队和团队成员的工作同理心，同时通过重叠这些领域来最大限度地减少知识孤岛.

我相信在未来几年，创建大型 Web 应用程序所需的知识会更多，我们可能会看到前端视觉团队和前端纯开发之间的某种分裂，但我坚信这是一种任意划分，并且具有专业知识但可以担任其他角色任务的人对任何组织都非常有用和富有成效。