Tạm biệt JavaScript, chào đón HTML: Khi tối giản hóa mang lại hiệu quả tốt hơn

Trong thế giới phát triển web hiện đại, chúng ta thường thấy các nhà phát triển cố gắng nhồi nhét mọi thứ vào JavaScript để tạo ra các ứng dụng đơn trang (SPA) phức tạp. Tuy nhiên, một xu hướng ngược lại đang nổi lên: quay về với những giá trị cốt lõi của HTML.

Vấn đề với giải pháp JavaScript phức tạp

Gần đây, tôi đã chia sẻ về cách tạo ra nhiều trang HTML và tận dụng khả năng điều hướng thay vì các tương tác phụ thuộc vào JavaScript ngay trên trang. Hôm nay, tôi muốn đưa ra một ví dụ cụ thể về trang web biểu tượng của mình.

Trước đây, tôi có một tiện ích nhỏ cho phép người dùng thay đổi kích thước biểu tượng họ đang xem. Tôi đã triển khai tính năng này dưới dạng một Web Component. Khi người dùng nhấp vào tiện ích để thay đổi kích thước, JavaScript sẽ thay đổi thuộc tính size trên phần tử tùy chỉnh. Từ đó, mã JS của Web Component sẽ tiếp nhận việc thay đổi kích thước của các phần tử con và thuộc tính src của chúng.

Mặc dù cách này hoạt động khá tốt, nhưng vì đó là giải pháp phía máy khách (client-side) cho một trang web tĩnh được hiển thị trước (pre-rendered), nó yêu cầu một số logic mẫu và dữ liệu phải được sao chép và gửi đến mọi máy khách.

Tôi không thích điều này vì nhiều lý do, ví dụ như: "Mình đã cập nhật một phần nhỏ cách hiển thị danh sách biểu tượng trên máy chủ, nhưng lại quên điều chỉnh nó trên máy khách, nên mọi thứ bị hỏng một chút."

Chuyển sang giải pháp HTML và điều hướng

Sau đó, một ý nghĩ chợt lóe lên: thay vì dựa vào JavaScript để tương tác này hoạt động (nhấp, thực thi JS, sửa đổi DOM trên trang thành danh sách mới), điều gì sẽ xảy ra nếu mình biến tương tác đó thành một hành động điều hướng? Nhấp, điều hướng đến một danh sách mới.

Thay vì "mọi danh sách biểu tượng đều đi kèm với một số JS cho phép chúng hiển thị lại ở bốn kích thước khác nhau", tôi có thể làm "mọi danh sách biểu tượng đều có sẵn ở bốn kích thước khác nhau".

Trước đây: một trang duy nhất, ví dụ /colors/red/, với JS để hiển thị lại danh sách biểu tượng dựa trên tương tác của người dùng. Ý tưởng mới: bốn trang, ví dụ /colors/red/{sm|md|lg|xl}, mỗi trang là một kích thước danh sách biểu tượng khác nhau.

Kết quả bất ngờ với CSS View Transitions

Vì vậy, tôi đã thử nghiệm. Và bạn biết điều gì đã xảy ra không? Khi tôi thêm một chút mã để hỗ trợ CSS View Transitions (chuyển đổi giao diện CSS), tôi đã có được một hiệu ứng mượt mà giữa các biểu tượng hoàn toàn miễn phí — đúng vậy, bằng cách loại bỏ mã!

Nó hoạt động rất tốt trên cả thiết bị di động nữa.

Tôi biết mình không làm gì quá mới mẻ ở đây, nhưng khi chúng ta tiếp tục có được các nguyên thủy (primitives) mới và mạnh mẽ trên web — như CSS View Transitions — tôi thấy thực sự thú vị khi xem lại các mẫu cơ bản và khám phá những gì có thể làm được bây giờ mà trước đây chưa thể.

Đặt câu hỏi cho chính mình: "Mình có thể loại bỏ một số JavaScript phía máy khách và có được trải nghiệm tổng thể tốt hơn không?" là một bài tập rất bổ ích. Nếu câu trả lời là có, tôi cá là trải nghiệm phát triển (và gánh nặng bảo trì) sẽ được cải thiện rất nhiều!