┌─────────────────────────────────────────────────────────────────┐
│ index.html │
│ (Main Application Page) │
└────────────────────────────┬────────────────────────────────────┘
│
┌────────┴────────┐
│ Load Scripts │
│ (in order) │
└────────┬────────┘
│
┌────────────────────┼────────────────────┐
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ CONFIGURATION│ │ UTILITIES │ │ SERVICES │
├──────────────┤ ├──────────────┤ ├──────────────┤
│ constants.js │ │ color-utils │ │ api-service │
│ tinymce- │ │ dom-utils │ │ storage- │
│ config.js │ │ array-utils │ │ service │
│ │ │ validation- │ │ export- │
│ │ │ utils │ │ service │
│ │ │ notification-│ │ rss-service │
│ │ │ utils │ │ │
└──────────────┘ └──────────────┘ └──────────────┘
│ │ │
└────────────────────┼────────────────────┘
│
▼
┌──────────────┐
│ COMPONENTS │
├──────────────┤
│ editable.js │
│ popup.js │
│ slider.js │
│ searchbar.js │
└──────────────┘
│
▼
┌──────────────┐
│ app.js │
│ (Main Vue │
│ Instance) │
└──────────────┘
┌─────────────────────────────────────────────────────┐
│ app.js (Main App) │
│ ┌─────────────────────────────────────────────┐ │
│ │ • Uses all utilities │ │
│ │ • Uses all services │ │
│ │ • Registers all components │ │
│ │ • Manages application state │ │
│ └─────────────────────────────────────────────┘ │
└────────────┬──────────────┬─────────────┬──────────┘
│ │ │
┌────▼───┐ ┌────▼────┐ ┌───▼────┐
│Services│ │Components│ │Utils │
└────┬───┘ └─────────┘ └───┬────┘
│ │
└───────────┬───────────────┘
│
┌────▼────┐
│ Config │
└─────────┘
┌─────────────────────────────────────────────────────────────┐
│ User Action │
└─────────────────────────────┬───────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Vue Component/App │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 1. Handle user input │ │
│ │ 2. Validate data (validation-utils) │ │
│ │ 3. Process data (business logic) │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────┬───────────────────────────────┘
│
┌─────────────┼─────────────┐
│ │ │
▼ ▼ ▼
┌───────────┐ ┌──────────┐ ┌──────────┐
│ Service │ │ DOM │ │ Storage │
│ API Call │ │ Update │ │ Save │
└───────────┘ └──────────┘ └──────────┘
│ │ │
└─────────────┼─────────────┘
│
▼
┌─────────────────┐
│ Update UI │
│ (Vue reactivity)│
└─────────────────┘
User clicks "Load Posts"
│
▼
app.loadPostsFromURL()
│
├─> validateFetchURL(url) [validation-utils.js]
│ └─> isValidURL(url) [validation-utils.js]
│
├─> sendInfo("Loading Posts") [notification-utils.js]
│
├─> fetchWithFallback(url) [api-service.js]
│ └─> fetchWithTimeout(url) [api-service.js]
│
├─> parseRSSItem(item) [rss-service.js]
│ └─> (for each post)
│
├─> this.posts.push(post) [app.js]
│
└─> sendSuccess("Loaded posts") [notification-utils.js]
│
▼
Vue updates UI automatically
┌─────────────────────────────────────────────────────┐
│ Component Mounted │
└─────────────────────────┬───────────────────────────┘
│
┌─────────────┼─────────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ editable │ │ popup │ │ slider │
└─────┬────┘ └────┬─────┘ └────┬─────┘
│ │ │
│ Initialize TinyMCE │
│ Setup event listeners │
│ Bind data to DOM │
│ │ │
└────────────┼─────────────┘
│
▼
User Interactions
│
▼
Component beforeDestroy
│
┌────────────┼─────────────┐
│ │ │
Remove Clean up Remove
editors listeners timers
│ │ │
└────────────┼─────────────┘
│
▼
Memory Released
Largest Module:
┌────────────────────────────────────────┐
│ app.js: ~800 lines (main application) │
│ █████████ │
├────────────────────────────────────────┤
│ Average module: ~100 lines │
│ ██ │
├────────────────────────────────────────┤
│ Smallest modules: ~25 lines │
│ █ │
└────────────────────────────────────────┘
Focused modules keep code manageable and testable!
High Reusability
▲
│
┌──────────┤
│ UTILS │ ← Can be used in any project
└──────────┤
│
┌──────────┤
│ SERVICES │ ← Can be adapted for similar apps
└──────────┤
│
┌──────────┤
│COMPONENTS│ ← Vue-specific, but reusable
└──────────┤
│
┌──────────┤
│ APP.JS │ ← Application-specific logic
└──────────┤
│
Low Reusability
┌──────────────────────────────────────────────────────┐
│ NO DEPENDENCIES │
│ ┌─────────────┐ ┌──────────────┐ │
│ │ constants │ │ color-utils │ │
│ └─────────────┘ └──────────────┘ │
└──────────────────────────────────────────────────────┘
│
┌──────────────────────┼───────────────────────────────┐
│ DEPENDS ON CONSTANTS │
│ ┌──────────────┐ ┌─────────────┐ ┌──────────────┐│
│ │tinymce-config│ │ dom-utils │ │array-utils ││
│ └──────────────┘ └─────────────┘ └──────────────┘│
└──────────────────────────────────────────────────────┘
│
┌──────────────────────┼───────────────────────────────┐
│ DEPENDS ON UTILS & CONFIG │
│ ┌──────────────┐ ┌─────────────┐ ┌──────────────┐│
│ │validation- │ │notification-│ │api-service ││
│ │utils │ │utils │ │ ││
│ └──────────────┘ └─────────────┘ └──────────────┘│
└──────────────────────────────────────────────────────┘
│
┌──────────────────────┼───────────────────────────────┐
│ DEPENDS ON SERVICES │
│ ┌──────────────┐ ┌─────────────┐ ┌──────────────┐│
│ │storage- │ │export- │ │rss-service ││
│ │service │ │service │ │ ││
│ └──────────────┘ └─────────────┘ └──────────────┘│
└──────────────────────────────────────────────────────┘
│
┌──────────────────────┼───────────────────────────────┐
│ DEPENDS ON CONFIG & UTILS │
│ ┌──────────────┐ ┌─────────────┐ ┌──────────────┐│
│ │editable │ │popup │ │slider ││
│ │component │ │component │ │component ││
│ └──────────────┘ └─────────────┘ └──────────────┘│
└──────────────────────────────────────────────────────┘
│
┌──────────────────────┼───────────────────────────────┐
│ DEPENDS ON EVERYTHING │
│ ┌─────────────┐ │
│ │ app.js │ │
│ │ (Main App) │ │
│ └─────────────┘ │
└──────────────────────────────────────────────────────┘
Step 1: Configuration
└─> constants.js
└─> tinymce-config.js
Step 2: Utilities (no dependencies)
└─> color-utils.js
└─> dom-utils.js
└─> array-utils.js
└─> validation-utils.js
└─> notification-utils.js
Step 3: Services (depend on utils)
└─> storage-service.js
└─> api-service.js
└─> export-service.js
└─> rss-service.js
Step 4: Components (depend on config)
└─> editable.js
└─> popup.js
└─> slider.js
└─> searchbar.js
Step 5: Application (depends on all)
└─> app.js
⚠️ Loading out of order will cause errors!
Modular Structure:
┌──────┐ ┌──────┐ ┌──────┐
│Config│ │Utils │ │Srvcs │
└──┬───┘ └──┬───┘ └──┬───┘
└────────┼────────┘
│
┌─────▼─────┐
│Components │
└─────┬─────┘
│
┌─────▼─────┐
│ App │
└───────────┘
✅ Easy to navigate
✅ Simple to test
✅ Clear dependencies
✅ Excellent organization
This architecture provides:
- ✅ Clear Separation of Concerns - Each module has a focused responsibility
- ✅ Predictable Data Flow - Unidirectional dependencies from app to services/utils
- ✅ Easy Testing - Pure functions and isolated modules
- ✅ Maintainable Code - Organized structure with clear boundaries
- ✅ Scalable Structure - Easy to add new features in appropriate modules