Mini-Framework
Mini-Framework is a minimal yet complete JavaScript framework that demonstrates the core concepts of modern UI development. It provides a component-based architecture with virtual DOM abstraction, event handling, centralized state management, and client-side routing. The framework is implemented in just 70 lines of core code, making it perfect for educational purposes and understanding how reactive frameworks work.
Context
The Mini-Framework project implements a complete TodoMVC application to showcase the framework capabilities. It includes features like adding todos, toggling completion status, inline editing with double-click, filtering by status (All/Active/Completed), and a clean, responsive user interface. The framework consists of three core modules: VElement for component creation, Store for state management with observer pattern, and Router for client-side navigation.
The problem
Creating a minimal framework that maintains simplicity while providing all essential features for reactive UI programming. Implementing a virtual DOM abstraction without complexity. Managing state efficiently with an observer pattern. Building a client-side router without hash-based navigation.
Architecture & decisions
Achieved simplicity through a minimalist API design focusing on essential functionality. Implemented VElement as a thin abstraction over native DOM. Used a simple observer pattern for state management. Leveraged the History API for clean URL-based routing. Demonstrated full re-rendering on state changes for clarity and correctness.
What it does
- Component-based Architecture
- Virtual DOM Element Abstraction
- State Management with Observer Pattern
- Client-side Routing
- Event Handling System
- Todo Creation & Management
- Inline Todo Editing
- Responsive Design