Skip to content

MODULAR_ARCHITECTURE.md

Latest commit

 

History

History
256 lines (186 loc) · 8.43 KB

MODULAR_ARCHITECTURE.md

File metadata and controls

256 lines (186 loc) · 8.43 KB

NoteMesh - Comprehensive Modular Architecture

Project Structure

NoteMesh/
├── index.html              # Main HTML file
├── style.css              # All CSS styles and responsive design
├── app.js                 # Main application entry point (23 lines)
├── script/                # Modular JavaScript files
│   ├── models/
│   │   └── Note.js        # Note data model (84 lines)
│   ├── managers/
│   │   ├── NoteManager.js # Note operations and storage (178 lines)
│   │   ├── ThemeManager.js# Theme switching logic (40 lines)
│   │   └── UIManager.js   # UI interactions and rendering (850 lines)
│   ├── utils/             # Utility modules
│   │   ├── DateUtils.js   # Date and time utilities (104 lines)
│   │   ├── StringUtils.js # String manipulation utilities (87 lines)
│   │   ├── ArrayUtils.js  # Array and collection utilities (67 lines)
│   │   ├── StorageUtils.js# LocalStorage utilities (66 lines)
│   │   ├── DOMUtils.js    # DOM manipulation utilities (81 lines)
│   │   ├── FileUtils.js   # File and export utilities (44 lines)
│   │   ├── ValidationUtils.js # Input validation utilities (45 lines)
│   │   ├── PerformanceUtils.js # Performance optimization utilities (49 lines)
│   │   ├── ColorUtils.js  # Color generation and manipulation (46 lines)
│   │   └── index.js       # Utility modules index (8 lines)
│   └── graph/             # Graph visualization modules
│       ├── GraphConfig.js # Graph configuration constants (41 lines)
│       ├── GraphPhysics.js# Physics simulation engine (102 lines)
│       ├── GraphEventHandler.js # Event handling for graph (127 lines)
│       ├── GraphRenderUtils.js # Rendering utilities (254 lines)
│       └── GraphRenderer.js # Main graph renderer (254 lines)
├── app-backup.js          # Original monolithic app.js (1,142 lines - backup)
├── utils.js               # Original utils.js (599 lines - backup)
└── graph.js               # Original graph.js (726 lines - backup)

Module Responsibilities

Note.js (Model)

  • Purpose: Data model for individual notes
  • Key Features:
    • Note creation and serialization
    • Link extraction ([[Note Title]] format)
    • Word count calculation
    • Tag parsing and management
    • Search matching logic

NoteManager.js (Data Management)

  • Purpose: Handles all note operations and persistence
  • Key Features:
    • CRUD operations (Create, Read, Update, Delete)
    • LocalStorage persistence
    • Search and filtering
    • Tag management and statistics
    • Note linking and backlinks
    • Event system for UI updates
    • Import/export functionality

ThemeManager.js (Theme System)

  • Purpose: Manages light/dark theme switching
  • Key Features:
    • Theme toggle functionality
    • LocalStorage persistence
    • Icon updates for theme state
    • Programmatic theme setting

UIManager.js (User Interface)

  • Purpose: Handles all UI interactions and rendering
  • Key Features:
    • DOM element initialization
    • Event binding and handling
    • View switching (Notes, Graph, Tags)
    • Modal management
    • Mobile responsive behavior
    • Search interface
    • Keyboard shortcuts
    • Notification system

app.js (Entry Point)

  • Purpose: Application initialization and coordination
  • Key Features:
    • Creates manager instances
    • Initializes the application
    • Global exports for debugging
    • Module coordination

Loading Order

The scripts must be loaded in this specific order:

  1. utils.js - Utility functions
  2. graph.js - Graph visualization
  3. js/models/Note.js - Data model
  4. js/managers/NoteManager.js - Data management
  5. js/managers/ThemeManager.js - Theme system
  6. js/managers/UIManager.js - UI management
  7. app.js - Application initialization

Data Flow

User Interaction
       ↓
   UIManager (handles events)
       ↓
   NoteManager (processes data)
       ↓
   Note Model (data operations)
       ↓
   LocalStorage (persistence)
       ↓
   UIManager (updates display)

