”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 康威定律和 Web 开发中的关注点分离

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

发布于2024-11-26
浏览:562

Conway

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

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

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

向基于组件的架构的转变

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

例如,您现在拥有的团队负责不同的功能或组件,例如 、。每个团队从上到下管理其应用程序的组件或部分,包括前端和后端逻辑。这使得团队能够更加自主地工作,减少旧分离模型中经常出现的瓶颈和沟通不畅。

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

微前端和独立团队所有权

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

例如,负责 的团队可能拥有从 UI 结构到它如何与从 API 获取的数据交互的所有内容。另一个负责

的团队将完全控制文章的获取、呈现和交互方式,从前端逻辑到数据库查询。这种程度的自治意味着可以独立部署变更,而无需像过去那样与其他团队协调。

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

康威定律的应用

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

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

结论

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

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

版本声明 本文转载于:https://dev.to/jlarky/conways-law-and-separation-of-concerns-in-web-development-4cfk?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在php中使用卷发发送原始帖子请求?
    如何在php中使用卷发发送原始帖子请求?
    如何使用php 创建请求来发送原始帖子请求,开始使用curl_init()开始初始化curl session。然后,配置以下选项: curlopt_url:请求 [要发送的原始数据指定内容类型,为原始的帖子请求指定身体的内容类型很重要。在这种情况下,它是文本/平原。要执行此操作,请使用包含以下标头...
    编程 发布于2025-05-28
  • Python中嵌套函数与闭包的区别是什么
    Python中嵌套函数与闭包的区别是什么
    嵌套函数与python 在python中的嵌套函数不被考虑闭合,因为它们不符合以下要求:不访问局部范围scliables to incling scliables在封装范围外执行范围的局部范围。 make_printer(msg): DEF打印机(): 打印(味精) ...
    编程 发布于2025-05-28
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-05-28
  • Java的Map.Entry和SimpleEntry如何简化键值对管理?
    Java的Map.Entry和SimpleEntry如何简化键值对管理?
    A Comprehensive Collection for Value Pairs: Introducing Java's Map.Entry and SimpleEntryIn Java, when defining a collection where each element com...
    编程 发布于2025-05-28
  • 如何从PHP中的数组中提取随机元素?
    如何从PHP中的数组中提取随机元素?
    从阵列中的随机选择,可以轻松从数组中获取随机项目。考虑以下数组:; 从此数组中检索一个随机项目,利用array_rand( array_rand()函数从数组返回一个随机键。通过将$项目数组索引使用此键,我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。
    编程 发布于2025-05-28
  • 如何使用PHP从XML文件中有效地检索属性值?
    如何使用PHP从XML文件中有效地检索属性值?
    从php $xml = simplexml_load_file($file); foreach ($xml->Var[0]->attributes() as $attributeName => $attributeValue) { echo $attributeName,...
    编程 发布于2025-05-28
  • 如何在Chrome中居中选择框文本?
    如何在Chrome中居中选择框文本?
    选择框的文本对齐:局部chrome-inly-ly-ly-lyly solument 您可能希望将文本中心集中在选择框中,以获取优化的原因或提高可访问性。但是,在CSS中的选择元素中手动添加一个文本 - 对属性可能无法正常工作。初始尝试 state)</option> < op...
    编程 发布于2025-05-28
  • JavaScript计算两个日期之间天数的方法
    JavaScript计算两个日期之间天数的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    编程 发布于2025-05-28
  • 如何在其容器中为DIV创建平滑的左右CSS动画?
    如何在其容器中为DIV创建平滑的左右CSS动画?
    通用CSS动画,用于左右运动 ,我们将探索创建一个通用的CSS动画,以向左和右移动DIV,从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div,无论其未知长度如何。问题:使用左直接导致瞬时消失 更加流畅的解决方案:混合转换和左 [并实现平稳的,线性的运动,我们介绍了线性的转换。这...
    编程 发布于2025-05-28
  • CSS可以根据任何属性值来定位HTML元素吗?
    CSS可以根据任何属性值来定位HTML元素吗?
    靶向html元素,在CSS 中使用任何属性值,在CSS中,可以基于特定属性(如下所示)基于特定属性的基于特定属性的emants目标元素: 字体家庭:康斯拉斯(Consolas); } 但是,出现一个常见的问题:元素可以根据任何属性值而定位吗?本文探讨了此主题。的目标元素有任何任何属性值,属...
    编程 发布于2025-05-28
  • 在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
    在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
    在UTF8表中将latin1字符转换为utf8 ,您遇到了一个问题,其中含义的字符(例如,“jáuòiñe”)在utf8 table tabled tablesset中被extect(例如,“致电。为了解决此问题,您正在尝试使用“ mb_convert_encoding”和“ iconv”转换受...
    编程 发布于2025-05-28
  • Python元类工作原理及类创建与定制
    Python元类工作原理及类创建与定制
    python中的metaclasses是什么? Metaclasses负责在Python中创建类对象。就像类创建实例一样,元类也创建类。他们提供了对类创建过程的控制层,允许自定义类行为和属性。在Python中理解类作为对象的概念,类是描述用于创建新实例或对象的蓝图的对象。这意味着类本身是使用类关...
    编程 发布于2025-05-28
  • 将图片浮动到底部右侧并环绕文字的技巧
    将图片浮动到底部右侧并环绕文字的技巧
    在Web设计中围绕在Web设计中,有时可以将图像浮动到页面右下角,从而使文本围绕它缠绕。这可以在有效地展示图像的同时创建一个吸引人的视觉效果。 css位置在右下角,使用css float and clear properties: img { 浮点:对; ...
    编程 发布于2025-05-28
  • 解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...
    编程 发布于2025-05-28
  • Java中假唤醒真的会发生吗?
    Java中假唤醒真的会发生吗?
    在Java中的浪费唤醒:真实性或神话?在Java同步中伪装唤醒的概念已经是讨论的主题。尽管存在这种行为的潜力,但问题仍然存在:它们实际上是在实践中发生的吗? Linux的唤醒机制根据Wikipedia关于伪造唤醒的文章,linux实现了pthread_cond_wait()功能的Linux实现,利用...
    编程 发布于2025-05-28

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3