前端架构
架构概念 🔗︎
业务架构 🔗︎
核心定义 🔗︎
业务架构关注的是组织的业务策略、治理、组织结构以及关键业务流程。它定义了企业的业务策略和业务流程，确保业务目标和业务操作的一致性。
关键特点 🔗︎
- 业务目标驱动：从业务需求出发，设计出符合企业战略的业务模式。
- 流程优化：梳理并优化核心业务流程，提升效率和灵活性。
- 客户导向：帮助企业更好地理解客户需求，提供更优质的服务。
应用场景 🔗︎
- 制定企业的长期发展战略。
- 设计跨部门协作的业务流程。
- 确保业务操作与企业愿景一致。
产品架构 🔗︎
核心定义 🔗︎
产品架构涉及产品的设计和功能布局，关注产品如何满足市场和用户的需求。它包括产品的功能、用户界面、用户体验和产品的市场定位。
关键特点 🔗︎
- 用户需求匹配：确保产品功能与市场需求和用户期望相匹配。
- 可持续发展：关注产品的迭代和升级，以适应不断变化的市场环境。
- 体验优先：注重用户界面和用户体验的设计，提升用户满意度。
应用场景 🔗︎
- 新产品的功能规划和设计。
- 现有产品的功能优化和迭代。
- 分析竞品并制定差异化的产品策略。
技术架构 🔗︎
核心定义 🔗︎
技术架构关注的是支持业务需求的技术解决方案和框架。它包括软件、硬件、网络基础设施以及数据管理策略等。
关键特点 🔗︎
- 技术支持：为业务应用提供稳定、高效的技术支撑。
- 灵活性与扩展性：能够适应未来技术的变化和业务的扩展。
- 资源优化：确保技术资源的有效利用，降低运营成本。
应用场景 🔗︎
- 构建支持高并发的分布式系统。
- 设计数据存储和管理方案。
- 实现技术壁垒，提升企业的竞争力。
容器的概念 🔗︎
技术容器 🔗︎
核心定义 🔗︎
技术容器主要关注于提供技术服务支持，如数据库服务、消息队列、缓存服务等。它通常是无状态的，提供底层的技术支持和服务，确保其他服务或业务容器能够正常运行。
特点 🔗︎
- 无状态：不直接参与业务逻辑处理，专注于技术支持。
- 通用性：可复用于多种业务场景。
- 工具化：例如 Docker、Kubernetes 等，提供环境和网络配置。
示例 🔗︎
- 微应用容器：作为运行时环境，承载多个微服务。
- 缓存服务：如 Redis，提供高性能的数据访问支持。
业务容器 🔗︎
核心定义 🔗︎
业务容器专注于实现具体的业务逻辑，如用户管理、订单处理、支付系统等。它通常是有状态的，包含业务逻辑的处理和数据的存储。
特点 🔗︎
- 有状态：直接参与业务逻辑处理，存储业务相关数据。
- 专用性：针对特定业务需求设计。
- 依赖技术容器：依赖技术容器提供的基础设施和服务。
示例 🔗︎
- 用户管理系统：处理用户注册、登录、权限控制等。
- 订单处理系统：管理订单创建、支付、发货等流程。
资源部署 🔗︎
前端资源发布一般是放到静态服务器或（nginx) 者oss上面。 然后通过cdn加速。
或者通过node/java应用集成 提供静态资源服务
或者通过surge/netlify等静态托管服务。
如何设计导航 🔗︎
业务无感知更新
- 用户在使用过程中不会感知到更新的发生。
无业务侵入
- 更新过程不能影响已有业务的样式或功能。
对技术栈无要求
- 方案需要具备通用性，不依赖特定的技术栈。
方案 1：无版本 CDN 路径 🔗︎
实现方式 🔗︎
- 维护一个中间层的无版本 CDN 路径。
- 真实的脚本文件是有版本号的（如
script-v1.0.0.js）。 - 中间层的无版本路径（如
script-latest.js）指向最新的脚本版本。
- 真实的脚本文件是有版本号的（如
- 当需要发布新版本时，只需更新中间层 CDN 的指向，即可实现一方发布、多方自动更新。
示例 🔗︎
真实脚本路径：
https://cdn.example.com/script-v1.0.0.js
https://cdn.example.com/script-v1.1.0.js
中间层无版本路径：
https://cdn.example.com/script-latest.js -> 指向最新版本（如 v1.1.0）
影响分析 🔗︎
无灰度能力
- 由于所有用户都通过同一个无版本路径加载资源，无法实现灰度发布（即逐步向部分用户推送更新）。
- 如果新版本存在问题，可能会影响所有用户。
影响 LCP（最大内容绘制时间）
- 每次更新脚本后，浏览器需要重新下载和解析新的资源文件，可能导致页面加载性能下降，进而影响 LCP 指标。
总结 🔗︎
通过维护一个无版本的 CDN 路径，可以实现业务无感知更新，并且对技术栈无要求。然而，这种方案也存在一定的局限性：
- 缺乏灰度发布能力，难以控制更新的风险。
- 可能对页面性能指标（如 LCP）产生负面影响。
在实际应用中，需根据业务需求权衡利弊，选择合适的更新策略。