Domino Framework

A lightweight, educational JavaScript framework built from scratch to demonstrate how modern frameworks work internally. Features Virtual DOM, component-based architecture, and built-in state management - all implemented without any dependencies.

Note: This is a personal learning project created to understand the internals of frameworks like React, Redux, and React Router.

✨ What's Implemented

• 🎨 JSX-like Syntax - Write intuitive, declarative components with familiar JSX-like syntax
• ⚡ Virtual DOM - Efficient rendering and updating with a custom Virtual DOM implementation
• 🧩 Component-Based - Build modular, reusable UI components with isolated logic
• 🗄️ State Management - Redux-like global state management built right in
• 🛣️ Client-Side Routing - Dynamic URL routing with automatic view updates
• 📦 Zero Dependencies - Lightweight and self-contained
• 🛠️ CLI Tool - Quick project scaffolding with the mini CLI

🔧 Getting Started

Run the Example Todo App

git clone <your-repo-url>
cd mini-framework
npm start

Then visit http://localhost:3000 to see the todo app in action.

🎯 Quick Start

Creating Your First Component

const Counter = () => {
    const component = `
        <div className="counter-app">
            <h1>Counter: <span id="counter-value">{counterValue}</span></h1>
            <button onClick=incrementCounter>Increment</button>
        </div>
    `;

    const context = {
        Counter: () => component,
        counterValue: 0,
        incrementCounter: () => {
            store.dispatch({ type: "INCREMENT" });
        }
    };

    return context;
};

Setting Up State Management

const initialState = { counterValue: 0 };

const reducer = (state, action) => {
    switch(action.type) {
        case "INCREMENT":
            return { counterValue: state.counterValue + 1 };
        default:
            return state;
    }
};

const store = new Store({ reducer, state: initialState });

Configuring Routes

const routes = [
    { path: '/', component: Home },
    { path: '/counter', component: Counter },
    { path: '/about', component: About }
];

const router = new Router(routes);

🎓 Learning Objectives

This project demonstrates:

• Virtual DOM Implementation - How to build a Virtual DOM from scratch
• JSX-like Parsing - Compiling template strings to Virtual DOM nodes
• State Management - Building a Redux-like store with reducers and actions
• Event System - Handling DOM events through the Virtual DOM
• Routing - Client-side routing without external libraries
• Diffing Algorithm - Efficiently updating the DOM with minimal changes

💡 How It Works

Components

Components in Domino are functions that return a context object containing:

• The component's HTML structure (JSX-like syntax)
• Initial state values
• Event handlers
• The component render function

Virtual DOM

Domino uses a Virtual DOM to:

1. Represent UI as lightweight JavaScript objects
2. Calculate minimal changes needed (diffing)
3. Efficiently update only what changed in the real DOM

State Management

The built-in store provides:

• Centralized state - Single source of truth for application state
• Actions - Describe what happened
• Reducers - Specify how state changes
• Automatic re-rendering - Components update when relevant state changes

Routing

The router handles:

• URL-to-component mapping
• Dynamic route parameters
• Browser history integration
• Automatic view updates on navigation

📚 Example: Todo Application

A fully-featured todo app is included in the example/ directory demonstrating all framework capabilities.

npm start

Then visit http://localhost:3000 to see it in action.

Features demonstrated:

• Component composition
• State management with actions and reducers
• Event handling
• Route-based navigation (/, /active, /completed)
• Conditional rendering
• List rendering

📖 Documentation

For detailed documentation, see:

• User Guide - Comprehensive guide to building with Domino
• Examples - Sample applications and components

📁 Project Structure

mini-framework/
├── _bin/
│   └── mini.js              # CLI tool for scaffolding projects
├── _lib/
│   ├── core/
│   │   ├── compiler/        # Custom JSX-like syntax compiler
│   │   ├── router/          # Client-side routing system
│   │   ├── runtime/         # Framework runtime engine
│   │   ├── stateManager/    # Redux-like state management
│   │   └── vdom/            # Virtual DOM implementation
│   └── templates/           # Project templates for CLI
├── docs/
│   └── USE.md               # User guide and documentation
├── example/                 # Todo app demo
│   ├── components/          # Reusable UI components
│   ├── pages/               # Route-based page components
│   ├── app.js               # Application entry point
│   ├── reducer.js           # State reducer
│   └── index.html
├── server.js                # Development server
└── package.json

🎯 About This Project

This framework was created as a learning exercise to deeply understand how modern JavaScript frameworks work under the hood. By building each piece from scratch - the Virtual DOM, state management, routing, and component system - it provides hands-on insight into the inner workings of tools like React, Redux, and React Router.

🙏 Acknowledgments

• Inspired by React, Redux, and React Router
• Built to learn and understand framework internals

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

⭐ Star this repository if you found it helpful! ⭐

Made with ❤️ from 🇸🇳