如何提升架构思维?

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

什么是架构

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

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

工程架构

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

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

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

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

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

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

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

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

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

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

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

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

业务架构

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

就像这样:

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

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

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

相关推荐
GDAL3 分钟前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿3 分钟前
react防止页面崩溃
前端·react.js·前端框架
Light6013 分钟前
云途领航:现代应用架构助力企业转型新篇
微服务·架构·saas·paas·iaas·ipaas·apaas
z千鑫30 分钟前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
大梦百万秋1 小时前
Spring Boot实战:构建一个简单的RESTful API
spring boot·后端·restful
m0_748256141 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习
斌斌_____1 小时前
Spring Boot 配置文件的加载顺序
java·spring boot·后端
路在脚下@1 小时前
Spring如何处理循环依赖
java·后端·spring
小白学前端6662 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react
言之。2 小时前
【面试题】构建高并发、高可用服务架构:技术选型与设计
架构