如何提升架构思维?

您好, 如果喜欢我的文章或者想上岸大厂,可以关注公众号「量子前端」,将不定期关注推送前端好文、分享就业资料秘籍,也希望有机会一对一帮助你实现梦想

什么是架构

"架构",即架设、构建。完成对于平台的合理架设,包括其首当其冲的可用,到可扩展、容易被开发、产品、业务、销售等全面接受的一个整体的设计。

完成对于平台的完备构建,是指,将设计好的、开发好的平台,能够有容器展示其本色。英雄本色,不能让英雄落寞。找一个最好的场地,展示其能力,构建出一个完备性的平台。综合两点,即可以是一个好的架构。

工程架构

如果你是普通开发,或许对于架构师这个词,对于你来说很遥远,或者说是互不关己的态度,但其实每个人在成为架构师之前,都需要有架构思维,当你有了架构思维,你也是在不知不觉当中成为了架构师。

架构分很多种,比如系统架构、产品架构、业务架构,再细粒化可以拆散到领域模型设计、工程项目架构设计,再细粒化下去,或许你不敢相信,我们都是做前端的,前端的组件拆分,业务嵌套,它其实也是架构,我们可以把它称为前端组件架构设计,就像是这样:

这是一个任务中心的需求,前端将需求按组件维度拆解出来,让整个前端链路看的非常清楚,同时也提到了消费侧、数据流转方式有props和context两种方案,并且将组件的层级也画了出来。如果你的技术氛围足够规范,在每一次开发前,你需要经历的过程会分为如下几步:

  1. 需求评估;
  2. 前端系分,出架构图、排期表,聚合在系分文档中拉系分评审会,产研一起讨论技术方案合理性;
  3. 投入研发;
  4. 联调&自测;
  5. 提测;
  6. 灰度;
  7. 正式发布;

如果没有架构图,你的研发节奏、排期、目标节点只能以估算的形式,但有了架构图,你的开发节奏就是以架构图中一个个子模块来走的,这就是架构的好处。并且如果你开发过的模块需要接手给其他同学开发,只需要给文档即可,不需要做过多的解释和过渡,可以帮助你自己节省很多时间。

很多人说前端简单,只是系统表壳,只是因为在系统架构中前端占了前一部分,但是将这一部分细粒化出来,前端架构也是非常复杂的,上面一张图是一个功能模块的示例,如果将系统前端架构画出来,就需要把项目架构、各子模块架构给关联起来,最后会是一张很大很复杂、交互性很强的架构图。

说完前端我们再来说说后端,系分文档后端会有领域模型变更,就像这样:

这其实和前端系分的架构图是一样的,只是研发角色不一样而已,但架构思维是通用的。

而前后端结合起来就是系统架构图,并且也是一比一的关系,就像这样:

前端负责跨平台、UI、交互、请求、异常抛出;后端负责数据加工、缓存、服务整合。

我们需要在自己的日常中让架构无处不在,架构思维才能不断提升,最后有自己的架构能力。所有的事情、复杂的事情、简单的事情,都可以用架构的方式让它变得更简单,更容易让人理解,就像一份说明书设计一样。

来自自己老板的一句话:"述职报告最前面,请放上架构图,让大家都知道你的工作是什么、一眼看懂你的工作量和价值在哪里。"。于是在场后面述职的同学,都偷偷的在文档最开头放了项目的架构图。

业务架构

那什么是业务架构呢?不涉及到具体的技术,用一张图把系统的所有业务部分讲清楚并且把业务流程描述出来的,就是业务架构图。

就像这样:

要学习的架构思维是通用的,图的组成结构也是一样的。

因此我们最后做一个总结:只要是人,就需要培养架构思维,可以让自己走得更远,做事做得更漂亮。拥有架构能力,可以标准化自己的工作产出,创造出更多的机会。

如果喜欢我的文章或者想上岸大厂,可以关注公众号「量子前端」,将不定期关注推送前端好文、分享就业资料秘籍,也希望有机会一对一帮助你实现梦想。

相关推荐
阿珊和她的猫1 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
uzong5 小时前
技术故障复盘模版
后端
GetcharZp5 小时前
基于 Dify + 通义千问的多模态大模型 搭建发票识别 Agent
后端·llm·agent
加班是不可能的,除非双倍日工资6 小时前
css预编译器实现星空背景图
前端·css·vue3
桦说编程6 小时前
Java 中如何创建不可变类型
java·后端·函数式编程
IT毕设实战小研6 小时前
基于Spring Boot 4s店车辆管理系统 租车管理系统 停车位管理系统 智慧车辆管理系统
java·开发语言·spring boot·后端·spring·毕业设计·课程设计
wyiyiyi6 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip6 小时前
vite和webpack打包结构控制
前端·javascript
excel7 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国7 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端