跳转到内容
前端架构

在代码中看得见的前端架构

来自真实项目的前端架构

在代码中看得见的前端架构

从 State 和 Feature Flow，到边界与职责：本站解释支撑可持续前端架构的深层概念。内容清晰、具体，不追逐框架热潮。

写给那些不只想构建前端，还想理解并说明每项决策依据的人。

推荐阅读路径本站所坚持的理念
# FEATURE FLOW DIAGNOSTIC
[FLOW]UI 发送 Intent。Feature 负责响应，而不是用回调编排流程。
[STATE]Loading、筛选和选择都属于状态。它们不是组件顺手承担的杂务。
[边界]Resource、Store、Facade 和 Mapper 各有职责。架构决策应该在代码中清晰可见。
[结论]架构不是从一张宏大的图开始。而是从下一条具体边界开始。
推荐阅读路径

初次到访？可以这样开始。

本站不是线性文档，但许多观点确实层层相扣。这条路径从前端的基本思维模型出发，逐步走向具体的架构决策。

以下文章链接目前指向德语原文。

  1. 01

    换一种方式理解前端

    先理解响应式界面背后的思维模型，以及为什么 UI 需要拥有自己的状态。

    阅读《前端不是换了颜色的后端》→
  2. 02

    在代码中划清职责

    看看清晰的职责边界如何在一个具体的 Frontend Feature 中体现。

    打开前端战术设计 →
  3. 03

    理解 Feature Flow

    沿着 Retrieve Slice，从外部 Resource 一直追踪到屏幕上的 ViewModel。

    阅读 Retrieve Slice →
  4. 04

    质疑自己的直觉

    检查那些看似合理、却会让前端长期付出不必要成本的假设。

    识别架构误区 →
这里讨论什么

足够深入，才能真正理解。足够具体，才能付诸实践。

说出几个架构术语并不难。真正困难的是把它们变成项目里的具体决策：State 放在哪里？谁应该知道 ViewModel？Command 从哪里开始？哪条边界在保护业务知识？

因此，本站会把架构背后的思考与它在代码中显现的切分方式放在一起讨论。这里没有放之四海而皆准的配方，只有一套可以理解和检验的依据，帮助你做出更好的决策。

主题领域

你会在这里读到什么

当前重点

前端战术设计

如何在一条边界内，用代码具体组织 State、Command、ViewModel 和 Feature Flow。

探索前端战术设计 →

架构札记

把项目日常反复出现的架构决策，整理成紧凑的模型与提醒。

阅读架构札记 →

架构误区

那些听起来合理，却会让前端长期变贵、变得含混或难以修改的假设。

识别架构误区 →
更多视角

继续深入，并付诸实践

这些栏目从三个角度补充核心主题：放在具体上下文中的决策、反复出现的解决结构，以及真实项目中的经验。

01

架构决策

根据上下文选择架构，而不是把架构当成信仰。

权衡架构决策 →02

架构模式

边界清晰、反复出现的解决方案构件。

研究架构模式 →03

项目实录

真实项目条件下的架构决策。

阅读项目实录 →
精选内容

推荐文章

六篇文章，六种入口。无需一次读完整个网站，只需找到下一个值得思考的问题。

架构札记

当前端与自己的框架对抗时

为什么 UI 不是一条线性的命令链，而是由状态持续投影出来的结果。

战术讲解

Retrieve Slice

数据如何经过 Resource、Mapper、Store、Facade 和 ViewModel 流向 UI，而不淤积在组件中。

架构模式

ViewModel Aggregation

为什么 UI 的含义来自派生状态，而不是到模板中才临时拼装出来。

架构误区

架构太耗时间

缺少架构不会消除成本，只会把成本推迟到后续修改中。

架构决策

何时采用哪种架构？

一套用于做决策的判断框架：上下文比偏爱的架构模式更有帮助。

项目实录

第一个垂直切片

一个具体的纵向贯通，如何在真实项目条件下检验架构假设。