架构设计与工程领导力
组件与状态架构、微前端、设计系统、API 层设计、国际化、技术选型、重构策略、RFC 写作、技术决策记录、故障应急、技术辅导。
Topics
无障碍体系化建设
前端无障碍体系化建设——WCAG 标准与合规等级、ARIA 模式与语义化、键盘导航、屏幕阅读器兼容、自动化检测工具链、组织级无障碍推进策略。
API 层设计
API 层设计——怎样把协议、契约、类型、错误、缓存、重试和鉴权放进一条清晰边界里,让组件消费数据时更稳定,也让前后端协作更可预测。
组件架构设计
前端组件架构设计——组件分层策略、Compound Components / Headless UI / Render Props 等核心模式、Props API 契约设计、组件边界划分与版本演进,是构建可规模化 UI 系统的工程基础。
设计系统建设
设计系统工程化建设——Design Tokens 体系与 W3C DTCG 规范、组件库架构与发布策略、Storybook 文档驱动开发、多品牌主题方案、治理模型与组织协作、shadcn/ui 范式转变。
错误边界与容错架构
前端容错架构设计——React Error Boundary 层级策略、全局错误捕获(window.onerror/unhandledrejection)、优雅降级模式、错误上报与监控、Retry 策略。
国际化方案
前端国际化工程化——i18n 架构设计、ICU MessageFormat 语法、React/Next.js 国际化方案(next-intl/react-intl)、翻译工作流、RTL 适配、日期/数字/货币格式化。
线上故障应急
线上故障应急——怎样建立分级、发现、研判、止血、回滚、沟通和复盘的完整链路,让前端团队在真实故障里既能快恢复,也能留下长期改进。
遗留系统迁移
遗留前端系统迁移——系统评估与迁移 ROI 分析、jQuery/AngularJS 到现代框架的迁移路径、微前端共存策略、数据层迁移、团队技能转型计划。
技术辅导与团队成长
技术辅导与团队成长——怎样通过 code review、1-on-1、结对、反馈机制和成长设计,把个人能力变成团队能力,而不是只靠少数人硬扛。
微前端
微前端架构——核心动机与适用场景、技术方案对比(Module Federation/single-spa/iframe)、应用间通信与样式隔离、路由协调、部署与版本管理策略。
大型重构策略
大型前端重构策略——Strangler Fig 渐进替换模式、Codemods 自动化重构、Feature Flag 灰度迁移、重构风险控制、技术债务量化与管理。
RFC 与技术方案写作
RFC 与技术方案写作——为什么 senior 工程师要把问题定义、方案比较、迁移路径、风险说明和决策记录写清楚,以及怎样把一份文档写成团队可执行的共识。
状态架构设计
状态架构设计——怎样区分本地状态、共享状态、URL 状态、服务端状态和流程状态,并用合适的 ownership、缓存和边界设计控制前端复杂度。
技术决策与 ADR
技术决策与 ADR——怎样记录上下文、约束、备选方案和后果,把团队的关键决定从口头记忆变成可追溯、可复盘、可修订的工程资产。
技术选型方法论
技术选型方法论——评估框架(成熟度/社区/性能/学习曲线)、POC 验证策略、风险评估矩阵、避免简历驱动开发、选型文档模板与决策记录。