Frontend Engineering

前端不是把界面画出来,而是让体验稳定地运行。

这个专题关注从设计稿到生产环境之间的所有细节:组件抽象、状态边界、资源加载、错误恢复、可访问性和持续交付。

组件设计

好的组件不是越通用越好,而是在明确的业务语义下保持稳定输入和输出。基础组件负责交互原语,业务组件负责领域含义,页面组件负责数据装配。

  • 组件 API 应优先表达意图,例如 variant="danger" 比传入任意颜色更容易维护。
  • 复杂表单、表格、编辑器等组件需要把校验、异步状态和键盘交互纳入设计范围。
  • 避免把请求逻辑散落在展示组件里,数据获取层应该可替换、可测试。

状态管理

先区分状态类型:服务端状态、表单草稿、URL 状态、会话状态和纯 UI 状态。不同状态的生命周期不同,放在同一个全局 store 里会制造不必要的耦合。

URL 状态筛选、分页、搜索词,适合让页面可分享和可回退。
服务端状态适合使用缓存、失效和重试机制管理。
局部状态弹窗开关、折叠面板、临时输入应靠近使用处。
跨页状态登录身份、主题、权限摘要需要明确刷新策略。

性能预算

性能优化最怕只在上线前突击。更可靠的方式是把预算写进构建和评审:首屏关键资源、图片尺寸、第三方脚本、长任务和缓存策略都需要可观测。

目标示例:
LCP < 2.5s
INP < 200ms
首屏 JS gzip < 180KB
关键接口 P95 < 600ms

可访问性

可访问性不是额外功能,而是界面质量的一部分。按钮要能被键盘访问,表单错误要能被读屏软件感知,颜色对比度要足够,动态内容要有明确焦点管理。