Reshaped เปิดโอเพนซอร์สแล้ว

 (reshaped.so)
28 คะแนน โดย GN⁺ 2025-09-13 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Reshaped เป็นโปรเจกต์ที่มอบไลบรารีคอมโพเนนต์สำหรับ React และ Figma ให้กับนักออกแบบและนักพัฒนา
  • เดิมใช้รูปแบบไลเซนส์แบบเสียเงิน แต่ตอนนี้ได้ เปลี่ยนเป็นโอเพนซอร์สเต็มรูปแบบ แล้ว
  • การเปิดเป็นโอเพนซอร์สทำให้สามารถเข้าถึงทั้งซอร์สโค้ดและไลบรารีดีไซน์ได้ผ่าน GitHub และ Figma Community
  • โปรเจกต์นี้ช่วย เสริมความเชื่อมโยงระหว่างงานออกแบบกับวิศวกรรม และนำเสนอแนวปฏิบัติที่ดีที่สุดซึ่งสามารถนำไปใช้ในงานจริงได้ทันที
  • ผู้ซื้อเดิมจะยังคงได้รับ อัปเดต และการสนับสนุนต่อไป

เบื้องหลังการเปลี่ยน Reshaped เป็นโอเพนซอร์ส

  • แรงจูงใจในการเริ่มโปรเจกต์ Reshaped เมื่อราว 5 ปีก่อน คือความต้องการ ไลบรารีคอมโพเนนต์ ที่ใช้ได้ทั้งใน React และ Figma
  • จากประสบการณ์ทำงานกับดีไซน์ซิสเต็มมากว่า 10 ปี ทำให้เข้าใจอย่างชัดเจนถึง ปัญหาที่เกิดขึ้นซ้ำ ๆ ในดีไซน์ซิสเต็ม และมาตรฐานที่ดี
  • พบว่าเว็บกว่า 80% ยังถูกสร้างอยู่บนหลักการออกแบบแกนกลางที่คล้ายกัน จึงออกแบบระบบที่ครอบคลุมสิ่งเหล่านี้ในวงกว้าง พร้อมทั้งมอบ ยูทิลิตีระดับล่างให้ดีเวลลอปรับใช้กับอีก 20% ที่เหลือได้อย่างยืดหยุ่น
  • ตั้งแต่แรกไม่ได้มุ่งเน้นเฉพาะเรื่องการเข้าถึงหรือดีไซน์เพียงด้านเดียว แต่ให้ความสำคัญกับการแก้โจทย์งานจริงหลายด้านร่วมกัน เช่น การจัดแนวระหว่างดีไซน์กับวิศวกรรม, UI theme, dark mode และ micro-animation

เส้นทางจากโมเดลเสียเงินสู่การตัดสินใจเปิดโอเพนซอร์ส

  • ในช่วงแรก เพื่อให้โปรเจกต์ดำเนินต่อได้อย่างยั่งยืน จึงเลือกใช้โมเดลการขาย ไลเซนส์แบบเสียเงินสำหรับบุคคลและทีม
  • แนวทางนี้ช่วยให้สามารถโฟกัสกับคอมมูนิตี้ขนาดเล็กมากขึ้น และตอบสนองต่อรายงานบั๊กกับคำขอฟีเจอร์ได้อย่างลึกซึ้ง
  • มีความตั้งใจมาโดยตลอดว่าสักวันหนึ่งอยากยกเลิกกำแพงการจ่ายเงิน และเมื่อ 2 ปีก่อนก็เริ่มเปิด React package ให้ใช้ฟรีก่อน ซึ่งเปิดโอกาสใหม่ ๆ ตามมา
  • ตอนนี้ได้ เปิดซอร์สโค้ดทั้งหมดและไลบรารี Figma เป็นโอเพนซอร์ส แล้ว โดย React ใช้งานได้บน GitHub และ Figma ใช้งานได้บน Figma Community

