- Vercel ซึ่งเป็นบริษัทที่มีเว็บเป็นศูนย์กลาง ทดลองทั้งหลายเทคสแตกและรูปแบบ UI โดยตั้งเป้าสร้าง ประสบการณ์เนทีฟระดับ Apple Design Award ก่อนจะลงตัวด้วยชุด React Native + Expo
- แกนหลักคือ ประสบการณ์การสร้างงานผ่านแชต AI ที่เพียงจดไอเดียเหมือนเขียนโน้ตแล้วระบบจะสร้างให้ในเบื้องหลัง โดยออกแบบตั้งแต่แอนิเมชันข้อความ การเลื่อน คีย์บอร์ด ไปจนถึงคอมโพสเซอร์แบบ Liquid Glass อย่างละเอียด เพื่อให้ได้ อินเทอร์แอ็กชันแชตระดับเนทีฟบน iOS
- ในการทำแชต ใช้การผสาน context และ hooks บนพื้นฐานของ LegendList, Reanimated, react-native-keyboard-controller รวมถึงการคำนวณ
blankSize และ contentInset และการเชื่อมกับความสูงของ composer เพื่อจัดการ ความสูงแบบไดนามิกและการเปลี่ยนแปลงของคีย์บอร์ด ได้อย่างลื่นไหล
- โครงสร้างโค้ดมีจุดเด่นที่แชร์ type, business logic และ API layer ระหว่างเว็บกับเนทีฟ และออกแบบให้ทั้งเว็บ v0 และลูกค้า v0 Platform API ใช้ endpoint เดียวกันผ่านโฟลว์ OpenAPI schema ที่อิง Zod → Hey API → Tanstack Query
ภาพรวมและเป้าหมายของแอป v0 บน iOS
- Vercel เปิดตัว v0 for iOS ซึ่งเป็นแอปมือถือแอปแรกของบริษัท และแม้จะเป็นองค์กรที่เน้นเว็บเป็นหลัก ก็ยังตั้งเป้าสร้าง ประสบการณ์เนทีฟคุณภาพสูง ในระดับ Apple Design Award
- ก่อนเปิดตัวแอป iOS บริษัทโฟกัสกับเว็บมาโดยตลอด ดังนั้น การพัฒนาแอปเนทีฟเต็มรูปแบบจึงเป็นพื้นที่ใหม่
- เพื่อไปให้ถึงเป้าหมายนี้ ก่อนเปิด public beta จึงทดลองหลายสิบเวอร์ชันด้วย เทคสแตกและรูปแบบ UI ที่แตกต่างกัน
- ฝั่งงานอ้างอิงได้รับแรงบันดาลใจจากแอปอย่าง Apple Notes และ iMessage ที่ ใช้ภาษาการออกแบบของ iPhone ได้อย่างดี และต้องการคุณภาพในระดับที่วางอยู่ร่วมกับแอปอื่นบนหน้าจอหลักได้อย่างไม่ขัดเขิน
- บริษัทอธิบายว่าไม่ได้ยึดติดกับเฟรมเวิร์กใดเฟรมเวิร์กหนึ่ง แต่ ลงมือทำและเปรียบเทียบหลายสแตกจริง ก่อนสรุปผล
- หลังการทดลองหลายแบบ สุดท้ายเลือก React Native + Expo และต่อมาก็ได้รับฟีดแบ็กจากนักพัฒนาจำนวนมากว่า ให้ความรู้สึกเหมือนแอปเนทีฟ จึงตัดสินใจเปิดเผยรายละเอียดเชิงเทคนิคของโครงสร้างนี้
ทิศทางของประสบการณ์แชตใน v0
- v0 iOS ตั้งเป้าเป็นเครื่องมือที่ช่วยเปลี่ยน ไอเดียที่เกิดขึ้นตอนอยู่ห่างจากคอมพิวเตอร์ให้กลายเป็นสิ่งที่นำไปใช้งานได้ทันที และวางตำแหน่งตัวเองเป็น วิวัฒนาการขั้นถัดไปของแอปจดโน้ต
- แทนที่จะย้าย mobile IDE หรือฟังก์ชันทั้งหมดจากเว็บมาไว้บนมือถือ บริษัทเลือกให้ความสำคัญกับ ประสบการณ์เรียบง่ายและสนุกในการสร้างบางสิ่งด้วย AI ระหว่างเดินทาง
- หัวใจของประสบการณ์นี้คือ อินเทอร์เฟซแชต โดยกำหนดข้อกำหนดไว้ดังนี้
- ข้อความใหม่ต้องปรากฏด้วย แอนิเมชันที่ลื่นไหล
- ข้อความใหม่จากผู้ใช้ต้อง เลื่อนขึ้นไปให้มองเห็นถึงด้านบนของหน้าจอ
- ข้อความของผู้ช่วยต้องแสดงแบบสตรีม พร้อม เฟดอินเป็นจังหวะขั้นบันได (streaming + delay)
- ช่องป้อนข้อความ (composer) ต้องลอยอยู่ในสไตล์ Liquid Glass และลอยทับอยู่เหนือคอนเทนต์ที่เลื่อนได้
- เมื่อเปิดแชตเดิม ต้องเริ่มในสถานะที่ เลื่อนไปถึงข้อความล่าสุดแล้ว
- การทำงานของคีย์บอร์ดต้อง เป็นธรรมชาติและใกล้เคียงเนทีฟ
- การป้อนข้อความต้องรองรับ การวางรูปภาพและไฟล์ รวมถึง โฟกัส/เบลอด้วย pan gesture
- การเรนเดอร์ Markdown ต้องรวดเร็วและรองรับ คอมโพเนนต์แบบไดนามิก
- แม้บนมือถือจะมีแพตเทิร์น UI สำหรับ AI แชตอยู่มาก แต่ยังไม่มี แพตเทิร์นมือถือสำหรับการสร้างโค้ดด้วย AI โดยตรง จึงต้อง ออกแบบแพตเทิร์นใหม่เอง และต้องใช้เวลามากกับการทำงาน ทดสอบ และปรับจูนให้ผ่านเกณฑ์ที่ตั้งไว้
การออกแบบโครงสร้างแชตแบบ composable
- เพื่อให้ตอบโจทย์ข้อกำหนดของแชต โค้ดแชตถูกออกแบบให้ ประกอบรวมตามหน้าที่ได้ (composable)
- เพื่อสิ่งนี้ จึงสร้าง Context Provider หลายตัว มาครอบแชตทั้งหมด แล้ววางรายการข้อความไว้ภายใน
- การทำแชตใช้ ไลบรารีโอเพนซอร์ส ต่อไปนี้
- LegendList: เรนเดอร์ลิสต์ประสิทธิภาพสูง
- React Native Reanimated: แอนิเมชันและ shared value
- react-native-keyboard-controller: ควบคุมสถานะคีย์บอร์ดและจัดการอีเวนต์
- การเรนเดอร์ข้อความแต่ละรายการจะแยกตาม
item.role เป็น user / assistant / optimistic-placeholder และใช้คอมโพเนนต์ต่างกันตามบทบาท
การทำแอนิเมชันข้อความ
- ข้อความแรกของผู้ใช้ใช้ Reanimated shared value เพื่อทำเฟดอินอย่างลื่นไหล
- hook
useFirstMessageAnimation จะคำนวณความสูงของข้อความ ความสูงหน้าจอ และความสูงคีย์บอร์ดเพื่อควบคุม translateY และ opacity
- ข้อความแรกของผู้ช่วยจะ เฟดอินแบบมีดีเลย์ หลังจากแอนิเมชันของข้อความผู้ใช้เสร็จสิ้น
- ในแชตเดิม ใช้
scrollToEnd() และการปรับ contentInset เพื่อจัดวางข้อความใหม่ให้ขึ้นมาอยู่ด้านบนของหน้าจออย่างเป็นธรรมชาติ
การควบคุมการเลื่อนและคีย์บอร์ด
- คุณภาพของประสบการณ์แชตขึ้นอยู่มากกับ ความเป็นธรรมชาติของการทำงานของคีย์บอร์ด และใน React Native การทำให้คีย์บอร์ด ให้ความรู้สึกใกล้เคียงเนทีฟ นั้นค่อนข้างยาก
- เนื่องจากมีความแตกต่างระหว่างเวอร์ชันของ iOS จึงเกิดปัญหา พฤติกรรมคีย์บอร์ดไม่เสถียร
จึงร่วมมือกับผู้ดูแล react-native-keyboard-controller เพื่อ แก้บั๊กและปรับปรุงประสิทธิภาพ
- ใช้ hook
useKeyboardAwareMessageList เพื่อควบคุมอีเวนต์การเปิด ปิด และลากคีย์บอร์ดอย่างละเอียด
- เมื่อต้องเปิดแชตเดิม ใช้การเรียก
scrollToEnd หลายครั้งเพื่อ แก้ปัญหาความสูงแบบไดนามิก และปรับตำแหน่งเลื่อนอัตโนมัติให้เหมาะสม
Liquid Glass Floating Composer และการปรับปรุงช่องป้อนข้อความ
- นำเอฟเฟกต์ Liquid Glass ของ iMessage มาใช้เพื่อสร้าง ช่องป้อนข้อความแบบโปร่งแสงและลอยตัว
- ใช้
KeyboardStickyView และ shared value ของ composerHeight เพื่อปรับ contentInset ของ scroll view แบบเรียลไทม์
- เมื่อความสูงของช่องป้อนข้อความเปลี่ยน ใช้ hook
useScrollWhenComposerSizeUpdates เพื่อรักษาการเลื่อนอัตโนมัติไว้
- เพื่อแก้ปัญหา bounce ของการเลื่อนและการแสดงตัวบ่งชี้ใน
TextInput พื้นฐาน จึงใช้ native patch ของ RCTUITextView
- และปรับปรุงให้สามารถโฟกัสคีย์บอร์ดได้ด้วย swipe gesture
การวางรูปภาพและการเฟดอินของคอนเทนต์แบบสตรีม
- ผ่าน Expo module สามารถตรวจจับอีเวนต์จาก
UIPasteboard และรองรับการวางข้อความ รูปภาพ และไฟล์
- ใช้คอมโพเนนต์ FadeInStaggeredIfStreaming เพื่อทำ เฟดอินระดับคำของข้อความตอบกลับจาก AI
- มีการจัดการ animation pool เพื่อ จำกัดจำนวนแอนิเมชันที่ทำพร้อมกันและเพิ่มประสิทธิภาพ
- คอนเทนต์ที่ผู้ใช้เคยเห็นแล้วจะป้องกันการแอนิเมตซ้ำด้วย
DisableFadeProvider
การแชร์โค้ดระหว่างเว็บและเนทีฟ และ Platform API
- แชร์ type และ helper function ระหว่างเว็บกับมือถือ แต่แยกส่วน UI และการจัดการสถานะออกจากกัน
- สร้าง เฟรมเวิร์ก API แบบ type-safe ที่อิง Zod และสร้าง OpenAPI spec ได้อัตโนมัติ
- แอปมือถือเรียก API ผ่าน Hey API + Tanstack Query
- บนโครงสร้างนี้เอง บริษัทได้เปิดตัว v0 Platform API และให้บริการ endpoint เดียวกันกับนักพัฒนาภายนอก
สไตลิงและคอมโพเนนต์เนทีฟ
- ใช้ react-native-unistyles สำหรับจัดการธีม และรองรับการสไตลิงที่รวดเร็วโดยไม่ต้องเข้าถึง Context
- ใช้ Zeego เพื่อสร้างเมนูบนพื้นฐาน
UIMenu แบบเนทีฟของ iOS
- แก้ปัญหา ตำแหน่ง Alert ผิดพลาด ที่เกิดใน iOS 26 และส่ง patch upstream ให้ React Native
- ยังแก้ปัญหาการลากและอาการกะพริบของ modal (formSheet) โดยร่วมมือกับ Callstack, Meta และ Expo เพื่อ รวมการแก้ไขไว้ใน React Native 0.82
แผนต่อไปและการทำงานร่วมกับคอมมูนิตี้
- หลังจากสร้างแอปแรกเสร็จด้วยชุด React Native + Expo บริษัทระบุว่า โปรเจ็กต์ในอนาคตก็จะใช้สแตกเดียวกันต่อไป และพอใจกับสแตกปัจจุบัน
- Vercel ระบุว่ากำลังมุ่งเน้นการสร้าง ผลิตภัณฑ์ที่มีความทะเยอทะยานในระดับคุณภาพสูง และ
- มีแผนจะเปิดซอร์ส องค์ความรู้ภายในที่สร้างขึ้น เพื่อช่วยให้นักพัฒนาเว็บและเนทีฟสร้างผลิตภัณฑ์ระดับเดียวกันได้
- โดยเฉพาะอย่างยิ่ง บริษัทกำลังมองหาคอมมูนิตี้เพื่อร่วมทดสอบเบต้า ไลบรารีโอเพนซอร์สสำหรับแอป AI แชต และจะเดินหน้ามีส่วนร่วมพัฒนา React Native ต่อไป
ยังไม่มีความคิดเห็น