Key Concepts
Components are independently deployable units with well-defined interfaces. The goal: plug in, not rewrite.
What is a Component?
A deployable, independent unit of software with defined 'provides' (services) and 'requires' (dependencies) interfaces.
Provides and Requires Interfaces
A component publishes what it offers (provides) and declares what it needs (requires).
Component-Based Development Process
Requirements → Identify candidate components → Search repository → Adapt → Integrate → Validate.
Concept Deep Dives
Click each concept to expand — real examples, diagrams, pros & cons.
What is a Component?
When to Use
Any reusable unit of software that can be used without knowing its internals.
Real-World Example
React components: Button, Modal, DataTable — each has a defined interface (props) and can be reused anywhere.
✓ Advantages
- Encapsulation
- Independently deployable
- Reusable across projects
⚠ Watch Out
- Interface design is hard
- Versioning complexity
- Discovery problem
Provides and Requires Interfaces
When to Use
When designing reusable components — interfaces must be specified before implementation.
Real-World Example
npm package: exports = provides interface. peerDependencies = requires interface.
✓ Advantages
- Explicit contracts
- Enables independent development
- Testable in isolation
⚠ Watch Out
- Interface changes break consumers
- Requires interface governance
Component-Based Development Process
When to Use
Building systems primarily from reusable components.
Real-World Example
Building a SaaS dashboard: find auth component, find data grid component, find charting component, integrate, customize.
✓ Advantages
- Faster development
- Higher quality through reuse
- Modular maintenance
⚠ Watch Out
- Requirements may need adjustment
- Integration complexity
- Repository/discovery challenge
Quick Reference
- 1Components: independent, deployable software units with defined interfaces.
- 2Provides interface: services offered. Requires interface: external dependencies needed.
- 3Component model: specification of component interfaces, usage, and composition.
- 4CBD process: identify, find, adapt, integrate, validate — assemble from components.
- 5Interface design is critical — it's a contract between component and consumer.
Quiz — Test Yourself
Think through your answer first, then reveal.