Xây dựng Screen Marker: Tại sao mình chọn Native thay vì Electron?

Chào các bạn, lại là mình từ CatalystPack Studio đây.

Trong bài viết trước, mình đã chia sẻ câu chuyện vì sao Spotmark ra đời. Hôm nay, mình muốn đi sâu hơn một chút vào một bài toán kỹ thuật mà bất kỳ ai làm Desktop App hiện nay đều phải đối mặt: Nên chọn Native hay Electron?

Khi bắt đầu dự án Spotmark (một công cụ giúp bạn vẽ, highlight và spotlight trực tiếp lên màn hình Desktop), quyết định chọn công nghệ là một trong những quyết định khó khăn nhất. Mình không muốn viết một bài “dìm hàng” Electron, bởi vì bản thân nó là một công nghệ tuyệt vời. Thay vào đó, mình muốn chia sẻ góc nhìn thực tế về điểm mạnh, điểm yếu của cả hai, và tại sao Native lại là mảnh ghép phù hợp nhất cho một công cụ như Spotmark.

Sự quyến rũ của Electron

Không phải ngẫu nhiên mà Electron lại thống trị thế giới Desktop App trong thập kỷ qua. Những phần mềm chúng ta mở hàng ngày như VS Code, Slack, Figma hay Discord đều được xây dựng từ nó.

Khi bắt tay vào Proof of Concept (PoC) đầu tiên cho Spotmark, mình cũng đã nghĩ ngay đến Electron vì những ưu điểm không thể chối cãi:

1. Write Once, Run Everywhere: Cực kỳ hấp dẫn đối với một team nhỏ (hoặc Indie Hacker). Bạn code giao diện bằng HTML/CSS/JS một lần và có thể đóng gói cho cả Windows, macOS và Linux.
2. Tốc độ phát triển (Development Speed): Hệ sinh thái NPM khổng lồ cùng với các framework UI (React/Vue) giúp bạn dựng lên một giao diện bóng bẩy chỉ trong vài ngày thay vì vài tuần.
3. Hoàn hảo cho Standard Apps: Nếu bạn làm một ứng dụng chat, một phần mềm quản lý công việc hay một công cụ ghi chú, Electron mang lại trải nghiệm rất tốt với chi phí phát triển rẻ nhất.

Với một công cụ như Spotmark, phần giao diện cài đặt (Settings) hay Quản lý License dùng Electron làm thì “nhanh như một cơn gió”. Nhưng vấn đề cốt lõi lại nằm ở tính năng quan trọng nhất: Vẽ lên màn hình (Screen Overlay).

Bài toán đặc thù của một Screen Marker

Spotmark không phải là một cửa sổ ứng dụng bình thường. Để bạn có thể khoanh tròn một đoạn văn bản trên trình duyệt Chrome, hay vẽ mũi tên chỉ vào một dòng code trong IDE, Spotmark phải tạo ra một cửa sổ vô hình (transparent window) có kích thước bằng đúng màn hình máy tính của bạn và nằm nổi lên trên cùng (always on top).

Đây chính là lúc những điểm yếu của Electron trong một tác vụ đặc thù (Niche Task) bị lộ diện.

1. Quản lý bộ nhớ (Memory Footprint)

Để tạo ra lớp overlay trong suốt đó bằng Electron, hệ điều hành phải duy trì một tiến trình Chromium khổng lồ chạy ngầm. Khi bạn đang thuyết trình, máy tính của bạn vốn dĩ đã phải gánh một file Excel nặng, một IDE đang build code, cộng thêm phần mềm Zoom/Teams đang stream video. Một công cụ “phòng hờ” như Spotmark (phần lớn thời gian nằm im ở System Tray và chỉ gọi ra trong 30 giây) nếu ngốn thêm 200MB - 300MB RAM nữa sẽ khiến hệ thống bắt đầu có độ trễ.

2. Độ trễ (Latency) khi thao tác vẽ

Khi bạn cầm bút cảm ứng hoặc dùng chuột để vẽ một nét cong lên màn hình, não bộ của bạn kỳ vọng nét vẽ phải xuất hiện ngay lập tức dưới con trỏ chuột.

Trong môi trường Electron, input từ chuột phải đi qua nhiều lớp: Hệ điều hành -> Vỏ bọc Node.js/Electron -> Engine Chromium -> DOM / Canvas -> Render lại màn hình

Quá trình này tuy diễn ra trong vài phần nghìn giây, nhưng với các thao tác đòi hỏi Real-time như vẽ đồ họa, độ trễ nhỏ này tạo ra cảm giác nét mực bị “kéo lê” đằng sau con chuột. Mọi thứ trở nên sượng hơn một chút so với thực tế.

Lựa chọn gian khó nhưng xứng đáng: Native (C++/Qt)

Sau khi cân nhắc kỹ, team mình quyết định chuyển hướng sang Native (C++/Qt).

Việc phát triển bằng Native đòi hỏi nhiều công sức setup và cấu hình hơn. Bạn đánh đổi sự tiện lợi đa nền tảng có sẵn để lấy hiệu năng tuyệt đối. Việc xử lý các API hệ thống (Win32 trên Windows, Cocoa trên macOS, Wayland/X11 trên Linux) cũng đòi hỏi quá trình test và debug cẩn thận hơn rất nhiều.

Nhưng đổi lại, phần thưởng dành cho trải nghiệm người dùng là cực lớn:

1. Giao tiếp trực tiếp với phần cứng: Luồng đi được rút ngắn tối đa (Hệ điều hành -> API Đồ họa -> Màn hình). Khoảng cách từ thao tác chuột đến nét mực xuất hiện gần như bằng không. Nét vẽ mượt mà tuôn ra ở tốc độ 60FPS+ (mình gọi nó là Liquid Drawing).
2. Zero-footprint: Bằng cách sử dụng C++, Spotmark tiêu tốn cực kỳ ít RAM và CPU. Sự tồn tại của nó hoàn toàn “tàng hình” đối với máy tính của bạn cho đến khi bạn cần gọi nó ra bằng phím tắt.
3. Tương tác sâu với hệ điều hành: Những tính năng như bắt phím tắt toàn cầu (Global Hotkeys) hay xử lý đa màn hình (Multi-monitor DPI) hoạt động vô cùng trơn tru và chính xác.

Lời kết

Electron là một công nghệ xuất sắc và mình vẫn sẽ dùng nó cho nhiều dự án khác. Nhưng đối với một công cụ đòi hỏi độ phản hồi tức thì và hoạt động ngầm liên tục như Spotmark, Native là con đường duy nhất để đạt được trải nghiệm hoàn hảo.

Sự đánh đổi về thời gian phát triển đang dần đơm hoa kết trái với bản release v0.4.5 Beta cho Windows. Các kỹ sư trong team vẫn đang miệt mài gỡ những “bài toán khó” trên môi trường kiến trúc ARM (macOS) và Wayland (Linux) để sớm ra mắt cộng đồng.

Nếu bạn đang dùng Windows và muốn trải nghiệm một công cụ vẽ màn hình siêu nhẹ, mời bạn dùng thử:

Tải Spotmark v0.4.5 Beta (Dành cho Windows) →

Hẹn gặp lại các bạn ở các bài viết sau, khi mình có dịp chia sẻ về cách team giải quyết bài toán lưu file video mp4 an toàn ngay cả khi máy tính bị sập nguồn nhé!

Build with Native pride. ⚡