ความหมายและผลที่คาดหวังจากการเปิดโอเพนซอร์ส

  • Reshaped คือ เครื่องมือที่เชื่อมสะพานระหว่างงานออกแบบกับวิศวกรรม ซึ่งช่วยให้ทั้งสองฝั่งเรียนรู้แนวปฏิบัติที่ดีที่สุดในการสร้างดีไซน์ซิสเต็มที่ขยายต่อได้
  • เมื่อซอร์สของไลบรารีถูกเปิดเผยแล้ว ก็จะสามารถ แบ่งปันกระบวนการลงมือสร้างจริงได้อย่างโปร่งใส ทุกครั้งที่มีฟีเจอร์ใหม่ถูกเพิ่มเข้ามา
  • ฟีเจอร์ใหม่ของ Figma หรือ React ก็สามารถ นำตัวอย่างจาก Reshaped ไปใช้เป็น benchmark ได้ล่วงหน้า ก่อนนำไปใช้กับดีไซน์ซิสเต็มของบริษัท
โฆษณา

แผนต่อจากนี้และการสนับสนุนคอมมูนิตี้

  • ไลบรารีคอมโพเนนต์ของ Reshaped จะยังคง ขยายต่อไป ในอนาคต
    • ผู้ซื้อแบบเสียเงินเดิมจะยังคงได้รับ อัปเดตและการสนับสนุนในอนาคต อย่างต่อเนื่องโดยไม่มีการเปลี่ยนแปลง
    • ช่องทางการสื่อสารเดิมก็จะยังคงไว้เช่นเดิม
  • ต่อจากนี้กำลังพิจารณาเพิ่ม คอมโพเนนต์พรีเมียมที่ล้ำขึ้นและใช้งานได้ดีขึ้น บนไลบรารีแกนหลัก
    • จะไม่ได้เน้นฟีเจอร์แบบแยกส่วนอย่างเลย์เอาต์หน้าแลนดิ้งเพจ 50 แบบ แต่จะเน้น คอมโพเนนต์ระดับยากที่ต้องใช้ CSS ที่ซับซ้อนและลอจิก React

