关于前端架构的故事——前端工程师的诞生

在最近的讨论中，我们探讨了各种应用架构模式，强调了在组织内隔离业务逻辑和代码的重要性。应用开发早期的决策深刻影响未来的一致性和可维护性。此阶段的失误可能导致应用生命周期后期代价高昂且耗时的变更。专注于前端架构模式时，必须理解网页如何交付及动态更新以提升用户体验。\n\n本系列将进一步探讨现代网络产品的应用级架构，包括使用 React、Vue 和 Angular 等框架的单页应用（SPA）、前端后端分离（BFF）模式，以及使用 Next.js、Nuxt 和 Astro 等技术的服务器端渲染技术，如静态站点生成（SSG）、增量静态再生（ISR）和服务器端渲染（SSR）。其他主题还包括前端单体架构和微前端架构。\n\n历史上，网络应用构建为多页应用（MPA），每次用户交互都会触发完整页面重新加载，从服务器获取新的 HTML 文档。这些服务器控制的瘦客户端应用极少依赖 JavaScript，导致用户体验缓慢且响应不佳。为改善这一点，引入了 AJAX（异步 JavaScript 和 XML），实现了无需重新加载整个 HTML 文档的部分页面更新。AJAX 推出了 XMLHttpRequest API，支持异步数据请求和响应，通过 Promise 和回调等技术增强交互性，后来演变为广泛使用的 fetch() API。\n\n然而，随着应用复杂度增加，JavaScript 引擎的性能限制显现。大量依赖 DOM 操作和众多异步调用使前端逻辑管理变得繁琐。为应对这些挑战，谷歌推出了 V8 JavaScript 引擎，这是网络开发的重大突破。V8 实现了即时编译（JIT），将 JavaScript 转换为优化的本机机器码，而非逐行解释执行。它还引入了隐藏类、内联缓存和改进的垃圾回收器等高级优化。\n\nV8 的出现不仅加速了 JavaScript 执行，还催生了 2009 年的 Node.js，极大扩展了 JavaScript 在客户端和服务器端的生态系统。结合历史 API 的客户端路由、虚拟 DOM 实现、基于组件的模块化和打包工具，这些技术共同促成了 SPA 的诞生。SPA 实现了无页面重载的无缝导航、客户端渲染的用户界面和可维护的模块化代码库。\n\nSPA 的出现标志着前端工程的里程碑，有效催生了专职前端工程师角色。它们为更互动和复杂的网络应用打开了可能性，推动了仪表盘和软件即服务（SaaS）平台的流行。这一演进还激发了领先科技公司开发开创性库和框架。虽然 SPA 改变了前端开发，也为持续塑造网络应用未来的架构进步奠定了基础。