Mador.js – Thư viện 855 byte giúp DOM phản ứng dữ liệu mà không cần framework

Mador.js – "Liều thuốc" phản ứng nhẹ nhàng cho DOM thuần

Bạn có từng cảm thấy bực bội khi một trang web tĩnh chỉ cần tăng giảm số lượng, cập nhật nút bấm, vậy mà lại phải kéo cả một framework nặng nề về? Mador.js xuất hiện như một giải pháp thanh thoát: gói toàn bộ khả năng tạo state phản ứng và gắn kết DOM trong vỏn vẹn 855 byte code nén.

Bản chất của vấn đề: Nhiều trang web hiện tại không cần đến virtual DOM, component tree hay vòng đời phức tạp. Chúng chỉ cần đọc dữ liệu mới và cập nhật vài con số trên giao diện. Mador.js sinh ra để lấp chính khoảng trống đó – nó nói với bạn: "Hãy cứ dùng HTML và JavaScript thuần như trước giờ, chỉ cần thêm một chút 'phản ứng' là đủ."

Khác biệt then chốt: Không có component, không có template engine. Mador làm việc trực tiếp trên DOM bạn đã có sẵn. Quá trình gắn kết chỉ là một tuple ba chân đơn giản nhưng thông minh.

Cách hoạt động và điểm đột phá

Ba chân vững chắc – Binding tuple

Điểm cốt lõi của Mador nằm ở hàm r(selector, update, read). Bạn chọn phần tử cần cập nhật, đưa ra cách render, và chỉ định "đọc" phần nào của state.

r(
  ".counter",
  (el, count) => {
    el.textContent = `Count: ${count}`;
  },
  (state) => state.count,
);

Điều thú vị là Mador tự động theo dõi dependencies. Nó ghi nhận các thuộc tính state mà hàm read của bạn chạm vào, giúp tối ưu việc chỉ chạy lại đúng binding cần thiết khi dữ liệu thay đổi. Quá trình ghi state cũng được xử lý thông minh: nếu bạn thay đổi nhiều thuộc tính trong cùng một lần w(), mọi binding phụ thuộc sẽ được gom lại và xử lý một lượt (batch), tránh render thừa.

Vòng đời DOM tự nhiên

Một trong những lời hứa mạnh mẽ nhất của Mador là nó gắn liền với vòng đời thực của DOM. Khi phần tử bạn đã gắn kết bị gỡ khỏi trang, Mador cũng lặng lẽ gỡ luôn binding tương ứng. Không cần phải quản lý unmount, không lo rò rỉ bộ nhớ hay còn gọi là "component lifecycle" như các framework lớn. Điều này giúp code trở nên cực kỳ trực quan với lập trình viên.

Phân phối và sử dụng

• Không cần build step, không có runtime toàn cầu.
• Phân phối dưới dạng ES module chuẩn.
• Kết nối trực tiếp từ CDN hoặc cài qua npm.

import mador from "https://cdn.jsdelivr.net/npm/@marsbos/mador@latest/dist/mador.js";

Vậy khi nào bạn nên cân nhắc dùng Mador?

• Khi bạn có sẵn file HTML tĩnh và một ít JavaScript được sinh ra từ backend, không muốn "đập đi xây lại" với React, Vue hay Svelte.
• Khi bạn làm project nhỏ, dashboard đơn giản, hoặc các landing page chỉ có vài thành phần tương tác.
• Khi bạn là người thích sự tối giản trong code và muốn một công cụ "vừa đủ" để giải quyết vấn đề thay vì phải mang cả một hệ sinh thái lớn.

Mador.js không hướng đến việc thay thế framework, mà nó sinh ra để lấp khoảng trống giữa trang tĩnh và ứng dụng phức tạp – nơi chỉ cần một luồng dữ liệu phản hồi nhẹ nhàng là bản thân trang web đã trở nên sống động.

Nếu bạn là lập trình viên đang muốn "giảm tải" cho các module nhỏ hoặc đang cảm thấy framework quá khổ so với nhu cầu, Mador.js là một dự án mã nguồn mở đáng để thử nghiệm. Dự án phân phối theo giấy phép MIT – bạn hoàn toàn thảnh thơi đưa nó vào dự án thương mại.