Tôi thay áo 27 trang quản trị cho "trông pro" — và không viết một dòng React

"Trông pro" là việc của design system. Không phải của React. Tuần trước tôi mất gần hai ngày để học lại điều đó bằng tay, không phải bằng lý thuyết.

Việc bắt đầu từ một cảm giác rất con người: tự ti. Tôi mở dashboard của vài SaaS cùng ngành để tham khảo — donut chart, progress bar, KPI card xanh đỏ tím vàng, lọc một phát không reload trang. Rồi tôi mở mấy trang quản trị của mình. Phẳng. Trắng. Đúng chức năng nhưng nhìn như form khai báo thuế.

Và cái suy nghĩ quen thuộc nhảy ra ngay: "Chắc tại mình không dùng React. Phải tách phần quản trị ra làm một app React riêng thì mới xịn được."

May là tôi đã dừng lại trước khi gõ dòng lệnh đầu tiên.

Cái tảng băng dưới chữ "tách ra làm React"

Tôi ngồi liệt kê thật xem "tách ra" nghĩa là làm những gì. Không phải vẽ lại giao diện — phần đó là phần nổi, là phần dễ nhất. Phần chìm mới chết người.

Hệ thống của tôi hiện có 68 đường dẫn cho khu quản trị và cổng khách. Trong đó có 36 cái form kiểu cổ điển: điền, bấm gửi, server nhận và xử lý. Tách sang React nghĩa là tôi phải đập cả 36 form đó ra, viết lại thành 36 cái cổng dữ liệu kiểu mới, rồi viết lại 36 cái form phía giao diện để gọi vào chúng. Đống việc lớn nhất này chẳng liên quan gì tới chữ "đẹp" cả.

Chưa kể chuyện đăng nhập. Khu quản trị đăng nhập một kiểu, cổng khách đăng nhập bằng Google một kiểu — cả hai đang chạy theo cách server tự giữ phiên, đơn giản và an toàn. Tách SPA ra là tôi phải tự tay xử lý chuyện cấp và làm mới mã thông báo, chuyện hai tên miền nói chuyện với nhau — đúng cái khu dễ đẻ ra lỗ hổng bảo mật nhất.

Và cú đắt nhất, riêng với người làm một mình như tôi: toàn bộ dây chuyền phát triển của tôi xoay quanh một bộ kiểm thử bằng Python. Mỗi lần một con AI phụ việc viết code cho tôi, nó phải chạy qua cái cổng kiểm thử đó mới được gộp vào. Thêm React là thêm cả một ngôn ngữ thứ hai, một hệ kiểm thử thứ hai. Cái lợi thế lớn nhất của tôi — một dây chuyền gọn, một thứ tiếng — sẽ bị bổ đôi.

Đội mười người thì chuyện này không sao, thậm chí nên tách để chia việc. Nhưng tôi có một người. Tách ra là tự đóng thuế lên đúng cái mạnh nhất của mình.

Đẹp có một con đường rẻ hơn nhiều

Tôi soi lại thật kỹ: cái làm mấy dashboard kia đẹp chính xác là cái gì? Không phải React. Là bố cục, là khoảng thở, là bảng màu thống nhất, là mấy thư viện vẽ biểu đồ. Mà mấy thứ đó tôi đều nhúng được vào nền cũ của mình mà không động tới một viên gạch kiến trúc nào.

Hóa ra React không bán cho bạn vẻ đẹp. Nó bán tương tác — lọc sắp xếp không cần tải lại trang, mấy widget phức tạp, trạng thái giữ ở phía trình duyệt. Mà 36 cái form của tôi cho thấy khu quản trị này về bản chất là một app điền-và-gửi cổ điển. Render ở server là đúng chuẩn cho loại app này, không phải lạc hậu.

Tôi đã nhầm cảm giác "phẳng" với chẩn đoán "thiếu React". Hai thứ đó không liên quan.

Một bộ áo chung, mặc cho 27 phòng

Nên việc tôi làm tuần trước hóa ra rất khác cái dự định ban đầu. Tôi gom toàn bộ phần nhìn vào một file kiểu dáng thống nhất — một bộ áo chung: cùng bảng màu, cùng nút bấm, cùng thẻ thông tin, cùng cái thanh điều hướng bên trái mới. Rồi tôi mặc bộ áo đó cho 27 trang quản trị và cổng khách, lần lượt từng trang.

Kết quả nhìn lên đã ra dáng một sản phẩm thật. Cùng một thanh bên ở mọi trang, người dùng không còn lạc. Mỗi loại dữ liệu giờ hiển thị theo cùng một khuôn. Mà bên dưới, kiến trúc không đổi một ly — vẫn render ở server, vẫn cái bộ kiểm thử Python đó, vẫn đẩy lên server theo đúng cách cũ.

Cái bẫy giữa đường: đừng đập cái cũ

Nhưng có một cạm bẫy tôi suýt sập, và nó là phần đáng kể nhất của bài này.

Khi gom phần nhìn về một mối, phản xạ tự nhiên là xóa sạch mớ kiểu dáng cũ rải rác cho gọn. Tôi đã định làm thế. Đúng lúc đó tôi mới nhớ ra: phía dưới bộ áo chung còn 35 màn hình con — mấy trang chi tiết, mấy bảng nhỏ, mấy ô khai báo lặt vặt — đang dựa lưng vào đúng cái lớp kiểu dáng cũ kia để khỏi vỡ bố cục.

Nếu tôi xóa lớp cũ đi cho sạch, bộ áo mới sẽ đẹp ở mấy trang chính, còn 35 màn con sẽ vỡ tan hàng — chữ tràn ra ngoài, bảng lệch, nút nhảy lung tung. Và sẽ không có dòng báo lỗi nào, vì bố cục vỡ thì máy không kêu, chỉ mắt người mới thấy.

Nên tôi làm theo kiểu cộng thêm, không thay thế: giữ nguyên lớp kiểu dáng cũ, đắp bộ áo mới lên trên, rồi chuyển từng màn sang chuẩn mới một cách có chủ đích. Cái cũ ở lại làm lưới đỡ cho tới khi từng màn con thật sự được dọn xong.

Đây đúng là bài học mà ai làm một mình cũng phải thuộc: khi nâng cấp một thứ đang chạy thật, kẻ thù không phải cái mới xấu — mà là cái cũ bạn vô tình đập vỡ trong lúc dọn dẹp.

Bài học mang đi

Trước khi tách bất cứ thứ gì ra cho "xịn", hãy hỏi đúng một câu: cái mình thiếu là vẻ đẹp, hay là tương tác? Nếu chỉ là vẻ đẹp — và phần lớn các app quản trị chỉ thiếu đúng cái đó — thì câu trả lời gần như không bao giờ là viết lại bằng một stack mới. Đẹp có đường rẻ hơn nhiều, và bạn nên để dành cái "tiền phức tạp" đó cho lúc thật sự cần tương tác app-like.

Và khi nâng cấp một thứ đang phục vụ thật: cộng thêm trước, xóa cũ sau. Giữ cái cũ làm lưới đỡ cho tới khi chắc chắn cái mới đã gánh được. Người làm một mình không có ai hứng giùm mình khi 35 màn con cùng vỡ một lúc.

👉 Muốn tự tay build con bot AI đầu tiên rồi tự dựng cả khu quản trị cho nó — đủ "trông pro" mà không cần ôm một đống stack? Bắt đầu với mini-course miễn phí: Bot AI đầu tiên của bạn — làm xong trong một buổi tối, và bạn sẽ tự thấy đâu là chỗ nên đầu tư cho đẹp, đâu là chỗ chỉ tổ rước thêm việc.