Reshaped nay đã được phát hành mã nguồn mở

• Reshaped là một dự án cung cấp thư viện component cho React và Figma dành cho nhà thiết kế và lập trình viên
• Ban đầu dự án được cung cấp theo hình thức giấy phép trả phí, nhưng nay đã chuyển hoàn toàn sang mã nguồn mở
• Với việc mã nguồn mở hóa, giờ đây có thể sử dụng cả mã nguồn lẫn thư viện thiết kế trên GitHub và Figma Community
• Dự án này giúp tăng cường sự kết nối giữa thiết kế và kỹ thuật, đồng thời đưa ra các best practice có thể áp dụng ngay trong công việc thực tế
• Những người mua trước đây vẫn sẽ tiếp tục nhận được cập nhật và hỗ trợ trong tương lai

---

Bối cảnh Reshaped chuyển sang mã nguồn mở

• Khoảng 5 năm trước, động lực để bắt đầu dự án Reshaped là vì cần một thư viện component có thể dùng trong cả React và Figma
• Dựa trên hơn 10 năm kinh nghiệm làm việc với design system, nhóm phát triển hiểu rõ các vấn đề thường gặp trong design system cũng như những tiêu chuẩn tốt cần có
• Họ nhận ra rằng 80% web vẫn được xây dựng trên những nguyên tắc thiết kế cốt lõi tương tự nhau, nên đã thiết kế một hệ thống vừa bao phủ rộng rãi phần đó, vừa cung cấp các utility cấp thấp để lập trình viên linh hoạt xử lý 20% còn lại
• Ngay từ đầu, dự án không chỉ tập trung riêng vào accessibility hay thiết kế, mà nhấn mạnh vào việc đồng bộ giữa thiết kế và kỹ thuật cũng như UI theme, dark mode, micro-animation và nhiều bài toán thực tiễn khác

Quá trình từ mô hình trả phí đến quyết định mã nguồn mở

• Để duy trì tính bền vững của dự án, ban đầu nhóm đã chọn hình thức bán giấy phép trả phí cho cá nhân và đội nhóm
• Nhờ đó, họ có thể tập trung hơn vào một cộng đồng nhỏ và phản hồi sâu sát với các báo cáo lỗi cũng như yêu cầu tính năng
• Họ luôn mong muốn một ngày nào đó có thể gỡ bỏ rào cản trả phí, và 2 năm trước đã mở miễn phí gói React trước, từ đó mở ra những khả năng mới
• Giờ đây, toàn bộ mã nguồn và thư viện Figma đã được công khai mã nguồn mở, với React có trên GitHub và Figma có trên Figma Community

Ý nghĩa và hiệu quả kỳ vọng của việc chuyển sang mã nguồn mở

• Reshaped là công cụ bắc cầu giữa thiết kế và kỹ thuật, giúp cả hai phía học hỏi các best practice để xây dựng design system có khả năng mở rộng
• Khi mã nguồn của thư viện được công khai, mỗi khi có tính năng mới được đưa vào, họ có thể chia sẻ minh bạch quá trình triển khai thực tế
• Các tính năng mới của Figma hay React cũng có thể được benchmark trước thông qua các ví dụ của Reshaped trước khi áp dụng vào design system của công ty

Kế hoạch sắp tới và hỗ trợ cộng đồng

• Thư viện component của Reshaped sẽ tiếp tục được mở rộng trong tương lai
  • Những người mua trả phí trước đây vẫn sẽ tiếp tục nhận cập nhật và hỗ trợ trong tương lai như cũ
  • Các kênh liên lạc hiện tại cũng sẽ được giữ nguyên
• Trong thời gian tới, nhóm đang cân nhắc bổ sung các component premium cao cấp hơn và có tính khả dụng cao hơn trên nền thư viện cốt lõi
  • Trọng tâm không phải là các tính năng rời rạc như 50 bố cục landing page, mà là các component độ khó cao đòi hỏi CSS phức tạp và logic React

Quyết định hoàn trả lại cho cộng đồng

• Sau 5 năm vận hành theo mô hình closed source, giờ đây họ trao lại mọi thứ cho cộng đồng và đang chờ đón niềm vui mới

[GN⁺]

Ý kiến trên Hacker News

