浅聊前端架构

什么是前端架构

前端架构是一种设计方法,它涉及到如何组织和管理前端代码(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等) 加载时序、缓存
  • 自动化功能测试平台
  • 自动化...

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

系列文章

相关推荐
天蓝色的鱼鱼1 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙2 小时前
[译] Composition in CSS
前端·css
白水清风2 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix3 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278003 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端3 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧3 小时前
Promise 的使用
前端·javascript
NBtab3 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码3 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试