Onlook - เครื่องมือสร้างแอปแบบปรับแต่งได้ด้วย Webflow แบบโอเพนซอร์ส

 (github.com/onlook-dev)
11 คะแนน โดย GN⁺ 2024-07-09 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เครื่องมือบนเว็บที่สามารถแก้ไขเว็บแอปและสร้าง UI แบบภาพได้โดยไม่ต้องเขียนโค้ด
  • รองรับ React และ TailwindCSS
    • สามารถแก้ไขและเขียนแอป React ใหม่แบบเรียลไทม์บนเครื่องโลคัลได้
    • แทรก CSS บางส่วนลงในหน้าเพื่อให้สามารถเลือกองค์ประกอบ DOM และลาก&วางได้ พร้อมติดตามการเปลี่ยนแปลงแล้วแปลงกลับเป็นโค้ด React
  • ส่วนที่น่าสนใจ
    • มี React parser ในตัวที่ช่วยวิเคราะห์สไตล์ แทรกสไตล์ และ serialize ออกมาเป็นโค้ด
    • มี React preprocessor ที่แปลงองค์ประกอบ DOM ให้เป็นโค้ดที่เกี่ยวข้องด้วย
    • parse/inject CSS และแปลงเป็น Tailwind
    • ทำงานเป็นแอป Electron เพื่อสื่อสารข้อความกับแอป Node

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

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

 
GN⁺ 2024-07-09
ความคิดเห็นจาก Hacker News
  • หากผสานรวมกับ Microsoft PCF และเครื่องมือ build ได้ ก็ยินดีจ่ายในราคาสูง
  • ไม่แน่ใจว่า 'components' หมายถึงอะไร แต่ถ้าสามารถนำ React component เข้ามาในเอดิเตอร์และให้ดีไซเนอร์แบบ WYSIWYG แก้ไข props ได้ ก็น่าจะมีประโยชน์มาก
  • โหมดออกแบบ/พัฒนาไม่สอดคล้องกับวิธีทำงานจริงของทีม
    • นักพัฒนาทำงานด้านดีไซน์มากกว่าที่คิด
    • ดีไซเนอร์รับผิดชอบส่วนที่ซับซ้อน และนักพัฒนารับผิดชอบดีไซน์ที่เรียบง่าย
    • navigation และ routing อาจซับซ้อน ทำให้นักพัฒนามักเป็นคนจัดการ layout ของหน้าจอ
    • design system ถูกนำไปทำเป็น component และมีการแก้ไขจากปัญหาด้านการใช้งานหรือดีไซน์เพิ่มเติม
    • ดีไซเนอร์ต้องการประกอบ component กลับเป็น section และหน้าจออีกครั้ง
    • ดีไซเนอร์ต้องการตั้งค่า props เช่น รูปภาพ ข้อความ และ ID และอยากให้ development component ซิงก์อัตโนมัติ
  • ดูเหมือนว่าจะสร้างสมดุลระหว่างการพัฒนาและการออกแบบได้ดี
  • การมีทั้งโอเพนซอร์สและโฮสติ้งแบบเสียเงินเป็นแนวทางที่ดี
  • โปรเจกต์นี้น่าจับตา
  • ฟีเจอร์ที่แสดงโค้ดและ diff พร้อมให้เขียนใหม่ได้เองน่าจะมีประโยชน์มาก
  • ในฐานะผู้ใช้ AOLPress รู้สึกแปลกใจที่ในปี 2024 ยังไม่มีเครื่องมือ WYSIWYG มากกว่านี้ แต่ก็เข้าใจว่าทำไมงานออกแบบถึงยาก
  • เครื่องมือส่วนใหญ่มักพยายามจับทั้งนักพัฒนาและดีไซเนอร์เป็นกลุ่มเป้าหมาย แต่สุดท้ายทำได้ไม่ดีทั้งสองฝั่ง
  • คุณภาพของโค้ดที่สร้างขึ้นและความสามารถในการบำรุงรักษาก็เป็นปัญหาเช่นกัน
  • ขอบคุณที่ทำโปรเจกต์นี้เป็นโอเพนซอร์ส
  • มีคำถามเพิ่มเติมเล็กน้อย:
    • มีแผนสร้างรายได้หรือไม่ และถ้ามี มีไอเดียอย่างไรบ้าง
    • ภาพใหญ่ของ Studio คืออะไร จะโฟกัสแค่การแก้ไขสไตล์ หรือมีแผนจะให้ทุกอย่างที่จำเป็นสำหรับการสร้างเว็บไซต์
  • ต้องการ visual editor แบบ Webflow แต่ไม่ต้องการ BS และนโยบายราคาที่ก้าวร้าว
  • ต้องการเครื่องมือที่สร้าง HTML, CSS, JS แบบเรียบง่าย และให้ใครก็ได้ในบริษัทแก้ไขหน้าหรือสร้างหน้าใหม่ได้
  • อยากรู้ว่าใช้เครื่องมืออะไรทำแอนิเมชัน
  • แนวทางที่ใช้ React parser เพื่อแทรกสไตล์แล้ว serialize กลับเป็นโค้ดอีกครั้งนั้นน่าสนใจ
  • สงสัยว่าทำไมถึงเขียนใหม่ด้วย Svelte แทน React
  • คิดว่าโมเดลการประกอบ UI ของ Webflow เป็นจุดตัดที่ดีระหว่างความเรียบง่ายกับการปรับแต่งได้
  • Webflow แพง และไม่ชอบที่ต้องให้โปรเจกต์อยู่ภายใต้การควบคุมของพวกเขา
  • CTA ที่เขียนว่า "คุยกับผู้ก่อตั้ง" อาจทำให้สับสนได้
    • น่าจะเปลี่ยนเป็นข้อความที่สื่อคุณค่าต่อผู้ใช้ เช่น "จองเดโม"
  • Webflow เป็นแอป SaaS แต่แอปนี้ต้องมีการโฮสต์
    • ผู้ใช้ที่ไม่ใช่สายเทคนิคอาจไม่รู้วิธีโฮสต์
    • นักพัฒนาต้องคำนึงถึงเวลาในการโฮสต์และบำรุงรักษา
    • ควรเปิดเป็นโอเพนซอร์ส และมีเวอร์ชันโฮสต์ให้บริการด้วย