Sau năm năm phát triển dưới dạng sản phẩm trả phí, hệ thống thiết kế Reshaped đã thực hiện bước chuyển mình sang mã nguồn mở hoàn toàn. Thư viện UI toàn diện này, kết nối cả các component React và file thiết kế Figma, đại diện cho một sự thay đổi đáng kể trong cách các hệ thống thiết kế cao cấp có thể phát triển để phục vụ cộng đồng developer rộng lớn hơn.
Người tạo ra ban đầu đã xây dựng Reshaped để giải quyết một vấn đề phổ biến trong phát triển web: nhu cầu về một hệ thống thiết kế bao phủ 80% các mẫu UI web cốt lõi đồng thời cung cấp tính linh hoạt cho các triển khai tùy chỉnh. Thư viện đã thu hút được sự chú ý thông qua mô hình cấp phép trả phí hỗ trợ các developer cá nhân và các team lớn hơn với quyền truy cập mã nguồn.
Lộ trình phát triển
- Bắt đầu: 5 năm trước (2019)
- Chuyển gói React thành miễn phí: 2 năm trước (2022)
- Phát hành mã nguồn mở hoàn toàn: Tháng 1 năm 2025
Các vấn đề hiệu suất xuất hiện trong thử nghiệm cộng đồng
Những người dùng đầu tiên đã nhanh chóng xác định được một số vấn đề hiệu suất với trang web tài liệu và các component. Người dùng báo cáo về độ trễ đáng chú ý khi điều hướng giữa các phần tài liệu, với một số người gặp phải tình trạng đóng băng nửa giây khi chuyển đổi tab. Server-side rendering dường như là thủ phạm, mất khoảng 500 mili giây để render nội dung tĩnh.
Nhóm phát triển đã thừa nhận những vấn đề này và có kế hoạch giải quyết chúng bằng cách chuyển sang xuất trang web tĩnh giờ đây khi mã nguồn đã được công khai. Một số lỗi cụ thể của component cũng đã được báo cáo, bao gồm các vấn đề với hành vi dual-handle của slider component và chức năng backspace trong các trường autocomplete.
Các Vấn Đề Hiệu Suất Được Báo Cáo
- Độ trễ điều hướng tài liệu: ~500ms
- Đóng băng khi chuyển tab: ~0.5 giây
- Đã xác định các nút thắt cổ chai trong server-side rendering
- Đã lên kế hoạch di chuyển static export
Chất lượng component nhận được đánh giá trái chiều
Phản hồi từ cộng đồng tiết lộ một bức tranh nhiều sắc thái về chất lượng component của thư viện. Trong khi nhiều người khen ngợi tính thẩm mỹ thiết kế tổng thể và bộ tính năng toàn diện, các developer đã lưu ý những khu vực cần cải thiện trong micro-interactions và animations. Các chuyển tiếp label của slider component và việc thiếu chức năng kéo của switch component đã được nêu bật như những ví dụ mà trải nghiệm người dùng có thể được nâng cao.
Những điều này ít rõ ràng hơn nhiều so với một số thư viện khác (bao gồm cả những thư viện tuyên bố được thiết kế tỉ mỉ ...) và tôi phải mở rộng một số props cho hầu hết mọi thứ có animation vào cũng có animation ra.
Bất chấp những lời chỉ trích này, sự đồng thuận cho thấy Reshaped duy trì các tiêu chuẩn chất lượng cao hơn so với nhiều lựa chọn thay thế hiện có, với người dùng đánh giá cao sự chú ý đến accessibility và sự liên kết thiết kế-kỹ thuật.
Các vấn đề thành phần đã xác định
- Slider: Vấn đề hành vi va chạm của dual-handle
- Autocomplete: Chức năng Backspace bị lỗi
- Switch: Thiếu tương tác kéo thả
- Hoạt ảnh Label: Xuất hiện/biến mất đột ngột
Kiếm tiền trong tương lai thông qua Premium Components
Việc chuyển đổi sang mã nguồn mở không báo hiệu sự kết thúc của phát triển thương mại. Người tạo ra đã phác thảo kế hoạch cho các gói premium component sẽ nằm trên thư viện cốt lõi miễn phí. Những component nâng cao này sẽ tập trung vào các triển khai CSS và React phức tạp thay vì các bộ sưu tập template đơn giản.
Cách tiếp cận này phản ánh các mô hình thành công trong không gian hệ thống thiết kế, nơi chức năng cốt lõi vẫn miễn phí trong khi các component chuyên biệt, phức tạp tạo ra doanh thu. Chiến lược này có thể cung cấp nguồn tài trợ bền vững cho việc tiếp tục phát triển đồng thời giữ cho các công cụ thiết yếu có thể tiếp cận được với tất cả developer.
Việc chuyển sang mã nguồn mở đại diện cho một rủi ro được tính toán sau nhiều năm phát triển mã nguồn đóng, nhưng sự tham gia sớm của cộng đồng cho thấy tiềm năng mạnh mẽ cho việc cải thiện hợp tác và việc áp dụng rộng rãi hơn trong hệ sinh thái React.
Tham khảo: Reshaped is now open-source