Thử nghiệm Trillion Characters: Cộng tác trực tiếp với kiến trúc "Logic ở Backend" táo bạo của Datastar

Trillion Characters là một thử nghiệm thú vị về khả năng cộng tác thời gian thực, nơi người dùng có thể nhấp vào bất kỳ đâu trên khung vẽ và bắt đầu gõ phím cùng lúc với nhiều người khác. Điểm đặc biệt của dự án này không nằm ở tính năng xã hội, mà nằm ở công nghệ nền tảng: nó được xây dựng bằng Datastar – một khung công tác JavaScript (framework) nhẹ chỉ 11kB với triết lý kiến trúc hoàn toàn khác biệt so với các chuẩn mực hiện nay.

Kiến trúc "táo bạo": Logic ở Backend, Client chỉ để hiển thị

Trong khi các framework phổ biến như React, Vue hay Svelte dựa vào việc quản lý trạng thái (state) và logic phức tạp ở phía trình duyệt (client-side), Datastar lại đi theo hướng ngược lại. Nó loại bỏ hoàn toàn logic và trạng thái trên client, chuyển mọi xử lý tương tác sang phía máy chủ (backend).

Khi người dùng tương tác, máy chủ sẽ gửi các cập nhật dưới dạng HTML đã được render về client thông qua một luồng Server-Sent Events (SSE) liên tục. Tác giả của dự án ví von cơ chế này giống như việc "streaming một bộ phim", nhưng thay vì là video, nội dung được truyền đi là mã HTML và các cập nhật giao diện. Theo cách này, trình duyệt của người dùng về cơ bản chỉ đóng vai trò là một cổng hiển thị (viewport) để render HTML thô, nhưng vẫn đảm bảo tính tương tác hoàn chỉnh.

Tối ưu hiệu suất với SSE và nén dữ liệu

Việc gửi toàn bộ cập nhật trang web qua mạng có thể gây lo ngại về băng thông, nhưng Datastar giải quyết vấn đề này bằng cách tận dụng tính năng nén của SSE. Thay vì nén từng yêu cầu riêng lẻ, luồng SSE cho phép nén toàn bộ phiên làm việc.

Sử dụng thuật toán nén Brotli tích hợp sẵn của trình duyệt, hệ thống chỉ truyền đi các byte dữ liệu thực sự thay đổi so với nội dung cũ. Nhờ đó, tỷ lệ nén có thể đạt từ 50 lần đến tới 4000 lần, vượt xa khả năng của các phản hồi gzip truyền thống. Ngoài ra, một thuật toán DOM-morphing tinh vi也被 được sử dụng để đảm bảo các bản cập nhật diễn ra mượt mà và không gây giật lag.

Mô hình CQRS và lưu trữ dữ liệu

Dưới hood, Trillion Characters không sử dụng kiến trúc web server truyền thống (Request-Endpoint-Response). Thay vào đó, nó áp dụng mẫu kiến trúc CQRS (Command Query Responsibility Segregation), tách biệt hoàn toàn giữa việc đọc và ghi. Các lệnh từ người dùng (ví dụ: gõ phím) được xếp hàng (queue) và máy chủ sẽ xử lý ghi chúng ở một tốc độ cố định.

Trạng thái trang được render từ các mẫu HTML dựa trên trạng thái hiện tại của cơ sở dữ liệu: f(db state). Để tối ưu hóa việc hiển thị, hệ thống chỉ gửi các khối (chunk) ký tự nằm trong vùng nhìn thấy của người dùng cụ thể đó.

Về lưu trữ, các ký tự được chia thành các khối 45x45 và lưu trong LMDB – một cơ sở dữ liệu key-value ánh xạ bộ nhớ cực nhanh. Mỗi khối đều được nén bằng thuật toán LZ4 để loại bỏ khoảng trắng và các ký tự lặp lại. Tọa độ khối được dùng làm khóa và được lưu theo thứ tự Z-order (Morton codes), giúp chuyển đổi tính lân cận từ không gian 2D sang không gian 1D để tối ưu hóa việc truy xuất trong cây B-tree. Mọi thao tác đọc và ghi đều tuân thủ chuẩn ACID đầy đủ, đảm bảo từng ký tự bạn nhìn thấy đều đã được lưu an toàn lên đĩa cứng một cách nguyên tử.

Chạy trên phần cứng khiêm tốn

Điều ấn tượng nhất là toàn bộ ứng dụng phức tạp này đang chạy trên một chiếc VPS tại Đức với mức giá cực rẻ: chỉ 5,52 Euro/tháng (khoảng 150.000 VNĐ). Điều này chứng minh rằng với kiến trúc phù hợp, các ứng dụng realtime không nhất thiết cần phải tốn kém tài nguyên máy chủ khổng lồ.

Dự án do Elias de Jong phát triển và mã nguồn đã được công khai trên GitHub, mở ra cơ hội cho các lập trình viên tìm hiểu về một hướng đi mới trong thiết kế ứng dụng web hiện đại.

Nguồn: characters.fastserial.com