Development Guidelines

Adding New Features

  1. Identify which module the feature belongs to
  2. Update the appropriate module
  3. Add any necessary UI components to UIManager
  4. Test the feature in isolation
  5. Ensure all modules still work together

Module Communication

  • Use the event system in NoteManager for data changes
  • Pass data through method parameters
  • Avoid direct DOM manipulation outside UIManager
  • Keep state management centralized

This modular architecture makes NoteMesh much more maintainable and easier to extend! 🚀

Complete Module Breakdown

Core Application Modules

Note.js (Model)

  • Purpose: Data model for individual notes
  • Key Functions: generateId(), extractLinks(), serialize(), deserialize()
  • Dependencies: None (standalone model)

NoteManager.js (Data Management)

  • Purpose: Handles all note operations and persistence
  • Key Functions: addNote(), updateNote(), searchNotes(), event system
  • Dependencies: Note.js, StorageUtils.js

ThemeManager.js (Theme System)

  • Purpose: Manages light/dark theme switching
  • Key Functions: toggleTheme(), applyTheme(), updateThemeToggleIcon()
  • Dependencies: StorageUtils.js

UIManager.js (UI Coordination)

  • Purpose: Handles all user interface interactions
  • Key Functions: renderNotes(), mobile navigation, keyboard shortcuts
  • Dependencies: NoteManager.js, ThemeManager.js, multiple utils

Utility Modules (script/utils/)

DateUtils.js

  • Functions: formatDate(), getRelativeTime(), isToday(), isThisWeek()
  • Use Cases: Note timestamps, relative time display

StringUtils.js

  • Functions: escapeHtml(), truncate(), highlightSearchTerm(), wordCount()
  • Use Cases: Text processing, search highlighting, security

ArrayUtils.js

  • Functions: unique(), groupBy(), sortBy(), chunk()
  • Use Cases: Note filtering, tag management, data organization

StorageUtils.js

  • Functions: setItem(), getItem(), removeItem(), clear()
  • Use Cases: Safe localStorage operations with error handling

DOMUtils.js

  • Functions: createElement(), addEventListenerWithCleanup(), isInViewport()
  • Use Cases: Dynamic UI creation, memory-safe events

FileUtils.js

  • Functions: downloadAsFile(), readAsText(), formatFileSize()
  • Use Cases: Note export/import, file handling

ValidationUtils.js

  • Functions: isValidEmail(), isValidUrl(), isEmpty(), isValidLength()
  • Use Cases: Input validation, data sanitization

PerformanceUtils.js

  • Functions: debounce(), throttle(), measureTime()
  • Use Cases: Search optimization, event rate limiting

ColorUtils.js

  • Functions: randomHex(), stringToColor(), isLightOrDark()
  • Use Cases: Tag colors, theme detection

📊 Graph Visualization Modules (script/graph/)

GraphConfig.js

  • Purpose: Visual and physics configuration constants
  • Contains: Node styling, edge styling, physics parameters

GraphPhysics.js

  • Purpose: Force simulation engine for node positioning
  • Key Function: updatePhysics() - handles repulsion, attraction, damping

GraphEventHandler.js

  • Purpose: Mouse/touch interaction handling
  • Key Functions: onMouseDown(), onMouseMove(), onWheel(), touch events

GraphRenderUtils.js

  • Purpose: Canvas drawing and rendering utilities
  • Key Functions: renderNodes(), renderEdges(), renderUI(), text utilities

GraphRenderer.js

  • Purpose: Main graph coordination and public API
  • Key Functions: generateGraph(), startAnimation(), refresh(), zoomToFit()

🚀 Architecture Excellence

This comprehensive modularization represents a best-practice software architecture that:

  1. Follows Single Responsibility Principle - Each module has one clear purpose
  2. Enables Easy Testing - Modules can be tested in isolation
  3. Supports Future Growth - New features can be added without disrupting existing code
  4. Promotes Code Reuse - Utilities and components are highly reusable
  5. Improves Debugging - Issues can be quickly isolated to specific modules
  6. Enhances Collaboration - Multiple developers can work on different modules
  7. Reduces Merge Conflicts - Smaller, focused files mean fewer conflicts