浅聊前端架构

什么是前端架构

前端架构是一种设计方法,它涉及到如何组织和管理前端代码(HTML,CSS,JavaScript等),以及如何优化前端资源的加载、渲染和更新。前端架构的目标是提高代码的可维护性、可扩展性和性能。

对于一个传统前端项目来说,前端架构可能包括以下几个方面:

  • 代码组织:如何将代码分解成模块或组件,以及如何组织这些模块或组件。

  • 状态管理:如何管理应用程序的状态,包括用户输入、服务器响应等。

  • 性能优化:如何优化代码以提高加载速度和运行效率。

  • 测试策略:如何编写和组织测试以确保代码的质量。

  • 构建和部署流程:如何编译、打包和部署前端代码。

前端架构师需要对前端技术有深入的理解,包括但不限于HTML、CSS、JavaScript、前端框架(如React、Vue、Angular等)、构建工具(如Webpack、Rollup等)、测试工具(如Jest、Mocha等)等。

进阶

前文说的 前端架构 是根据传统单个前端项目以及技术的理解进行限定的架构理解,如果不局限于前端开发,还要考虑统筹管理等内容的话,前端架构可能包括以下几个方面:

  • 统筹全局:需要有全局视野以及相应的灵活性,能根据实际情况调整,简单讲就是不能为了架构而架构;比如消息通讯能力,用来统筹各个团队研发功能的工具,提供发布订阅、监听、观察等功能
  • 插件随组:灵活、通用
  • 本地可调:本地服务、数据 mock
  • 模块化:CommonJs、CMD、AMD、ES Model
  • 多端方案:小程序、混合、ssr,安卓、ios:SDK等
  • 性能优化:体系化,涵盖编译工具、网络等
  • 实用优先:自动化(利用各种构建工具),不要什么都自己做要依赖社区
  • 持续可扩:技术选型、防止需要不断的重构,运维知识
  • 一键部署:相应的知识、技术、工具
  • ...

看起来东西比较多,主要是从这么几个方面考虑:

  • 体验: 开发体验、测试体验、发布体验、生产体验等
  • 优化: 性能优化、流程优化等
  • 管理: 方便各种管理、方便运维、多端适配等

总的来说就是要有各种技术解决方案以及技术整合以及统能力,从目前的框架演化路径、构建工具演化路径、组件库等技术的演变来看也符合整合各种技术的能力要求

有能力整合所有技术后,再来就是考虑整合进来的技术的合理性,以及出问题后有没有能力改造或者有没有替代方案,然后就是没有尽头的性能优化

工程化

为了方便处理各种各样的问题同时又便于管理,这就需要一揽子解决方案,同时又易于技术插拔(替换),什么意思呢?

以 webpack 为例,其本质是一种工作流,以 tapable(类似事件驱动,不过更强大) 为核心提供工作流钩子,插件可以订阅不同流程的钩子进行相应操作,相当于上文的插件随组,通过插件机制它很容易的实现本地可调模块化等等要求

最终落地后其实是各种自动化,比如:自动化压缩、控制高清图、合并等。你可以通过对应插件以及对应配置实现打包过程中需要的繁琐操作

整个工程化体系可能包括其他的自动化如:

  • 自动化性能监控平台
  • 自动化控制资源(css、js等) 加载时序、缓存
  • 自动化功能测试平台
  • 自动化...

就简单聊这么多,以架构的视野来看看规划、管理一个前端项目都需要那些核心能力

系列文章

相关推荐
BillKu7 分钟前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
面向星辰36 分钟前
html中css的四种定位方式
前端·css·html
Async Cipher1 小时前
CSS 权重(优先级规则)
前端·css
大怪v1 小时前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
Liquad Li2 小时前
Angular 面试题及详细答案
前端·angular·angular.js
用户21411832636022 小时前
首发!即梦 4.0 接口开发全攻略:AI 辅助零代码实现,开源 + Docker 部署,小白也能上手
前端
gnip4 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart4 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.4 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu4 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架