การตัดสินใจคืนสิ่งนี้ให้คอมมูนิตี้

  • หลังจากดูแลแบบ closed source มานาน 5 ปี ตอนนี้ได้ตัดสินใจ คืนทุกอย่างกลับสู่คอมมูนิตี้ และกำลังตั้งตารอความสนุกบทใหม่

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-09-13
ความคิดเห็นจาก Hacker News
  • เป็นไลบรารีที่ยอดเยี่ยมมาก และก็รู้สึกขอบคุณที่เปิดให้ใช้โค้ดจำนวนมากได้ฟรี
  • ให้ความรู้สึกว่าดีไซน์สะอาดและทำมาอย่างดี
    • บน Manjaro Linux กับ LibreWolf v135 มีอาการค้างอยู่หลายมิลลิวินาทีเวลาเปลี่ยนแท็บหรือเลื่อนดูหน้าเอกสาร
      • บนเบราว์เซอร์ Fennec ของ Android ก็พบอาการคล้ายกัน ตอนสลับระหว่างแท็บ Documentation กับ Properties จะหยุดไปประมาณ 0.5 วินาที เลยคิดว่าอาจไม่ใช่อาการค้างจริง แต่อาจเป็นการจัดการทศนิยมของแอนิเมชันที่ผิดพลาด
      • รับทราบแล้วว่ามีอาการนำทางช้าและจะตรวจสอบ ตอนนี้ระหว่างการนำทางยังมีการค้นหาไฟล์ mdx และทำการยืนยันตัวตนแบบง่าย ๆ บนเซิร์ฟเวอร์อยู่ เลยยังใช้เซิร์ฟเวอร์ แต่การเปลี่ยนมาเป็นโอเพนซอร์สทำให้ตอนนี้น่าจะสามารถเปลี่ยนเป็นเว็บไซต์แบบสแตติกได้โดยตรงแล้ว
      • เซิร์ฟเวอร์ Next JS ใช้เวลาประมาณ 0.5 วินาทีในการเรนเดอร์เนื้อหาแบบสแตติก ดูภาพ
  • โดยส่วนตัวกำลังมองหาเฟรมเวิร์ก/ไลบรารีที่มีไมโครอินเทอร์แอ็กชันซึ่งถูกออกแบบและพัฒนาไว้อย่างสมบูรณ์ แม้แต่ UI toolkit ระดับดีที่สุดก็ยังมีบางจุดที่ให้ความรู้สึกเหมือนกระโดดหรือมีอาการ glitch เล็กน้อย
    • ถ้ามีตัวอย่างไมโครอินเทอร์แอ็กชันที่อยากให้ปรับปรุงหรือเพิ่มเข้ามา ก็อยากให้ช่วยแชร์ ตอนนี้กำลังพัฒนาชุดคอมโพเนนต์เพิ่ม และคิดว่าน่าจะทำไมโครอินเทอร์แอ็กชันแบบนั้นได้
  • คิดว่าดีไซน์ยอดเยี่ยมมาก ตอนนี้ใช้งาน Mantine อย่างจริงจังและค่อนข้างพอใจ แต่ก็จะจดจำไลบรารีนี้ไว้เหมือนกัน เพียงแต่อยากให้มีไลบรารีคุณภาพระดับนี้สำหรับ ReactNative บ้าง เพราะโซลูชันที่มีอยู่ตอนนี้ยังไม่น่าพอใจ
    • จำได้ว่าเมื่อก่อน Mantine เคยมีปัญหาเรื่อง a11y (การเข้าถึง) เลยสงสัยว่าเคยตรวจสอบการปฏิบัติตามข้อกำหนดด้านการเข้าถึงด้วย Mantine บ้างหรือไม่
  • ใน README ลิงก์ getting started พาไปที่ changelog ทำให้ไม่เจอคู่มือเริ่มต้นใช้งานทันที
    • พร้อมแสดงความขอบคุณ และได้ส่งปัญหานี้เป็น PR ทันที
  • ไลบรารีนี้ดูเป็นระเบียบและสะอาดมากจนน่าประทับใจ อยากให้มีวิธีเชื่อมต่อกับ WordPress ได้ง่าย ๆ หรือไม่ก็สงสัยว่าตอนนี้มีอยู่แล้วหรือเปล่า
  • คิดว่าเป็นทั้งชุดคอมโพเนนต์ที่สวยงามและการตัดสินใจที่กล้ามาก ขอแสดงความยินดีกับความสำเร็จจนถึงตอนนี้ และหวังว่าการเปลี่ยนแปลงนี้จะเป็นประโยชน์อย่างมากไม่ใช่แค่กับตัวเองแต่กับทั้ง ecosystem
  • สงสัยว่าทำไมบนเว็บไซต์ถึงไม่มีแผนราคา การชวนชำระเงิน หรือทางเลือกในการบริจาคเลย หมายความว่าหลังจากโอเพนซอร์สเต็มรูปแบบแล้วจะไม่สนใจการสร้างรายได้อีกต่อไปหรือไม่
    • ตลอด 5 ปีที่ผ่านมาได้รายได้เพียงพอจากการขายไลบรารีนี้แล้ว และตอนนี้ก็พอใจที่จะเปิดให้คนที่ซื้อได้ยากสามารถใช้งานได้ด้วย (ราคาเดิมเน้นทีมเป็นหลัก) ต่อไปจะมีคอมโพเนนต์เพิ่มเติมบางส่วนออกมาในรูปแบบไลเซนส์แบบพลัส แต่ไลบรารี React และ Figma หลักจะยังคงเป็นโอเพนซอร์สฟรีต่อไป
    • ด้านล่างของบทความมีการระบุว่า “มีแผนจะต่อยอด Reshaped ด้วยการเพิ่มคอมโพเนนต์พรีเมียมที่ซับซ้อนและมีแนวคิดชัดเจนบนไลบรารีหลัก ไม่ใช่แค่ 'เลย์เอาต์หน้าแลนดิ้งเพจ 50 แบบ' แต่หมายถึงคอมโพเนนต์ขั้นสูงที่ต้องใช้ตรรกะ CSS และ React ที่ละเอียดซับซ้อน”
  • พบปัญหาว่าฟังก์ชัน autocomplete ไม่ตอบสนองต่อการกด backspace (ยืนยันแล้วบน OSX Safari และ Chrome) ซึ่งก็น่าสนใจดี
    • ขอโทษทันที พร้อมแจ้งว่าจะ redeploy เอกสารวันนี้ และปัญหานี้ถูกแก้แล้วในแพตช์ล่าสุด