21 / 21

Chapter 16: Component-Based Software Engineering

نموذج إِمام التعليمي: إنطلاقة راسخة على خطى الأولين
وَجَعَلْنَاكُمْ شُعُوبًا وَقَبَائِلَ لِتَعَارَفُوا

"We made you into nations and tribes that you may know one another" - Qur'an 49:13

(Transliteration: WajaʿalnÄkum shuʿÅ«ban waqabÄʾila litaʿÄrafÅ«)

Foundation: التكامل (Integration) and التعاون (Cooperation)

⚡ Your Mission: Master component engineering to build Saudi Arabia's software ecosystem
افهم
Understand

What are components?
Core characteristics
Section: Fundamentals

مارس
Practice

CBSE processes
Hands-on building
Section: Processes

اتقن
Master

Composition patterns
Production systems
Section: Composition

ميز
Excel

Innovation & Scale
Vision 2030
Section: Innovation

🚀 Framework Evolution: Shaping Component Engineering

افهم

Two Lenses for Mastering CBSE

🏭 Industrial Revolution 6.0 (IR 6.0)

Human-Centric Engineering (2020s)

  • Section 16.1 - Components: Enhances reusability (e.g., Nafath auth for 30M users) and standardization (e.g., Saudi e-Gov standards).
  • Section 16.2 - CBSE Processes: Optimizes development cycles (e.g., SAMA banking components) for rapid deployment.
  • Section 16.3 - Composition: Drives modular architectures (e.g., Absher microservices).
  • Section 16.4 - Innovation: Enables cloud-native components (e.g., NEOM smart city modules).
Market Impact: IR 6.0 reduces development time by 40% at STC through component reuse.

📖 Islamization of Knowledge

