We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
近几年的前端领域,最感慨的莫过于【变化太快】。各种思想、框架、类库层出不穷,同一个需求点,通常会有多种实现方案,架构选型工作的难度与日俱增。面对每天都在产生的前端领域新词汇,不免感到心累,也难免产生廉颇老矣,尚能饭否的危机感。
无论如何,架构选型和升级的工作仍然要做,在这样的趋势和潮流下,要想对每一种流行概念都了如指掌成本很高,也没有这个必要。反倒是理清前端开发背后的需求至关重要,只要明白了前端开发需求的本质,也就很容易把散落在开源社区里的各种珍珠捡起来,串起来了。
在若干年前,大部分的web系统架构都是多页面架构,用户点击链接就会完全重新加载页面,这种架构如今在大部分场景中已经过时,所以这篇文章只针对SPA架构的应用。
接下来我会以对一个复杂Web前端系统的架构为例,分析一下都需要关注那些点,每个点上都有哪些考虑。
一个web系统最终都是要通过URL来访问的,在SPA架构下,URL指代的是页面的状态,通过URL的变化来路由到另一种状态。(数据接口URL会在Server API部分介绍)因此,需要关注的点有:
WEB应用数据来源于服务端,针对不同的场景和不同的前后端架构模式,需要解决几个问题:
Data主要描述页面上要显示什么信息,Data一般分为两类数据:一类是从后端Server API拉取回来的数据APIData,另一类是标识界面状态的数据State。这两类数据共同决定了界面最终呈现的状态。在实际的开发中,针对Data需要考虑以下几个点:
View主要描述页面的最终呈现样式。主要关注的点有:
Action主要描述用户或者程序对页面做了什么操作,以及操作行为的处理方法,关注点有
监控页面行为、搜集数据、统一错误处理、权限校验等需求
如何做针新功能进行灰度发布或者权限控制
复杂web系统里组件复用是强需求,关注点在:
如何简化开发体验,提高开发效率,解决环境搭建、服务启动、热更新、mock、测试、联调、构建、部署、性能优化等问题。
前端开发行业折腾来折腾去,其实都是围绕怎么更好地解决这些本质的问题。有些实现可能是针对某几类或者某一类问题,关注点更小的就只解决某几个问题。
比如:
The text was updated successfully, but these errors were encountered:
很棒~
Sorry, something went wrong.
赞
No branches or pull requests
近几年的前端领域,最感慨的莫过于【变化太快】。各种思想、框架、类库层出不穷,同一个需求点,通常会有多种实现方案,架构选型工作的难度与日俱增。面对每天都在产生的前端领域新词汇,不免感到心累,也难免产生廉颇老矣,尚能饭否的危机感。
无论如何,架构选型和升级的工作仍然要做,在这样的趋势和潮流下,要想对每一种流行概念都了如指掌成本很高,也没有这个必要。反倒是理清前端开发背后的需求至关重要,只要明白了前端开发需求的本质,也就很容易把散落在开源社区里的各种珍珠捡起来,串起来了。
关注点
在若干年前,大部分的web系统架构都是多页面架构,用户点击链接就会完全重新加载页面,这种架构如今在大部分场景中已经过时,所以这篇文章只针对SPA架构的应用。
接下来我会以对一个复杂Web前端系统的架构为例,分析一下都需要关注那些点,每个点上都有哪些考虑。
URL
一个web系统最终都是要通过URL来访问的,在SPA架构下,URL指代的是页面的状态,通过URL的变化来路由到另一种状态。(数据接口URL会在Server API部分介绍)因此,需要关注的点有:
Server API
WEB应用数据来源于服务端,针对不同的场景和不同的前后端架构模式,需要解决几个问题:
Data
Data主要描述页面上要显示什么信息,Data一般分为两类数据:一类是从后端Server API拉取回来的数据APIData,另一类是标识界面状态的数据State。这两类数据共同决定了界面最终呈现的状态。在实际的开发中,针对Data需要考虑以下几个点:
View
View主要描述页面的最终呈现样式。主要关注的点有:
Action
Action主要描述用户或者程序对页面做了什么操作,以及操作行为的处理方法,关注点有
Aspect
监控页面行为、搜集数据、统一错误处理、权限校验等需求
AB Test
如何做针新功能进行灰度发布或者权限控制
组件复用
复杂web系统里组件复用是强需求,关注点在:
工程化
如何简化开发体验,提高开发效率,解决环境搭建、服务启动、热更新、mock、测试、联调、构建、部署、性能优化等问题。
结语
前端开发行业折腾来折腾去,其实都是围绕怎么更好地解决这些本质的问题。有些实现可能是针对某几类或者某一类问题,关注点更小的就只解决某几个问题。
比如:
……
除了上述关注点以外,对于大的前端团队,通常还会考虑封装的问题。就是通过封装为业务开发者屏蔽很多杂乱、零碎的技术细节,提供简单、统一、好理解的API及开发工具来提高开发生产效率。
The text was updated successfully, but these errors were encountered: