Thư viện skeleton-styler - Skeleton "sạch" và đồng nhất cho dự án lớn
Chào anh em, là một dev Frontend, mình hiểu cảm giác mỗi khi phải làm Loading State (Skeleton) cho các dự án lớn. Thông thường, chúng ta hay dùng ảnh GIFs (khó tùy chỉnh) hoặc ngồi layout từng block rời rạc (dễ gây vụn vặt và thiếu nhất quán).
Gần đây mình thấy một thư viện khá thú vị mang tên skeleton-styler. Thư viện này giải quyết bài toán trên theo một hướng rất "clean".
-
Tư duy Builder Pattern lạ mà quen Điểm mình ấn tượng nhất là thư viện này không bắt bạn viết HTML/CSS rườm rà cho skeleton. Thay vào đó, nó sử dụng Builder Pattern. Anh em chỉ cần "chain" các hàm lại với nhau để tạo ra cấu trúc mong muốn.
-
Khả năng tích hợp đa framework (React, Angular...) Dù bạn dùng React hay Angular, thư viện này đều cân được vì nó tập trung vào việc generate trực tiếp ra DOM node hoặc HTML string.
Dưới đây là cách tác giả tích hợp nó vào một React Component:
Hình 2: Triển khai SkeletonWrapper cực kỳ gọn gàng trong React.
- Những tính năng "nhỏ nhưng có võ" Một điểm cộng lớn là thư viện có hàm .s_randomWidth(). Tính năng này giúp các dòng text loading có độ dài ngẫu nhiên, khiến giao diện skeleton trông tự nhiên và khớp với dữ liệu thật hơn hẳn việc các thanh loading cứ đều tăm tắp.
Hình 3: Một giao diện Card hoàn chỉnh được xây dựng hoàn toàn bằng logic code.
Một số ưu điểm khác mình nhận thấy: Type-safe: Vì được viết bằng TypeScript nên gợi ý code rất tốt, tránh việc gõ sai tên thuộc tính. Siêu nhẹ: Không gây nặng bundle size cho dự án của bạn.
- Thử nghiệm trực tiếp Nếu anh em muốn thử "grok" API của nó nhanh nhất thì có thể ghé qua trang Playground. Việc xem kết quả render real-time giúp hình dung cấu trúc dễ hơn nhiều so với việc chỉ đọc tài liệu.
Live Playground: https://skeleton-styler.vercel.app/playground
NPM: npm i skeleton-styler
Theo mình, đây là một lựa chọn rất đáng cân nhắc cho anh em nào muốn tối ưu lại quy trình làm Skeleton cho dự án để code vừa "sạch" vừa nhất quán.
All rights reserved
