Phan Anh Tú · ghi chép nghề
Cô ấy phóng to màn hình lên 400%, rồi lấy thước đo của Figma đặt cạnh cái nút “Thanh toán”. Lệch bốn pixel so với bản thiết kế. Không ai trong phòng để ý, trừ cô và cậu designer ngồi đối diện, người vừa nhắn tin hỏi “chỗ này em làm theo bản cũ à?”. Đó là một buổi chiều rất bình thường của một frontend developer.
Tôi hay được hỏi frontend developer là gì, thường bởi người thân hoặc sinh viên năm nhất. Câu trả lời ngắn là người dựng phần mà bạn nhìn thấy và chạm vào trên một trang web: nút bấm, ô nhập liệu, menu, ảnh, hiệu ứng khi kéo trang. Câu trả lời dài hơn thì thú vị hơn nhiều, và nó nằm ở những gì diễn ra phía sau cái nút lệch bốn pixel kia.
Họ là người dịch bản vẽ thành thứ bấm được
Một bản thiết kế trong Figma chỉ là hình ảnh. Nó không biết khi người dùng nhập sai email thì phải hiện chữ đỏ ở đâu, không biết khi mạng chậm thì nút có xoay vòng chờ không, cũng không biết màn hình điện thoại năm inch thì cột bên phải sẽ đi đâu. Người làm frontend (lập trình viên giao diện) phải trả lời hết những câu đó bằng code.
Công việc trong một tuần
Đầu tuần thường là nhận ticket. Một màn hình mới, một form đăng ký, hoặc sửa lỗi “trên Safari bị vỡ khung”. Họ mở bản thiết kế, chia nó thành các thành phần nhỏ (component) như thẻ sản phẩm, thanh tìm kiếm, hộp thoại xác nhận. Một component viết tốt có thể dùng lại ở hai chục chỗ.
Giữa tuần là nối giao diện với dữ liệu thật. Lúc này frontend phải ngồi cùng người làm backend, thống nhất API trả về trường nào, tên gì, khi lỗi thì mã lỗi ra sao. Tôi đã thấy không ít cuộc tranh cãi chỉ vì một bên đặt tên userName, bên kia mong username. Nghe buồn cười nhưng sửa ở giai đoạn muộn thì tốn công thật.
Cuối tuần, nếu may mắn, là kiểm thử trên nhiều trình duyệt và thiết bị. Chrome, Safari, Firefox, một chiếc iPhone cũ, một chiếc Android giá rẻ của phòng QA. Cái điện thoại Android cũ đó là nỗi ám ảnh của nhiều người, vì trang chạy mượt trên MacBook có thể giật từng nhịp trên nó.
Bộ đồ nghề
Nền móng vẫn là ba thứ cũ: HTML để dựng khung, CSS để trang trí và sắp xếp, JavaScript để xử lý tương tác. Bây giờ hầu hết các đội dùng thêm TypeScript để bắt lỗi kiểu dữ liệu sớm hơn. Trên nền đó là framework, phổ biến nhất ở các công ty tôi biết là React, sau đó là Vue và Angular. Next.js hay Nuxt được dùng khi cần trang tải nhanh và thân thiện với công cụ tìm kiếm.
| Thứ họ dùng | Để làm gì |
|---|---|
| Figma | Đọc bản thiết kế, lấy màu, khoảng cách, font |
| VS Code | Viết code, hầu như ai cũng dùng |
| Chrome DevTools | Soi phần tử, xem request mạng, đo hiệu năng |
| Lighthouse | Chấm điểm tốc độ, khả năng truy cập của trang |
| Git, GitHub/GitLab | Quản lý phiên bản, review code |
| Tailwind CSS hoặc Sass | Viết CSS nhanh và gọn hơn |
Nếu muốn thấy frontend đứng ở đâu giữa các nhánh còn lại như backend, mobile hay kiểm thử, tôi có viết một bài tổng quan nghề lập trình kể kỹ hơn về từng chỗ ngồi trong một văn phòng phần mềm.
Bốn pixel không phải chuyện nhỏ
Người ngoài nghe chuyện cãi nhau vì bốn pixel hay cười. Nhưng trong một trang thanh toán, nút lệch có thể khiến người dùng bấm nhầm vào nút “Quay lại”. Nhiều lần như vậy, đơn hàng rơi rớt mà không ai hiểu vì sao.
“Người dùng không bao giờ khen giao diện đẹp. Họ chỉ bỏ đi khi nó khó dùng.”
Một trưởng nhóm frontend tôi quen hay nói vậy với người mới. Anh ấy bắt cả đội tự mở trang bằng chế độ mạng 3G giả lập trong DevTools mỗi khi xong một tính năng. Ai làm trang nặng quá, ảnh không nén, gói JavaScript phình lên vài megabyte, sẽ tự thấy xấu hổ khi nhìn thanh tải chạy mãi không xong.
Có một mảng mà ở Việt Nam ít người để ý là khả năng truy cập (accessibility). Nút có nhãn để trình đọc màn hình đọc được không, màu chữ có đủ tương phản cho người mắt kém không, dùng bàn phím có đi hết được form không. Các dự án làm cho khách hàng Nhật, Úc hay châu Âu thường kiểm phần này khá kỹ, và người frontend biết làm thì có thêm một điểm cộng rõ ràng.
Ở bàn code: người mới hay học framework trước khi hiểu JavaScript thuần. Đến lúc gặp lỗi liên quan đến bất đồng bộ, từ khóa this, hoặc vòng đời của component, họ không biết lỗi nằm ở React hay ở chính ngôn ngữ. Tôi thấy ai chịu ngồi vài tuần với JavaScript gốc thì về sau đỡ khổ hơn nhiều.
Ai hợp với chỗ ngồi này
Tôi để ý những người làm frontend lâu năm thường có một điểm chung: họ khó chịu khi thấy thứ gì đó xấu hoặc khó dùng. Không nhất thiết phải biết vẽ. Nhưng nhìn một trang web mà chữ dính sát lề, nút bé xíu trên điện thoại, họ thấy ngứa mắt và muốn sửa.
Họ cũng phải chịu được việc bị góp ý liên tục. Designer góp ý về khoảng cách, product manager góp ý về luồng, tester gửi lỗi kèm ảnh chụp màn hình, khách hàng gửi email “chữ to lên chút được không”. Frontend là chỗ mọi người đều nhìn thấy, nên cũng là chỗ ai cũng có ý kiến.
Về đường đi, sau vài năm người làm frontend có thể đi sâu vào hiệu năng và kiến trúc phía giao diện, học thêm backend để thành fullstack, hoặc chuyển sang mobile với React Native vì cùng gốc JavaScript. Một số người tôi biết rẽ sang thiết kế sản phẩm vì nhận ra mình thích nghĩ về trải nghiệm người dùng hơn là viết code. Không hướng nào sai cả.
Thu nhập thì tôi không nêu con số. Nó lệ thuộc nhiều vào việc bạn làm cho công ty nào, dự án trong nước hay nước ngoài, có thạo TypeScript và một framework lớn không, và tiếng Anh tới đâu. Chênh lệch giữa hai người cùng ba năm kinh nghiệm có thể rất lớn.
Chiều hôm đó, cô frontend sửa xong bốn pixel, đẩy code lên, rồi nhắn cho cậu designer một chữ “xong”. Cậu gửi lại một sticker con mèo giơ ngón cái. Ở nghề này, đôi khi đó là lời khen đáng giá nhất trong ngày.