• Đây là một thư viện thực sự tuyệt vời, đồng thời bày tỏ sự cảm kích vì có thể sử dụng nhiều mã nguồn miễn phí
• Có ấn tượng rằng thiết kế rất gọn gàng và chỉn chu
  • Với tổ hợp Manjaro Linux và LibreWolf v135, có hiện tượng bị khựng trong vài mili giây khi chuyển tab hoặc điều hướng trong trang tài liệu
    • Trên trình duyệt Fennec của Android cũng gặp hiện tượng tương tự, khi chuyển giữa tab Documentation và Properties thì bị dừng khoảng 0,5 giây; có thể đây không phải đóng băng thực sự mà là do xử lý sai phần thập phân của animation
    • Đã nhận thức được hiện tượng điều hướng chậm và sẽ kiểm tra; hiện tại khi điều hướng, việc dò tìm tệp mdx và xác thực đơn giản đang được xử lý trên máy chủ nên vẫn đang dùng server, nhưng nhân dịp chuyển sang mã nguồn mở thì giờ đây có thể chuyển thẳng sang website tĩnh
    • Máy chủ Next JS mất khoảng 0,5 giây để render nội dung tĩnh xem hình
• Cá nhân đang tìm một framework/thư viện có micro-interaction được thiết kế và phát triển hoàn chỉnh; ngay cả những UI toolkit tốt nhất đôi khi vẫn tạo cảm giác như có độ nhảy nhẹ hoặc glitch tinh vi
  • Nếu có ví dụ nào về micro-interaction mà bạn muốn cải thiện hoặc bổ sung thì hãy chia sẻ; hiện đang phát triển thêm bộ component và có vẻ có thể triển khai những micro-interaction như vậy
• Tôi nghĩ thiết kế rất xuất sắc; hiện tại tôi đang dùng Mantine rất tích cực và khá hài lòng, nhưng cũng sẽ ghi nhớ thư viện này; tuy vậy vẫn mong có một thư viện chất lượng tương đương cho ReactNative, vì các giải pháp hiện có vẫn chưa thật sự thỏa mãn
  • Tôi nhớ là trước đây Mantine từng có vấn đề về a11y (khả năng truy cập), không biết bạn đã từng kiểm tra mức độ tuân thủ accessibility với Mantine chưa
• Trong README, liên kết getting started lại dẫn đến changelog nên không hiện ngay hướng dẫn bắt đầu
  • Kèm lời cảm ơn, vấn đề đó đã được gửi ngay thành PR
• Thư viện này trông rất ngăn nắp và gọn gàng nên gây ấn tượng mạnh; hy vọng sẽ có cách tích hợp dễ dàng với WordPress, hoặc không biết liệu đã có sẵn hay chưa
• Tôi nghĩ đây là một bộ component đẹp mắt đồng thời cũng là một quyết định rất táo bạo; chúc mừng những thành công cho đến nay và kỳ vọng thay đổi này sẽ giúp ích rất nhiều không chỉ cho cá nhân tôi mà còn cho cả hệ sinh thái
• Tôi thắc mắc vì trên trang hoàn toàn không có gói giá, lời kêu gọi thanh toán hay tùy chọn quyên góp nào cho thư viện này, tức là liệu sau khi mở mã nguồn hoàn toàn thì họ không còn quan tâm đến việc kiếm tiền nữa hay không
  • Trong 5 năm qua, thư viện này đã mang lại đủ doanh thu khi được bán, và giờ tôi hài lòng khi mở nó ra để cả những người khó có khả năng mua cũng có thể sử dụng (mức giá trước đây chủ yếu hướng tới đội nhóm); về sau một số component bổ sung sẽ được phát hành dưới dạng giấy phép Plus, nhưng thư viện React và Figma cốt lõi sẽ tiếp tục được duy trì miễn phí và mã nguồn mở
  • Ở cuối bài có nhắc rằng “để tiếp tục phát triển Reshaped, chúng tôi dự định giới thiệu các premium component phức tạp và có quan điểm thiết kế rõ ràng trên nền thư viện cốt lõi; không phải kiểu '50 bố cục landing page', mà là các component cao cấp đòi hỏi logic CSS và React tinh vi”
• Đã phát hiện lỗi khiến phím Backspace không hoạt động trong tính năng autocomplete (xác nhận trên OSX Safari & Chrome), điều này khá thú vị
  • Lập tức xin lỗi và thông báo rằng tài liệu sẽ được redeploy trong hôm nay, đồng thời lỗi đó đã được sửa trong bản vá mới nhất