Kiến trúc ServerFree

• Serverless không thực sự có nghĩa là không có máy chủ, mà chỉ có nghĩa là sử dụng máy chủ của người khác
• Kiến trúc ServerFree đề xuất một khái niệm cho phép chạy mã mà không cần máy chủ backend, container hay máy ảo
• Trong kiến trúc này, mã được chạy ngay trong trình duyệt và chỉ cần một máy chủ để cung cấp các tệp tĩnh
• Trình diễn cách đóng gói để có thể chạy một ứng dụng web trong trình duyệt
• Mã frontend được build như bình thường, backend được đóng gói để chạy trong web worker, và cơ sở dữ liệu sử dụng SQLite được biên dịch sang WebAssembly

Ý tưởng

• Quyết định tạo một dự án demo thông qua content marketing, và lấy cảm hứng từ Hacker News để xây dựng một trình theo dõi đơn ứng tuyển công việc nổi bật về khía cạnh quyền riêng tư
• Dự án này phát triển thành quá trình xây dựng một kiến trúc mới trong khi giải quyết các vấn đề như web worker, sai khác tài liệu và tài liệu bị thiếu.

Lần thử đầu với kiến trúc cổ điển (phần dễ)

• Xây dựng ứng dụng bằng cách thay đổi schema cơ sở dữ liệu và thiết lập quyền bằng SubZero CLI.
• Cung cấp các tính năng CRUD và lọc, nhưng tiếp tục tùy biến UI theo hướng gần với một sản phẩm hơn là chỉ là demo.
• Chuyển thanh bên lên phía trên để giảm không gian bị lãng phí ở bên trái.
• Thêm các component Show, Create, Edit, List vào trang "Opportunities".
• Triển khai luồng lọc phức tạp mà không cần đụng đến mã backend.
• Cải thiện dashboard để hiển thị dữ liệu liên quan như "cơ hội đang mở", "tiến độ trung bình / đơn ứng tuyển", "số ngày trung bình sau khi ứng tuyển".
• Build Docker image để triển khai production, seed cơ sở dữ liệu và chạy container.
• Giữ tệp cơ sở dữ liệu SQLite bên ngoài container để bảo toàn dữ liệu lâu dài.
• Dùng Turso DB để giải quyết vấn đề lưu trữ bền vững và sao lưu cho cơ sở dữ liệu SQLite.

Chuyển sang kiến trúc ServerFree (phần thú vị)

• Sử dụng SQLite được biên dịch sang WebAssembly làm cơ sở dữ liệu.
• Sử dụng OPFS (Origin-Private FileSystem) để lưu trữ dữ liệu.
• Chạy mã backend trong web worker để tránh chặn luồng UI.
• Thay Express bằng itty-router để đảm bảo tương thích với trình duyệt.
• Dùng service worker để chặn và xử lý các yêu cầu giữa UI và backend.
• Triển khai giao tiếp ổn định giữa service worker và web worker thông qua luồng chính.
• Loại bỏ mã liên quan đến xác thực khỏi luồng chính (UI).
• Dữ liệu được lưu trên máy tính của người dùng và không được gửi lên máy chủ.

Kết luận

• Kiến trúc này đặc biệt hữu ích khi dữ liệu khách hàng độc lập và không cần chia sẻ giữa các người dùng.
• Không có máy chủ backend nên giảm chi phí hosting, tăng cường quyền riêng tư dữ liệu và cải thiện bảo mật.
• Có thể dùng các công cụ như Electric để đồng bộ một phần cơ sở dữ liệu tới client và xử lý một phần request/query ngay trong trình duyệt