Phân tích Web Theme Loader: So sánh giữa code thủ công và code do AI tạo ra

Web Theme Loader là một thư viện nhỏ gọn, framework-agnostic được viết bằng TypeScript nhằm cung cấp khả năng load và chuyển đổi giữa nhiều theme (giao diện chủ đề) trong các ứng dụng web hiện đại. Từ đó người dùng có thể dễ dàng chuyển đổi giữa các theme sáng, tối hay nhiều chủ đề khác nhau mà không gây gián đoạn trải nghiệm.

Bài viết này là phần mở đầu cho chuỗi so sánh trực tiếp giữa code thủ công (hand-crafted) của lập trình viên giàu kinh nghiệm và code được tạo ra bởi các AI code generators như Windows Copilot, M365 Copilot, Claude.AI… trên một đề tài không đơn giản.

Yêu cầu của Web Theme Loader

Yêu cầu chức năng

• Hỗ trợ ít nhất hai theme: sáng (light) và tối (dark), cũng có thể nhiều hơn hai theme.
• Hỗ trợ các theme có sẵn phổ biến, kết hợp với các stylesheet màu sắc đặc thù của ứng dụng như colors.css hoặc biến thể colors-dark.css.
• Cho phép chuyển đổi theme động trong quá trình chạy ứng dụng.
• Đảm bảo theme được lưu và áp dụng đồng bộ khi mở ứng dụng trên nhiều tab trình duyệt khác nhau.

Yêu cầu kỹ thuật

• Có thể tái sử dụng nhiều ứng dụng khác nhau, tránh ràng buộc với bất kỳ framework UI nào (nhưng vẫn hỗ trợ tích hợp dễ dàng với Angular).
• API nhỏ gọn, dễ cấu hình, tùy chỉnh.
• Không phụ thuộc vào bất kỳ thiết kế giao diện cụ thể nào.
• Hiệu quả cao, tránh hiện tượng nhấp nháy khi khởi tạo hoặc chuyển theme.
• Phù hợp với các ứng dụng SPA (Single Page Application) và PWA (Progressive Web Apps), hoạt động tốt trong môi trường offline hoặc intranet.
• Cho phép cấu hình sau khi build và triển khai, ví dụ như thay đổi số lượng theme, thứ tự, hoặc chỉnh sửa các stylesheet màu cho ứng dụng.
• Các theme có thể được host nội bộ hoặc thông qua CDN.
• Việc chọn lại theme đang dùng sẽ không tải lại theme đó.
• Module quản lý theme tách biệt hoàn toàn với UI chọn theme.

Giải pháp code thủ công bằng TypeScript

Thư viện ThemeLoader được thiết kế theo tiêu chuẩn trên, với các thành phần chính như:

• init() để load theme mặc định hoặc theme đã chọn lần trước ngay từ giai đoạn khởi động ứng dụng.
• loadTheme(picked: string | null) để chuyển đổi theme khi người dùng chọn.
• Thuộc tính selectedTheme lưu trữ theme đang dùng trong localStorage.

Bằng cách thao tác DOM với thẻ <link> và các stylesheet tĩnh, ThemeLoader đảm bảo chuyển đổi giao diện nhanh chóng, không gây nhấp nháy hoặc tải lại không cần thiết.

Điểm độc đáo là thiết kế tách biệt quản lý theme và phần UI chọn theme, giúp linh hoạt trong việc tích hợp vào các framework như Angular hoặc React mà không thay đổi nhiều.

Các cấu hình theme được lưu trữ ở dạng file JavaScript tách biệt (siteconfig.js), có thể dễ dàng thay đổi sau khi build hoặc triển khai mà không cần rebuild lại toàn bộ ứng dụng.

Ví dụ UI chọn theme trong Angular

Giao diện chuyển theme thường dùng các control đơn giản như MatSelect của Angular Material cho phép người dùng chọn nhanh theme ưa thích. Code phía sau sẽ gọi ThemeLoader.loadTheme() truyền vào theme được chọn.

<mat-form-field>
  <mat-label>Themes</mat-label>
  <mat-select #themeSelect (selectionChange)="themeSelectionChang($event)" [value]="currentTheme">
    <mat-option *ngFor="let item of themes" [value]="item.fileName">{{item.name}}</mat-option>
  </mat-select>
</mat-form-field>

So sánh với các giải pháp khác và AI code generators

• Đối thủ tham khảo: Angular Material cung cấp giải pháp theme picker khá toàn diện, phức tạp phù hợp cho trang tài liệu chính thức nhưng có thể quá tải với các ứng dụng doanh nghiệp hoặc ứng dụng người dùng thông thường.

• AI code generators: Tác giả đã thử nhờ Windows Copilot, M365 Copilot, Claude.AI… sinh code theo các yêu cầu tương tự. Mục đích là để trải nghiệm cách AI có thể hỗ trợ cấp cao cho lập trình viên, đặc biệt trong việc tạo mẫu code nhanh và xử lý các tác vụ lặp đi lặp lại.

Quan điểm cá nhân về AI code generators

Sau gần một năm sử dụng các công cụ AI như Windows Copilot và M365 Copilot trong công việc hằng ngày, tác giả nhận thấy đây là những “trợ thủ” hữu hiệu cho các công việc thường nhật như:

• Chuyển đổi dữ liệu (JSON sang CSV)
• Viết lại các thuật toán phổ biến
• Tạo đoạn code mẫu, scaffold cho dự án
• Hỗ trợ CSS, tạo theme tối dựa trên theme sáng có sẵn
• Hỗ trợ các snippet liên quan tới các framework không quen thuộc
• Đồng bộ dữ liệu giữa các hệ thống

AI giúp giảm thiểu sự nhàm chán, lặp lại, giúp lập trình viên tập trung vào phần quan trọng hơn của sản phẩm. Tuy nhiên, vẫn còn những giới hạn nhất định, và tác giả dự kiến chia sẻ thêm trong chuỗi bài về việc AI có thể hỗ trợ lập trình viên cao cấp ra sao, cùng những thiếu sót vốn có của AI code generators.

Kết luận

Web Theme Loader là một ví dụ điển hình cho việc thiết kế API nhỏ gọn, hiệu quả, tái sử dụng cao trong phát triển front-end hiện đại, phục vụ nhu cầu đa dạng của người dùng về giao diện sáng/tối và các theme tùy biến.

Việc so sánh code thủ công và code được tạo ra bởi AI agents rất có giá trị để nhìn nhận lại sức mạnh cũng như giới hạn của công nghệ AI trong lĩnh vực phát triển phần mềm. Đây cũng là lời mời dành cho cộng đồng phát triển web Việt Nam cùng khám phá và áp dụng những kỹ thuật mới.

---

Tham khảo dự án và code nguồn:

• ThemeLoader TypeScript Source
• Angular Material Theme Picker
• Các dự án sử dụng Web Theme Loader: Angular Material Components Extension, JsonToTable, Angular Heroes, React Heroes...