Javascript Và Giấc Mơ Kiểm Soát Reactive

Hành trình bắt đầu

Khoảng 5 năm trước, tôi từng chia sẻ về một cách tiếp cận rất “cá nhân” khi xây dựng các component trên web: dựa vào Web Component và các custom element.
Ý tưởng của tôi lúc đó khá đơn giản: định nghĩa một element mới, gắn cho nó chức năng riêng, và tương tác trực tiếp với element đó — không phải render lại toàn bộ DOM.

Nếu bạn từng mở YouTube, bấm vào mục View Source, bạn sẽ thấy cách họ tổ chức những custom element và gắn logic riêng biệt cho từng phần. Đó chính là điều truyền cảm hứng cho tôi lúc bắt đầu.

Tôi xây dựng một “engine” nhỏ, cho phép tương tác với từng element một cách độc lập, giảm thiểu tối đa việc can thiệp lại toàn bộ DOM. Mục tiêu rõ ràng: kiểm soát tối đa, tác động tối thiểu.

Khi chính mình bắt đầu nghi ngờ cách làm

Ban đầu, mọi thứ có vẻ hợp lý. Nhưng khi các dự án bắt đầu lớn hơn, tôi nhận ra một thực tế:

• Can thiệp trực tiếp vào DOM tuy mạnh mẽ nhưng không phải lúc nào cũng tối ưu.
• Khi muốn mở rộng hoặc tái sử dụng, tôi phải lặp lại rất nhiều thao tác thủ công.

Điều này khiến tôi đặt câu hỏi: liệu có cách nào vừa tận dụng được triết lý kiểm soát của mình, vừa hưởng lợi từ những tiện ích của các framework JavaScript hiện tại?

Viết lại với triết lý mới

Tôi bắt đầu thử nghiệm lại từ đầu, kết hợp kiến thức mình có với những gì các thư viện và framework đang làm tốt.
Khi tìm hiểu về các khái niệm như Virtual DOM, tôi nhận ra đó là một cách giải quyết vấn đề, nhưng không phải là thứ tôi thực sự cần. Tôi muốn một cách tiếp cận đơn giản hơn.

Và triết lý mới xuất hiện:

Code ít hơn, làm được nhiều hơn.

Trước đây, quy trình của tôi là:

1. Đánh dấu DOM.
2. Sử dụng JS để tìm và bắt các phần tử.
3. Viết logic tương tác trực tiếp lên chúng.

Cách này giúp tôi kiểm soát 100% hành vi, nhưng lại tốn nhiều công sức khi muốn mở rộng hoặc xây dựng các component nhỏ gọn.

Những giải pháp tôi từng nghiên cứu

Tôi tìm hiểu và so sánh các thư viện có triết lý gần giống với những gì tôi làm:

• Alpine.js – nhẹ, dễ tích hợp, cú pháp gần với HTML.
• Web Component – chuẩn web, không phụ thuộc framework, nhưng cần nhiều boilerplate code.
• HTMX – đơn giản, không cần nhiều JavaScript, nhưng thiên về server-driven UI.
• AngularJS 1.x – reactive sớm, nhưng khá nặng nếu chỉ cần tính năng nhỏ.
• Petite-vue – bản thu gọn của Vue, rất nhẹ nhưng vẫn còn những ràng buộc nhất định.

Những giải pháp này đều có điểm mạnh, nhưng tôi vẫn muốn một thứ nhỏ hơn, gọn hơn, kiểm soát nhiều hơn.

Khám phá Proxy và reactive engine đầu tiên

Một bước ngoặt xảy ra vào năm ngoái, khi tôi phát triển một component bảng dữ liệu cho khách hàng. Trong quá trình tìm cách tối ưu cập nhật dữ liệu, tôi phát hiện ra Proxy trong JavaScript — một công cụ cực kỳ mạnh để tạo reactive data mà không cần virtual DOM phức tạp.

Tôi thử áp dụng Proxy và nhận ra nó chạy rất mượt. Nhưng rồi lại gặp một vấn đề quen thuộc: mỗi lần thêm tính năng mới, tôi phải viết lại từ đầu nhiều phần đã có. Vòng lặp phát triển – sửa – viết lại cứ lặp đi lặp lại.

Từ đó, tôi quyết định xây dựng reactive engine đầu tiên của riêng mình, được thiết kế để phục vụ trực tiếp cho cách tôi tổ chức component.

Vì sao tôi không chọn framework JS phổ biến

Tôi không chọn các framework phổ biến như React, Angular hay Vue (bản đầy đủ) vì:

• Chúng quá nặng nề cho nhu cầu của tôi.
• Khó tận dụng hiệu quả với SSR.
• Buộc tôi viết lại nhiều logic backend (hiện tại tôi dùng Golang).

jQuery vẫn tồn tại đến ngày nay vì nó giải quyết nhanh gọn vấn đề thực tế. Nhưng tôi cần một giải pháp nhẹ hơn, hiện đại hơn, và dễ kiểm soát hơn.

Triết lý phát triển: Micro Component

Tôi hình dung Micro Component giống như Microservice:

• Mỗi component chỉ làm đúng một việc.
• Có thể chạy độc lập, không phụ thuộc vào component khác.
• Dễ dàng hydrate (kích hoạt) ở bất kỳ đâu.

Điều này giúp tôi nhúng các mini-app JavaScript vào ứng dụng di động hoặc website mà không ảnh hưởng đến các phần khác.
Vì SEO đã được tối ưu từ server, tôi chỉ cần tập trung vào nâng cao trải nghiệm người dùng ở client.

Ví dụ: cú pháp micro component

Đây là một ví dụ cho component đếm đơn giản (counter) theo cách tôi triển khai:

Ở đây:

• data-kitmodule-component định danh component.
• data-counter-state khai báo state ban đầu.
• data-counter-model binding dữ liệu hai chiều với input.
• data-counter-event gắn event handler trực tiếp qua attribute.
• data-counter-bind cập nhật DOM khi state thay đổi.

Kết quả là một component nhỏ gọn, không phụ thuộc framework lớn, nhưng vẫn reactive.

Hành trình này cho tôi thấy rằng đôi khi sự đơn giản mới là tối thượng. Reactive không nhất thiết phải đi kèm với virtual DOM nặng nề hay cú pháp phức tạp.
Chỉ cần một engine nhỏ, cú pháp HTML-based dễ đọc, và một chút JavaScript tinh gọn là đủ để tạo nên những trải nghiệm người dùng mượt mà.

Trong phần tiếp theo, tôi sẽ chia sẻ chi tiết kiến trúc của reactive engine này, cách nó parse biểu thức, gắn event, và đồng bộ state với DOM mà không cần eval hay Function constructor — đảm bảo an toàn CSP và tránh XSS.