什么是前端架构
前端架构是一种设计方法,它涉及到如何组织和管理前端代码(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等) 加载时序、缓存
- 自动化功能测试平台
- 自动化...
就简单聊这么多,以架构的视野来看看规划、管理一个前端项目都需要那些核心能力