[Open Source] #127 - Mergeable: Hệ thống quản trị Pull Request thông minh với kiến trúc Local-first, React Router 7 và Cloudflare Workers

Việc quản lý hàng chục Pull Request (PR) cùng lúc trên GitHub thường dẫn đến tình trạng xao nhãng và bỏ lỡ các phản hồi quan trọng. Mergeable được thiết kế để giải quyết bài toán "PR Fatigue" (mệt mỏi vì PR) bằng cách cung cấp một Dashboard tập trung, thông minh, giúp lập trình viên biết chính xác PR nào đang cần sự chú ý của mình.

Dưới góc độ kỹ thuật, Mergeable là một minh chứng xuất sắc cho việc xây dựng ứng dụng Local-first (ưu tiên lưu trữ cục bộ), kết hợp giữa sức mạnh xử lý của Cloudflare Workers và khả năng tối ưu hóa của Monorepo.

Github: https://github.com/mergeable/mergeable

🛠️ 1. Nền tảng công nghệ: Monorepo hiện đại và Edge Computing

Mergeable sử dụng một ngăn xếp công nghệ cực kỳ tân tiến, tập trung vào tốc độ và khả năng bảo trì:

• Quản lý hạ tầng (PnPM & Turborepo): Sử dụng Monorepo giúp chia sẻ code giữa Web, Docs và Backend một cách liền mạch, tối ưu hóa thời gian build thông qua cơ chế caching của Turborepo.
• Frontend (React 18 & React Router 7): Dự án vừa cập nhật lên React Router 7 (Framework mode), tận dụng khả năng routing mạnh mẽ và tối ưu hóa việc tải dữ liệu. Giao diện được xây dựng bằng BlueprintJS, mang lại cảm giác chuyên nghiệp của một công cụ quản trị.
• Local Database (Dexie.js & IndexedDB): Thay vì lưu trữ mọi thứ trên Cloud, Mergeable sử dụng IndexedDB để lưu trữ cấu hình và cache PR ngay tại trình duyệt, giúp ứng dụng hoạt động cực nhanh và mượt mà.
• Edge Backend (Cloudflare Workers & Hono): Sử dụng Cloudflare Workers giúp backend có độ trễ cực thấp (Edge computing), kết hợp với Hono framework siêu nhẹ để xử lý các luồng OAuth và Telemetry.

🏗️ 2. Trụ cột kiến trúc: Quyền riêng tư tuyệt đối và Thuật toán "Attention"

Kiến trúc của Mergeable xoay quanh việc bảo vệ dữ liệu nhạy cảm của lập trình viên:

• Kiến trúc Local-first: Mergeable đi theo triết lý "Dữ liệu của bạn thuộc về bạn". Các GitHub Personal Access Tokens (PAT) được lưu trữ cục bộ trong trình duyệt. Server của Mergeable không bao giờ tiếp cận được các token này trừ khi người dùng chủ động sử dụng luồng OAuth để quản lý tập trung.
• Attention Set Logic: Đây là "bộ não" của ứng dụng. Thay vì chỉ hiển thị danh sách PR, Mergeable sử dụng thuật toán trong lib/github/attention.ts để phân tích trạng thái CI, các cuộc thảo luận (discussions) và trạng thái review nhằm đánh dấu các PR "đến lượt bạn" (Your turn).
• GraphQL Optimization: Thay vì gọi hàng loạt REST API gây chậm trễ, Mergeable sử dụng GitHub GraphQL API để lấy toàn bộ thông tin chi tiết (Reviewers, Labels, Status Checks) trong duy nhất một truy vấn, tối ưu hóa băng thông và giới hạn rate-limit của GitHub.

🔄 3. Workflow: Luồng xử lý dữ liệu từ GitHub đến Dashboard (Sequence Diagram)

Sơ đồ mô tả cách ứng dụng lấy dữ liệu một cách bảo mật và xử lý thông minh:

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

1. Custom Search Query Parser: Dự án tự xây dựng một trình phân tích cú pháp (Parser) cho các truy vấn tìm kiếm phức tạp của GitHub, hỗ trợ các toán tử logic, loại trừ và gộp nhiều query giúp người dùng tạo ra các "Section" dữ liệu tùy biến cao.
2. Multi-Instance Orchestration: Hỗ trợ kết nối song song nhiều tài khoản GitHub cá nhân và GitHub Enterprise. Hệ thống tự động điều phối các truy vấn đến các điểm cuối (endpoints) khác nhau và hợp nhất dữ liệu trên một giao diện duy nhất.
3. Testing với PollyJS: Một kỹ thuật đỉnh cao trong phát triển phần mềm là sử dụng PollyJS để ghi lại (record) các HTTP request thực tế từ GitHub và phát lại (replay) trong môi trường kiểm thử, giúp Unit Test chạy nhanh như điện mà không phụ thuộc vào mạng.
4. Dynamic Docker Environment: Sử dụng Vite Plugin tùy chỉnh để tiêm (inject) các biến môi trường vào runtime của container Nginx. Điều này cho phép thay đổi cấu hình ứng dụng (như Client ID, Base URL) mà không cần phải build lại toàn bộ mã nguồn.

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

✅ Kết luận: Tại sao Mergeable là bài học giá trị cho lập trình viên?

Mergeable không chỉ là một công cụ giúp tăng năng suất; nó là một bài học về việc thiết kế cho lập trình viên. Dự án chứng minh rằng bạn có thể xây dựng một công cụ mạnh mẽ mà vẫn tôn trọng quyền riêng tư của người dùng thông qua kiến trúc Local-first.

Đối với các kỹ sư, nghiên cứu Mergeable giúp bạn hiểu sâu về:

• Cách vận hành Monorepo quy mô lớn với Turborepo.
• Kỹ thuật tối ưu hóa GraphQL và xử lý dữ liệu cục bộ (IndexedDB).
• Tư duy xây dựng Developer Tools hiện đại, chú trọng vào trải nghiệm bàn phím (Hotkeys) và hiệu suất.