[Open Source] #33 - Kando: Đỉnh cao UI/UX cho Desktop và nghệ thuật kết hợp Electron với Native C++

Trong thế giới ứng dụng Desktop, việc tối ưu hóa quy trình làm việc (workflow) thông qua phím tắt là điều quen thuộc. Tuy nhiên, Kando đã đưa trải nghiệm này lên một tầm cao mới bằng cách hồi sinh khái niệm Marking Menu (menu dạng vòng tròn/miếng bánh) với một kiến trúc kỹ thuật cực kỳ tinh xảo.

Dưới góc độ kỹ sư, Kando không chỉ là một ứng dụng Electron thông thường; nó là một ví dụ điển hình về việc giải bài toán hiệu suất UI và can thiệp sâu vào hệ điều hành (Native Interop) để tạo ra một công cụ năng suất thực thụ.

Github: https://github.com/kando-menu/kando

🛠️ 1. Nền tảng công nghệ: Hybrid Web & Native Power

Kando sử dụng một ngăn xếp công nghệ linh hoạt, tận dụng thế mạnh của từng ngôn ngữ cho các mục đích cụ thể:

• Electron Framework: Đóng vai trò là "xương sống" giúp ứng dụng chạy đa nền tảng (Windows, macOS, Linux).
• TypeScript (80%): Ngôn ngữ chủ đạo để quản lý logic nghiệp vụ phức tạp và đảm bảo an toàn kiểu dữ liệu.
• Native Modules (C++/Objective-C++): Đây là "vũ khí bí mật" của Kando. Tác giả sử dụng node-addon-api (N-API) để viết các Add-ons can thiệp trực tiếp vào API của hệ điều hành. Điều này cho phép Kando bắt được các phím tắt toàn cục (Global Hotkeys) và quản lý cửa sổ ngay cả trên các môi trường phức tạp như Wayland (Linux) hay Win32 (Windows).
• UI Rendering Chiến lược:
  • React: Được dùng cho cửa sổ Cài đặt (Settings) để quản lý các trạng thái cấu hình phức tạp.
  • Vanilla JS/TS & SCSS: Được dùng cho cửa sổ Menu chính. Tại sao? Để đạt được độ trễ thấp nhất và các hiệu ứng chuyển động (animation) mượt mà 60fps mà không bị ảnh hưởng bởi quá trình so sánh Virtual DOM của các framework.

🏗️ 2. Trụ cột kiến trúc: OS Abstraction Layer & Registry Pattern

Kiến trúc của Kando được thiết kế cực kỳ sạch sẽ và có tính mở rộng cao:

OS Abstraction Layer (Lớp trừu tượng hóa hệ điều hành)

Trong mã nguồn src/main/backends, Kando định nghĩa một interface chung cho mọi hệ điều hành. Dù người dùng đang chạy GNOME, KDE, Windows hay macOS, Main Process chỉ việc gọi các hàm trừu tượng. Việc xử lý chi tiết (ví dụ: lấy tiêu đề cửa sổ đang active hay giả lập phím bấm) sẽ do các Backend Native tương ứng đảm nhiệm.

Registry Pattern & Extensibility

Các loại mục trong menu (chạy lệnh Shell, mở URI, giả lập tổ hợp phím...) được quản lý thông qua các Registry. Thiết kế này cho phép cộng đồng dễ dàng đóng góp thêm các loại hành động mới mà không cần chỉnh sửa sâu vào lõi của ứng dụng.

🔄 3. Các kỹ thuật "Pro-level" trong mã nguồn

1. Thuật toán Marking Menu & Gestures

Kando không chỉ đợi người dùng click. Nó triển khai các thuật toán hình học để tính toán góc quay và khoảng cách của con trỏ chuột. Điều này cho phép người dùng thực hiện các "cử chỉ" (gestures) — lướt chuột theo một hướng nhất định để chọn mục mà thậm chí không cần nhìn vào màn hình (Muscle Memory).

2. Turbo Mode & Modifier Key Tracking

Kando có một kỹ thuật gọi là Turbo Mode. Bằng cách theo dõi trạng thái của các phím bổ trợ (Ctrl/Shift/Alt), ứng dụng cho phép người dùng lướt qua các menu con và kích hoạt hành động ngay khi thả phím, giảm thiểu tối đa số lần nhấp chuột cần thiết.

3. Native Interop (N-API)

Việc biên dịch mã nguồn C++ sang Node.js Addons thông qua CMake.js giúp Kando thực hiện được các tác vụ mà một ứng dụng Web thuần túy không bao giờ làm được:

• Đăng ký phím tắt hệ thống ở mức thấp (Low-level).
• Giả lập sự kiện bàn phím và chuột để tương tác với các ứng dụng khác.
• Tương tác trực tiếp với giao thức Wayland hoặc Windows API để xác định vị trí cửa sổ.

📊 4. Workflow: Từ Phím tắt đến Hành động hệ thống

Dưới đây là sơ đồ trình tự mô tả cách Kando xử lý một yêu cầu kích hoạt menu:

⚖️ 5. So sánh chiến lược

✅ Kết luận: Tại sao Kando là hình mẫu?

Kando là minh chứng cho việc Electron không hề chậm chạp nếu bạn biết cách tối ưu hóa. Bằng cách tách biệt phần UI nặng nề ra khỏi menu chính và sử dụng Native C++ cho các tác vụ quan trọng, tác giả đã tạo ra một công cụ có độ phản hồi cực cao. Đối với các kỹ sư phần mềm, việc nghiên cứu cách Kando tổ chức Native Backends và xử lý IPC là những bài học quý giá về kiến trúc ứng dụng Desktop hiện đại.

Hy vọng bản phân tích chuyên sâu này mang lại cảm hứng cho bạn trong việc xây dựng các ứng dụng Desktop thế hệ mới. Đừng quên Upvote và Follow mình để đón xem những dự án kỹ thuật thú vị tiếp theo!