领域
Frontend Development
技能档案
Module Federation, single-spa, iframe composition, shared dependencies, routing
角色数
5
包含此技能的角色
级别数
5
结构化成长路径
必要要求
15
其余 10 个可选
Frontend Development
Frontend Architecture
2026/3/17
选择当前级别并对比期望。下方卡片显示晋升所需掌握的内容。
表格展示从初级到首席的技能深度变化。点击行查看详情。
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | Understands micro-frontends in Angular: knows the Module Federation plugin for Angular, understands the Angular Elements concept for Web Components. Knows that Angular's NgModule system naturally supports lazy-loaded feature modules as a step toward micro-frontends. | |
| Frontend Developer (React) | Understands the micro-frontend concept: why to split monolithic frontend into independent modules, what problems it solves (team autonomy, independent deployment). Knows main approaches: iframe, Web Components, Module Federation. | |
| Frontend Developer (Svelte) | Understands micro-frontends in Svelte: knows that Svelte's compiler-first approach creates standalone bundles ideal for micro-frontends, understands how svelte-custom-element enables creating Web Components. Knows Svelte limitations for MFE. | |
| Frontend Developer (Vue) | Understands micro-frontends in Vue ecosystem: knows that Vue is well-suited for Web Components through defineCustomElement, understands Module Federation concept with Vite. Knows why large projects split frontend into micro-applications. | |
| Fullstack Developer | Understands micro-frontends as part of fullstack architecture: knows how frontend micro-apps relate to backend microservices, understands BFF (Backend For Frontend) pattern. Knows main approaches to micro-frontend integration. |
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | 必要 | Works with micro-frontends in Angular: configures @angular-architects/module-federation for sharing Angular components, implements dynamic module federation for runtime discovery, creates Angular Elements for cross-framework integration. Manages shared Angular services via dependency injection. |
| Frontend Developer (React) | 必要 | Works with micro-frontends in React: configures Webpack Module Federation for sharing components between applications, implements runtime remote module loading, manages shared dependencies (React, React DOM) to prevent duplication. Integrates micro-frontend into host application. |
| Frontend Developer (Svelte) | 必要 | Works with micro-frontends in Svelte: uses vite-plugin-federation for Svelte Module Federation, implements Svelte components as Web Components for integration with any framework. Configures shared state through writable stores with cross-MFE synchronization via events. |
| Frontend Developer (Vue) | 必要 | Works with micro-frontends in Vue: uses vite-plugin-federation for Module Federation, implements Vue components as Web Components for framework-agnostic integration, configures shared Pinia store between micro-frontends. Manages shared CSS through CSS Modules isolation. |
| Fullstack Developer | 必要 | Works with micro-frontends in fullstack context: implements BFF layer for each micro-frontend, configures API composition for data aggregation, applies Module Federation for frontend integration. Ensures end-to-end type safety through shared TypeScript types between frontend and backend. |
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | 必要 | Designs micro-frontend architecture on Angular: uses Nx workspace for monorepo management of micro-frontends, configures Angular CDK for consistent theming, designs shared library strategy via Nx publishable libraries. Ensures Angular version alignment between micro-frontends. |
| Frontend Developer (React) | 必要 | Designs micro-frontend architecture on React: defines micro-frontend boundaries by business domains, configures shared state management (custom events, shared store), implements routing integration between host and remote apps. Designs CI/CD for independent deployment of each micro-frontend. |
| Frontend Developer (Svelte) | 必要 | Designs micro-frontend architecture with Svelte: defines when to use Svelte MFE (lightweight, performance-critical sections), configures SvelteKit for SSR micro-frontends, designs incremental adoption strategy for adding Svelte MFE to existing React/Vue hosts. |
| Frontend Developer (Vue) | 必要 | Designs micro-frontend architecture on Vue: defines composition strategy (build-time vs runtime), configures single-spa with Vue adapter for multi-framework support, designs shared state through custom event bus or shared Pinia plugin. Ensures SSR compatibility for SEO-critical micro-frontends. |
| Fullstack Developer | 必要 | Designs fullstack micro-frontend architecture: defines vertical slice architecture (frontend + BFF + service per domain), configures shared authentication through token propagation, designs unified error handling. Ensures observability through distributed tracing from browser to backend. |
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | 必要 | Standardizes the micro-frontend approach in Angular: creates Nx generators for scaffolding new MFEs, defines Angular upgrade strategy for coordinated version bumps, designs testing strategy (unit per MFE + integration shell). Trains teams on Angular-specific MFE patterns. |
| Frontend Developer (React) | 必要 | Defines micro-frontend strategy for the organization: chooses between Module Federation, single-spa and custom solution, standardizes shared design system for visual consistency. Designs developer experience: local development with mock remotes, testing strategy, version management. |
| Frontend Developer (Svelte) | 必要 | Defines Svelte MFE strategy: creates build tooling for Svelte micro-frontends, designs shared design system compatible with Svelte and other frameworks through CSS custom properties. Defines Svelte adoption roadmap in the micro-frontend ecosystem. |
| Frontend Developer (Vue) | 必要 | Standardizes micro-frontend approach in Vue ecosystem: creates CLI for scaffolding new micro-frontend with standard configuration, defines shared component library strategy, designs versioning and backward compatibility. Trains teams on micro-frontend patterns and anti-patterns. |
| Fullstack Developer | 必要 | Standardizes fullstack micro-frontend platform: creates project templates for vertical slices, designs shared infrastructure (auth, logging, feature flags), defines deployment strategy. Coordinates frontend and backend teams for aligned domain boundaries. |
| 角色 | 必要性 | 描述 |
|---|---|---|
| Frontend Developer (Angular) | Shapes Angular platform strategy with micro-frontends: designs enterprise shell application with dynamic MFE loading, defines governance for Angular workspace. Influences Angular MFE ecosystem development through contributions to @angular-architects/module-federation. | |
| Frontend Developer (React) | Shapes micro-frontend platform strategy: designs shell application architecture, defines governance for shared dependencies and design tokens, develops platform for self-service micro-frontend creation. Influences architectural decisions for scaling frontend development in large organizations. | |
| Frontend Developer (Svelte) | Shapes multi-framework MFE strategy with Svelte: designs polyglot frontend architecture (React host + Svelte + Vue MFEs), defines framework selection criteria per micro-frontend. Influences Svelte MFE ecosystem and tooling development. | |
| Frontend Developer (Vue) | Shapes frontend platform strategy with micro-frontends: designs architecture for 10+ Vue micro-frontends with shared design system, defines migration strategy from monolith. Influences Vue micro-frontend ecosystem and tooling development. | |
| Fullstack Developer | Shapes enterprise fullstack architecture with micro-frontends: designs platform for self-service vertical slice creation, defines governance for cross-slice communication, develops migration path from monolith. Influences organizational structure through Conway's Law alignment. |