架构师

互联网分层架构,为啥要前后端分离?

2018-08-07  本文已影响28人  阿姣_0405
p.png

通用业务服务化之后,系统的典型后端结构如上:

此时,为了缓解这些问题,一般会成立单独的前端FE部门,来负责交互与展现的研发,其职责与后端Java工程师分离开,但痛点依然没有完全解决:

更具体的,看一个这样的例子,最开始产品只有PC版本,此时其系统分层架构如下:


p1.png

客户端,web-server,service,非常清晰。

随着业务的发展,产品需要新增Mobile版本,Mobile版本和PC版本大部分业务逻辑都一样,唯一的区别是屏幕比较小:

由于工期较紧,Mobile版本的web-server一般怎么来呢?


p3.png

没错,把PC版本的工程拷贝一份,然后再做小量的修改:

业务继续发展,产品又需要新增APP版本,APP版本和Mobile版本业务逻辑完全相同,唯一的区别是:

由于工期较紧,APP版本的web-server一般怎么来呢?


p4.png

没错,把Mobile版本的工程拷贝一份,然后再做小量的修改:

这么迭代,演化,发展,架构会变成这个样子:


p5.jpg

这个架构图中的依赖关系是不是看上去很别扭?

PC/H5/APP的web-server层大部分业务是相同的,只有少数的逻辑/展现/交互不一样:

如何让数据的获取更加高效快捷,如何让数据生产与数据展现解耦分离呢?
前后端分离的分层抽象势在必行。


p6.jpg

通过前后端分离分层抽象:

这样的好处是:

除此之外:

结论:
当业务越来越复杂,端上的产品越来越多,展现层的变化越来越快越来越多,站点层存在大量代码拷贝,数据获取复杂性成为通用痛点的时候,就应该进行前后端分离分层抽象,简化数据获取过程,提高数据获取效率,向上游屏蔽底层的复杂性。

最后再强调两点:

任何脱离业务的架构设计,都是耍流氓。
思路比细节重要

<article style="font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; box-sizing: inherit; outline: 0px; display: block; position: relative; padding-top: 16px; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">

阅读前序文章,“分层架构设计”的背景与来龙去脉更加清晰:

若有收获,随手帮转哟。

上一篇下一篇

猜你喜欢

热点阅读