You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
OpenComponents is a **micro frontend architecture** that enables teams to build, deploy, and consume UI components independently. Think of it as a way to break down monolithic frontend applications into smaller, manageable pieces that different teams can own and maintain.
9
+
## How OpenComponents Works
10
10
11
-
### Simple Conceptual Introduction
11
+
OpenComponents is a **micro frontend architecture** that breaks down monolithic applications into independently deployable, reusable components that teams can own and maintain autonomously.
12
12
13
-
Imagine you're building a large e-commerce website. Instead of one massive application, you could have:
13
+
</div>
14
14
15
-
-**Header component** (owned by the Platform team)
16
-
-**Product listing** (owned by the Catalog team)
17
-
-**Shopping cart** (owned by the Commerce team)
18
-
-**User profile** (owned by the Identity team)
15
+
## Conceptual Overview
19
16
20
-
Each team can:
17
+
<divclassName="concept-example">
21
18
22
-
- ✅ **Develop independently** using their preferred technology stack
23
-
- ✅ **Deploy on their own schedule** without coordinating releases
24
-
- ✅ **Scale their components** based on usage patterns
25
-
- ✅ **Maintain ownership** of their specific domain expertise
19
+
### 🛒 **Real-World Example: E-commerce Platform**
26
20
27
-
This is exactly what OpenComponents enables - **component independence at scale**.
21
+
Instead of building one massive application, imagine decomposing it into independent components:
22
+
23
+
<divclassName="component-breakdown">
24
+
25
+
**🏠 Header Component** → Platform Team
26
+
- Navigation, search, user menu
27
+
- Deployed independently
28
+
- Shared across all pages
29
+
30
+
**📦 Product Listing** → Catalog Team
31
+
- Product cards, filters, pagination
32
+
- A/B test new layouts
33
+
- Optimized for performance
34
+
35
+
**🛒 Shopping Cart** → Commerce Team
36
+
- Cart state, checkout flow
37
+
- Payment integrations
38
+
- Independent scaling
39
+
40
+
**👤 User Profile** → Identity Team
41
+
- Authentication, preferences
42
+
- Privacy controls
43
+
- Account management
44
+
45
+
</div>
46
+
47
+
**The Result:** Each team develops, tests, and deploys independently while users see a seamless, integrated experience.
48
+
49
+
</div>
50
+
51
+
## Benefits of This Approach
52
+
53
+
<divclassName="benefits-overview">
54
+
55
+
### 🚀 **Team Independence**
56
+
-**Autonomous development** - No coordination bottlenecks
57
+
-**Technology flexibility** - React, Vue, ES6, or any framework per component
58
+
-**Independent deployments** - Release on your own schedule
59
+
-**Clear ownership** - Teams own components end-to-end
60
+
61
+
### 📈 **Scalability & Performance**
62
+
-**Component-level scaling** - Scale based on actual usage patterns
63
+
-**CDN optimization** - Automatic asset distribution globally
64
+
-**Server-side rendering** - SEO and performance without Node.js requirements
65
+
-**Caching strategies** - Intelligent caching at multiple levels
66
+
67
+
### 🔄 **Gradual Migration**
68
+
-**Start small** - Begin with one component, expand gradually
69
+
-**No big bang** - Migrate from monolith incrementally
70
+
-**Risk mitigation** - Test architecture with non-critical components
71
+
-**Backward compatibility** - Existing applications continue working
72
+
73
+
</div>
28
74
29
75
## Why Choose OpenComponents?
30
76
@@ -49,31 +95,98 @@ This is exactly what OpenComponents enables - **component independence at scale*
49
95
-**Faster iteration**: Deploy and test new features quickly
50
96
-**Data-driven decisions**: Measure impact of component changes independently
51
97
52
-
## Core Architecture Components
98
+
## System Architecture
99
+
100
+
<divclassName="architecture-diagram">
53
101
54
102
```mermaid
55
-
graph TD
56
-
A[Microsites server-side] --> D[OC Registry]
57
-
B[Microsites client-side] --> D
58
-
C[OC CLI] --> D
59
-
E[OC Components creators/owners] --> C
60
-
61
-
D --> F[OC Library]
62
-
D --> G[OC Runtime agents]
63
-
64
-
F --> H[CDN]
65
-
H --> G
66
-
67
-
style A fill:#87CEEB
68
-
style B fill:#87CEEB
69
-
style C fill:#87CEEB
70
-
style D fill:#87CEEB
71
-
style F fill:#F0E68C
72
-
style G fill:#87CEEB
73
-
style H fill:#D3D3D3
103
+
graph TB
104
+
subgraph "Development"
105
+
CLI[OC CLI]
106
+
DEV[Local Dev Server]
107
+
COMP[Components]
108
+
end
109
+
110
+
subgraph "Registry & Distribution"
111
+
REG[OC Registry<br/>REST API]
112
+
LIB[Component Library<br/>Storage]
113
+
CDN[CDN<br/>Static Assets]
114
+
end
115
+
116
+
subgraph "Consumption"
117
+
SSR[Server-Side<br/>Rendering]
118
+
CSR[Client-Side<br/>Rendering]
119
+
APPS[Applications<br/>Any Backend]
120
+
end
121
+
122
+
CLI --> REG
123
+
DEV --> REG
124
+
COMP --> CLI
125
+
126
+
REG --> LIB
127
+
LIB --> CDN
128
+
129
+
REG --> SSR
130
+
REG --> CSR
131
+
CDN --> SSR
132
+
CDN --> CSR
133
+
134
+
SSR --> APPS
135
+
CSR --> APPS
136
+
137
+
style REG fill:#4CAF50
138
+
style LIB fill:#2196F3
139
+
style CDN fill:#FF9800
140
+
style CLI fill:#9C27B0
74
141
```
75
142
76
-
OpenComponents' heart is a **REST API** that enables consuming and publishing components across distributed systems.
Welcome! In this section you’ll find high-level material that helps you understand _why_OpenComponents exists and _how_ its pieces fit together. Start here if you want the big picture before diving into tutorials or code.
7
+
Learn about the fundamental concepts that make OpenComponents a powerful solution for micro frontend architecture.
8
8
9
-
-**Introduction** – a birds-eye view and quick install.
10
-
-**Architecture Overview** – explore the design principles behind the Registry, Templates, and OC-Client.
9
+
<divclassName="concepts-overview">
10
+
11
+
<divclassName="concept-overview-card">
12
+
13
+
## 🤔 **Why OpenComponents?**
14
+
15
+
Understand the problems OpenComponents solves and when to choose it over other micro frontend solutions.
16
+
17
+
**Key topics:**
18
+
- Team independence and autonomy
19
+
- Server-side rendering without Node.js
20
+
- Immutable, versioned deployments
21
+
- Language-agnostic consumption
22
+
23
+
[**Learn Why →**](why-opencomponents)
24
+
25
+
</div>
26
+
27
+
<divclassName="concept-overview-card">
28
+
29
+
## 🏗️ **Architecture Overview**
30
+
31
+
Deep dive into how OpenComponents works under the hood and how all the pieces fit together.
0 commit comments