0

0

康威定律和 Web 开发中的关注点分离

霞舞

霞舞

发布时间:2024-10-22 10:55:12

|

377人浏览过

|

来源于dev.to

转载

康威定律和 web 开发中的关注点分离

康威定律指出,软件系统往往会反映构建它们的组织的通信结构,它在现代 Web 开发的结构方式中发挥着至关重要的作用。从早期实践到当今更复杂的系统(例如微前端和基于组件的架构)的演变在很大程度上是由这一原则决定的。通过研究历史上 Web 开发中关注点是如何分离的,我们可以更好地理解当前实践是如何出现的以及为什么它们看起来像今天这样。

在 Web 开发的早期,不同的团队通常负责特定的技术。一个团队负责 HTML,另一个团队负责 CSS,还有另一个团队负责 JavaScript 和服务器端逻辑,例如 PHP。这种明确的职责分离或“关注点分离”是由每个团队拥有的独特技能驱动的。设计师将像素完美的 Photoshop 文件交给一个团队,然后该团队将这些文件转换为 HTML 和 CSS 模板。模板完成后,下一个团队会将它们集成到应用程序中,当事情不完美时经常会遇到摩擦。

设计师可能会提供一个 .psd 文件,其中表格的所有九个角都经过精心设计,HTML/CSS 团队会将其分割成工作布局。但它们在很大程度上与应用程序的实际逻辑或用户交互脱节。他们的工作只是确保视觉效果有效。然后,处理 PHP 和 JavaScript 的后端团队会将这些静态模板集成到正在运行的应用程序中,但通常会发现早期团队提出的解决方案并不适合应用程序的需求。这反映了组织的结构,每个团队负责流程的不同部分,没有太多的交叉沟通。

向基于组件的架构的转变

今天,我们分离关注点的方式发生了巨大的变化。现代团队更有可能负责应用程序特定部分的整个堆栈,而不是按技术划分职责(例如一个团队负责 HTML 和 CSS,另一个团队负责 JavaScript 和 PHP)。每个团队通常拥有应用程序的一个垂直部分,包括从前端组件到后端逻辑的所有内容。这种转变是由基于组件的架构的兴起推动的,其中可重用的、独立的组件是系统的构建块。

例如,不再是一个团队专注于整个网站的所有 HTML 和 CSS,另一个团队处理 JavaScript 和服务器端集成,而是现在拥有负责不同功能或组件的团队,例如 <Article> 、 <ChatWidget> 或 <MainLayout>。每个团队从上到下管理其应用程序的组件或部分,包括前端和后端逻辑。这使得团队能够更加自主地工作,减少旧分离模型中经常出现的瓶颈和沟通不畅。

这种新的关注点分离(按功能或组件而不是按技术)允许团队更快地迭代。例如,负责聊天小部件的团队可以对 UI 和后端 API 进行更改,而无需等待另一团队处理系统的某一部分。现在的关键区别在于,您不再拥有只专注于 HTML 或 JavaScript 的专业团队,而是拥有拥有其组件或全部功能的跨职能团队。

微前端和独立团队所有权

这种转变最重要的结果之一是微前端的兴起,不同的团队拥有前端的不同部分,就像他们拥有后端的部分一样。这实现了早期不可能实现的独立程度。微前端架构反映了团队现在在管理其组件方面的独立性。

DreamStudio
DreamStudio

SD兄弟产品!AI 图像生成器

下载

例如,负责 <MainLayout> 的团队可能拥有从 UI 结构到它如何与从 API 获取的数据交互的所有内容。负责 <Article> 的另一个团队将完全控制文章的获取、呈现和交互方式,从前端逻辑到数据库查询。这种程度的自治意味着可以独立部署变更,而无需像过去那样与其他团队协调。

相比之下,在旧的 HTML+CSS 与 JS+PHP 分离模型中,系统任何部分的更改都需要多个团队之间的协调。如果前端需要新功能,HTML/CSS 团队必须与 JavaScript 团队合作,以确保新布局或功能按预期工作。如今,随着团队从上到下拥有特定的组件或功能,团队间协调的需求大大减少,从而实现更快速的开发和部署周期。

康威定律的应用

康威定律仍然一如既往地重要。我们今天构建软件的方式仍然反映了我们团队的组织方式,但不同之处在于现代团队结构更注重功能,更少技术孤岛。按技术划分职责的旧方法(HTML+CSS 与 JS+PHP)已经让位于每个团队负责完整功能或组件的模型。

这种现代的关注点分离可以实现团队内部更好的沟通和更集中的所有权。微前端、基于组件的架构和以功能为中心的团队都反映了康威的洞察力:你的软件将不可避免地反映你的团队的结构。随着我们团队结构的发展,我们构建的系统也在不断发展,变得更加灵活、模块化和独立。

结论

从基于技术的关注点分离到基于功能的分离的转变彻底改变了我们构建 Web 应用程序的方式。康威定律解释了为什么会发生这种演变:随着团队变得更加自主和以功能为中心,我们系统的架构也随之而来。微前端、内部组件库和基于组件的开发都反映了现代对独立、跨职能团队的需求,这些团队拥有其特定功能或组件的前端和后端。

虽然工具和框架不断发展,但基本原则保持不变:团队的构建方式直接影响他们构建的软件。通过了解康威定律和关注点分离的历史,我们可以更好地理解我们今天使用的系统并预测它们将如何继续发展。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

448

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

606

2023.08.10

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

448

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

606

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

531

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

6283

2023.08.17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

49

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 43.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号