MINI FRAMEWORK 💳💻

Overview

This project is a custom JavaScript framework that allows developers to build web applications by simplifying DOM manipulation, state management, routing, and event handling. The framework was created without using high-level libraries or frameworks like React, Angular, or Vue. This README provides an overview of the framework's features, usage instructions, and code examples.

Features

• DOM Abstraction: Easily create and manipulate DOM elements using a JSON-like structure.
• State Management: Manage your application's state in a simple and intuitive way.
• Routing System: Synchronize the application's state with the URL for smooth navigation.
• Event Handling: Manage user interactions with custom event handling mechanisms.

Getting Started

Installation

Clone the repository to your local machine:

git clone https://learn.zone01dakar.sn/git/cnzale/mini-framework.git
cd mini-framework

Open the project in your preferred code editor.

Folder Structure

• /src : Contains the core files of the framework.
• /todo-app : The TodoMVC example implemented using this framework.
• README.md : This documentation file.
• server.js : Node.js server configuration file for serving static files.

Documentation

Creating an Element

To create an element using the framework, you can use the Component class. Here is an example of creating a simple div element with text:

import { Component } from "./src/core/component.js";

const myComponent = new Component({
  tagName: "div",
  children: ["Hello, World!"],
});

myComponent.render();

Adding Attributes to an Element

You can add attributes to an element like this:

const myComponent = new Component({
  tagName: "div",
  attributes: { id: "myDiv", class: "container" },
  children: ["Hello, World!"],
});

myComponent.render();

Nesting Elements

Nesting elements is as simple as passing an array of components as children:

const childComponent = new Component({
  tagName: "p",
  children: ["This is a paragraph."],
});

const parentComponent = new Component({
  tagName: "div",
  children: [
    childComponent,
    new Component({ tagName: "span", children: ["This is a span."] }),
  ],
});

parentComponent.render();

Creating Events

To create an event, you can define an event handler in the component's configuration:

const buttonComponent = new Component({
  tagName: "button",
  children: ["Click me"],
  events: {
    click: () => alert("Button clicked!"),
  },
});

buttonComponent.render();

another way:

const buttonComponent = new Component({
  tagName: "button",
  children: ["Click me"],
});

buttonComponent.on("click", ())=>{
  alert("Button clicked!")
}

buttonComponent.render();

State Management

The framework provides a simple way to manage state. Here is an example of using state:

import { Component } from "../../../src/core/component.js";
import { getState, setState } from "../../../src/core/stateManagement.js";

// Initialize the "counter" state to 0
setState("counter", 0);

// Define the data for the example component
export const exempleData = {
  tagName: "div",
  attributes: {},
  children: [],
};

// Create the example component
export const exempleComponent = new Component(exempleData);

// Create an "Increment" button
const Button = new Component({
  tagName: "button",
  attributes: {},
  children: ["Increment"],
});

// Add the button to the example component
exempleData.children.push(Button);

// Create a component to display the counter
export const counter = new Component({
  tagName: "p",
  children: [getState("counter").toString()],
});

// Subscribe to the "counter" state so the component updates when the state changes
counter.subscribeToState("counter");

// Add the counter component to the example component
exempleData.children.push(counter);

// Function to update the display of the counter
function updateIncrementButton() {
  const counterValue = getState("counter").toString();
  counter.children = [counterValue];
  counter.updateChildren();
}

// Define the update method for the counter component
counter.update = updateIncrementButton;

// Function to handle the click on the "Increment" button
function handleClick() {
  setState("counter", getState("counter") + 1);
}

// Add an event listener for the click on the button
Button.on("click", handleClick);
// Render the example component
exempleComponent.render();

Routing System

To set up routing, define routes and navigate between them like this:

import { Router } from "./src/core/router.js";

const routes = [
  { path: "/", component: homeComponent },
  { path: "/about", component: aboutComponent },
];

const router = new Router(routes);

How It Works

The framework uses a virtual DOM approach. Components are defined as JavaScript objects, which are then rendered into real DOM elements. State management is done using a simple reactive system, and routing synchronizes the state with the URL, allowing for a smooth single-page application experience.

TodoMVC Example

The TodoMVC project is a functional copy of the classic TodoMVC examples. It includes all essential features:

• Adding, editing, and removing to-do items
• Filtering by active, completed, and all items
• Updating the URL based on the selected filter
• Dynamically managing the remaining to-do count

You can run the TodoMVC example by running in the terminal:

node server.js

Structure des fichiers 🖥️

.MINI-FRAMEWORK
├── 📁 src
│   └── 📁 core
│       ├── 📄 components.js         
│       ├── 📄 routingSystem.js      
│       └── 📄 stateManagement.js      
│         
│     
│         
├──📁 todo-app
│   └──📁 public
│       ├──📁css
│       ├──📁js
│       ├──index.html 
│       └──📁 src
│           ├── 📄 appContainer.js
│           ├── 📄 appSection.js
│           ├── 📄 components.js
│           ├── 📄 deleteltemButton.js
│           ├── 📄 Footer.js
│           ├── 📄 header.js
│           ├── 📄 InfoComponent.js
│           ├── 📄 input.js
│           ├── 📄 link.js
│           ├── 📄 sectionMain.js
│           └── 📄 title.js
│           
│
├── 📄 README.md
└── 📄 server.js

Contributeurs 👥

• masamba
• cnzale
• muciss
• lodiouf
• annndiaye

Conclusion

This project is a great example of how a custom JavaScript framework can be created and used to build web applications. It provides a set of simple yet powerful tools for managing the DOM, state, and routing. The TodoMVC example demonstrates the framework's capabilities in a real-world scenario.

Social

• Learning: This project provides an in-depth look at fundamental web development concepts, including DOM manipulation, state management, and routing.
• Recommendation: The framework and TodoMVC project are solid examples for others to follow and learn from.