إسلامية المعرفة (Proactive)

  • Section 16.1 - Components: Derives modularity from Islamic unity in diversity (Qur'an 49:13).
  • Section 16.2 - Processes: Models development from Islamic consultation (Shura).
  • Section 16.3 - Composition: Inspires integration from community building principles.
  • Section 16.4 - Innovation: Aligns innovation with serving humanity (khidmah).
Principle: Components as صدقة جارية (continuous charity) - benefit persists.
University Tool: Theoretical Foundation
Market Test: Production Deployment

🎯 Your Learning Approach (Mapped to Objectives)

  • ✅ Understand component characteristics and models (Objective 1, Section 16.1).
  • ✅ Master CBSE processes for/with reuse (Objective 2, Section 16.2).
  • ✅ Apply composition patterns to real systems (Objective 3, Section 16.3).
  • ✅ Design innovative component ecosystems (Objective 4, Section 16.4).
🤔 Quick Quiz: Which IR 6.0 Benefit Applies to Components? (2 mins)
⏱️ Timer: 2:00
A. Reusability - Build once, use many times
B. Standardization - Common interfaces
C. Modularity - Independent units
D. All of the above

🌐 Mission Context: Components in Your Life

افهم
University Tool: Abstraction
Market Test: Real-World Assembly
Right now: You're using 100+ software components without knowing it

🎯 Start With Your Experience (2 mins)

⏱️ Timer: 2:00

(Adapt for online/in-person; use breakout rooms)

Quick Activity: List components you've used today:

  • Login button on website (authentication component)
  • Payment on app (payment processing component)
  • Map in Uber (mapping component)
  • Chat in Teams (messaging component)

Notice: Same components, different apps. How?!

💥 The Component Revolution

  • • 90% of modern apps use third-party components
  • • npm has 2.1 million packages
  • • Average app uses 200+ components
  • • Components save 60% development time
🤔 Quick Poll: What makes something a component?
A. It's written in Java
B. It's independent and reusable
C. It's small code
D. It's open source

📚 What IS a Software Component?

افهم
University Tool: Formal Definition
Market Test: Practical Recognition

🔍 Discover It Yourself (3 mins)

⏱️ Timer: 3:00

(Adapt for online/in-person)

With your neighbor, classify these scenarios:

Item Component? (Yes/No) Why?
Google Maps API ? Your answer...
Print statement ? Your answer...
React.js ? Your answer...
Authentication module ? Your answer...

Google Maps API: Yes - Independent, documented, reusable
Print statement: No - Too simple, not independent
React.js: Yes - Framework component
Authentication: Yes - Self-contained service

Szyperski (2002): "A software component is a unit of composition with contractually specified interfaces and explicit context dependencies only"
Market Reality: Poorly documented components cost Saudi companies 15% more in integration time.

🚀 Essential Component Characteristics

افهم
University Tool: Analysis
Market Test: Quality Assessment

🎮 Live Exercise: Rate Nafath Authentication (5 mins)

⏱️ Timer: 5:00

(Adapt for online/in-person)

Score Nafath on each characteristic (1-5 stars):

Characteristic Description Nafath Score Why?
📦 Composable Can be combined with others ⭐⭐⭐⭐⭐ Works with all Saudi apps
🚀 Deployable Self-contained, ready to run ⭐⭐⭐⭐⭐ One SDK, instant integration
📖 Documented Clear usage instructions ⭐⭐⭐⭐ Good docs, needs more examples
🔐 Independent No hidden dependencies ⭐⭐⭐⭐⭐ Standalone service
⚙️ Standardized Follows component model ⭐⭐⭐⭐⭐ OAuth 2.0 standard

Real-World Challenge

Problem: 70% of components fail one characteristic

Most common failure: Poor documentation

Saudi solution: Mandatory Arabic + English docs

🔌 Component Interfaces

مارس
University Tool: Interface Design
Market Test: API Contracts

🎭 Role Play: Restaurant Component (4 mins)

⏱️ Timer: 4:00

(Budget: Design payment component)

Team Activity: Design interfaces for payment component

  • What it provides: processPayment(), refund(), getStatus()
  • What it requires: Database, Network, Security

Two Critical Interfaces

Requires Interface

Dependencies
→

Component

Implementation
→

Provides Interface

Services
// Saudi Payment Component Example
interface SAMAPaymentComponent {
  // Provides interface
  processMADA(amount, merchant);
  validateIBAN(iban);
  sendSARIE(transaction);
  // Requires interface
  encryptionService();
  auditLogger();
  fraudDetection();
}
Market Reality: SAMA's payment interface standards process 100M+ transactions daily.

🏗️ Component Models & Standards

مارس
University Tool: Standardization
Market Test: Interoperability

Major Component Models

Model Use Case Saudi Implementation Market Share
EJB (Enterprise JavaBeans) Enterprise Java SAMA banking 15%
.NET Components Microsoft ecosystem Government portals 25%
Web Services Cross-platform Absher APIs 30%
Microservices Cloud-native NEOM services 30%

Middleware Services

Platform Services

• Addressing
• Communication
• Interface definition
• Exception handling

Support Services

• Security
• Transactions
• Persistence
• Concurrency

Industry Tool: Use OpenAPI/Swagger for standardizing component interfaces.

🔄 CBSE Development Processes

مارس

Two Main Processes

📤 CBSE for Reuse

Creating Components

  • Domain analysis
  • Abstraction design
  • Interface specification
  • Documentation
  • Testing & certification
3-5x
Initial cost
10+
Uses to break even

📥 CBSE with Reuse

Using Components

  • Requirements outline
  • Component search
  • Evaluation & selection
  • Adaptation
  • Integration
60%
Time saved
40%
Cost reduction

Market Reality Check

Vision (2000): Thriving component marketplaces

Reality (2025): Internal reuse dominates (80%)

Saudi approach: Build national component repository

🏗️ Creating Reusable Components

اتقن

🛠️ Workshop: Make It Reusable (5 mins)

⏱️ Timer: 5:00

Transform this specific code into a reusable component:

// BEFORE: Specific to one bank
function validateAlRajhiAccount(account) {
  if (account.startsWith("68")) {
    return account.length === 24;
  }
  return false;
}

// YOUR TASK: Make it work for any Saudi bank
// AFTER: Reusable for all banks
class IBANValidator {
  constructor(config) {
    this.rules = config.rules || defaultSAMARules;
  }

  validate(iban, bankCode) {
    const rule = this.rules[bankCode];
    if (!rule) throw new Error('Unknown bank');
    return rule.validate(iban);
  }

  addBank(code, validationRule) {
    this.rules[code] = validationRule;
  }
}

Reusability Checklist

✅ Remove hardcoded values
✅ Add configuration options
✅ Handle multiple scenarios
✅ Provide clear interfaces
✅ Include error handling
✅ Write documentation

🔨 Using Components Effectively

اتقن

Component Selection Process

Requirements
→
Search
→
Evaluate
→
Adapt
→
Integrate

⚠️ Ariane 5 Disaster - Component Reuse Gone Wrong

What happened: Reused Ariane 4 navigation software

Problem: Integer overflow in unused function

Cost: $500 million rocket destroyed

Lesson: ALWAYS validate assumptions when reusing!

Saudi parallel: Hajj app crash due to untested component scaling

Component Evaluation Matrix

Criteria Weight Component A Component B
Functionality fit 30% 8/10 9/10
Performance 25% 9/10 7/10
Documentation 20% 6/10 9/10
Support 15% 7/10 8/10
Cost 10% Free $5000

🔗 Component Composition Patterns

اتقن

Three Composition Types

1️⃣ Sequential

→→→

Output feeds input
Example: Data pipeline
Validate → Transform → Store

2️⃣ Hierarchical

🌳

Parent calls children
Example: Service layers
Controller → Service → DAO

3️⃣ Additive

➕

Parallel functionality
Example: Plugin system
Core + Extensions

// Sequential Composition Example
const pipeline = [
  validateNationalID,
  enrichWithAbsherData,
  calculateCreditScore,
  generateReport
];

const result = pipeline.reduce(
  (data, component) => component.process(data),
  initialData
);
🤔 Which pattern for Saudi e-commerce platform?
A. Sequential only
B. Hierarchical only
C. All three combined
D. None needed

🔧 Adaptors: Making Components Work Together

اتقن

🔄 Live Challenge: Fix the Mismatch (3 mins)

⏱️ Timer: 3:00

Problem: Payment component expects USD, Saudi system uses SAR

// Component A: International payment
paymentAPI.charge({amount: 100, currency: "USD"});

// Component B: Saudi system
localSystem.process({riyals: 375});

// YOUR TASK: Write an adaptor
class PaymentAdaptor {
  constructor(exchangeRate = 3.75) {
    this.rate = exchangeRate;
  }

  processSaudiPayment(sarAmount) {
    const usdAmount = sarAmount / this.rate;
    return paymentAPI.charge({
      amount: usdAmount,
      currency: "USD"
    });
  }
}

Common Adaptor Patterns

🔄 Format Converter

XML ↔ JSON
Arabic ↔ English

🎭 Interface Wrapper

REST ↔ SOAP
Sync ↔ Async

🌉 Protocol Bridge

HTTP ↔ WebSocket
MQTT ↔ AMQP

📦 Legacy Wrapper

Old ↔ New API
Mainframe ↔ Cloud

🇸🇦 Saudi Arabia's Component Revolution

ميز
Vision 2030: Building a National Component Repository serving MENA region

🏛️ Government Platform

300+
Shared components
  • Nafath authentication
  • Absher services
  • Yesser integration

💰 Financial Services

50+
Banking components
  • SAMA standards
  • SARIE payments
  • Open Banking APIs

🏥 Healthcare

100+
Medical components
  • Sehhaty modules
  • NPHIES integration
  • Wasfaty e-prescription

🏗️ NEOM Tech

500+
Smart city components
  • IoT frameworks
  • AI services
  • Digital twin platform
Innovation Opportunities:
  • Arabic NLP components (huge gap in market)
  • Islamic finance modules (global demand)
  • Hajj/Umrah management components (unique expertise)

🔒 Component Security & Islamic Ethics

ميز
وَلَا تَجَسَّسُوا

"And do not spy" - Qur'an 49:12

Principle: Components must respect privacy and data sovereignty

Security Considerations

Threat Risk Mitigation Saudi Example
Supply Chain Attack Compromised components Code signing, auditing NCA certification required
Data Leakage Unauthorized access Encryption, access control Nafath MFA mandatory
Version Vulnerabilities Outdated components Regular updates Automated scanning
License Violations Legal issues License management Compliance checks

Ethical Component Development

  • ✅ Respect user privacy (no hidden tracking)
  • ✅ Transparent data usage
  • ✅ Accessible to all abilities
  • ✅ Cultural sensitivity (Arabic support)
  • ✅ Environmental efficiency

💼 Your Component Engineering Career Path

ميز

12-Month Roadmap to Excellence

Months 1-3: Foundation
  • Master component principles
  • Learn design patterns
  • Build first component
Months 4-6: Specialization
  • Choose domain (fintech/health/gov)
  • Study domain standards
  • Contribute to open source
Months 7-9: Production
  • Internship at Saudi tech company
  • Build production components
  • Learn deployment pipelines
Months 10-12: Leadership
  • Lead component project
  • Mentor juniors
  • Publish components

Saudi Career Opportunities

Company Role Salary (SAR) Growth
SAMA Component Architect 320,000+ Very High
Aramco Integration Engineer 300,000 High
STC Platform Developer 280,000 High
NEOM Smart City Developer 350,000+ Extreme

🎓 Bridging University to Market

ميز

الجامعة تعلمك (University Teaches You)

  • التجريد (Abstraction)
  • المعايير (Standards)
  • الواجهات (Interfaces)
  • التصميم (Design)
  • النظرية (Theory)
  • التوثيق (Documentation)
  • الاختبار (Testing)
  • الجودة (Quality)

السوق يعلمك (Market Teaches You)

  • السرعة تهم (Speed matters)
  • التكلفة حاسمة (Cost is critical)
  • الصيانة مستمرة (Maintenance forever)
  • الديون التقنية حقيقية (Tech debt is real)
  • المستخدم لا يهتم بالكود (Users don't care about code)
  • التكامل أصعب من البناء (Integration > Building)
  • القديم لا يموت (Legacy never dies)

University gives the foundation: How to think about components abstractly.

Market tests the implementation: Can your components handle 10M users?

Bridge: Start with solid principles, iterate based on real feedback.

📝 Assignment: Design National Component System

ميز
Design a complete component ecosystem for Saudi Arabia's digital transformation

Choose ONE National Challenge:

  1. 🏥 Unified health records components (30M citizens)
  2. 🎓 National education platform modules (6M students)
  3. 🚗 Smart traffic management components (Riyadh)
  4. ⚡ National energy monitoring modules
  5. 🌾 Agricultural IoT component library

Deliverables (EMAM Framework)

Phase Weight Requirements Rubric
افهم 20% Component analysis, characteristics Clear definitions – 10/20; Examples – 10/20
مارس 30% Interface design, CBSE process Complete interfaces – 15/30; Process flow – 15/30
اتقن 30% Composition patterns, adaptors Working integration – 15/30; Adaptors – 15/30
ميز 20% Innovation, Vision 2030 alignment Novel approach – 10/20; Saudi impact – 10/20

Submission Requirements

  • Due: Next week
  • Format: PDF + GitHub repo
  • Must include: 5+ components, full documentation
  • Bonus: Working prototype, Arabic/English docs

🎯 Key Takeaways - Chapter 16 Mastery

Summary: "Component-based software engineering enables systematic reuse through independent, standardized, and composable software units" (Sommerville, 2015)
🧠 Core Concepts

• Characteristics
• Interfaces
• Standards

💼 Processes

• For reuse
• With reuse
• Management

🔗 Composition

• Three patterns
• Adaptors
• Integration

🚀 Innovation

• Saudi ecosystem
• Security & ethics
• Future trends

Success Formula

Technical Mastery + Islamic Values + Saudi Vision + Global Impact = Your Legacy

Self-Reflection Prompts

  • Which component characteristic is most challenging for you?
  • Rate your EMAM progress (1-5 each phase).
  • How will you contribute to Saudi's component ecosystem?

🤝 Your Component Engineering Commitment

إِنَّ اللَّهَ يُحِبُّ إِذَا عَمِلَ أَحَدُكُمْ عَمَلًا أَنْ يُتْقِنَهُ

"Allah loves when one of you does work, that they perfect it" - Hadith

(Transliteration: Inna AllÄha yuḥibbu idhÄ ʿamila aḥadukum ʿamalan an yutqinahu)

Every component you build becomes a building block for humanity's progress.
افهم

Foundation

Master principles

Understand standards

مارس

Application

Build components

Create interfaces

Test thoroughly

اتقن

Excellence

Production quality

Seamless integration

ميز

Innovation

Lead change

Global impact

Serve millions

Commitment Questions:

  • What component will you build first?
  • How will it serve Saudi Arabia?
  • Who will benefit from your work?
  • What legacy will you create?

📚 Resources & Next Steps

Essential Resources

📖 Reading

• Sommerville Ch.16
• Component Software (Szyperski)
• Saudi e-Gov standards

🛠️ Tools

• npm/Maven/NuGet
• Docker/Kubernetes
• OpenAPI/Swagger

🌐 Communities

• Saudi Developers
• Open Source Arabia
• Component Patterns

🎓 Certifications

• AWS Solutions Architect
• Azure Developer
• TOGAF Architecture

Industry Connections

Organization Opportunity Contact
SDAIA AI components internship careers.sdaia.gov.sa
Elm Government components elm.sa/careers
Lean Business Startup components lean.sa
MCIT Digital transformation mcit.gov.sa

🙏 شكرًا - Your Journey Begins Now

وَقُل رَّبِّ زِدْنِي عِلْمًا

"My Lord, increase me in knowledge" - Qur'an 20:114

Component knowledge compounds - keep building!

You now understand how to build software that scales globally
From single functions to enterprise ecosystems - you're ready!
📧 Contact

Office Hours: By Email

Email: arnoor@kau.edu.sa

📅 Next Class

Chapter 17

Distributed Systems

Monday, 2:30 PM

📝 Due Soon

Component design

Next week

Start TODAY!

🎯 Resources

Blackboard

GitHub repo

Component library

بروف: أديب بن رضا نور

See you next class, إن شاء الله
Remember: Your components will power the future!