- वेब-केंद्रित कंपनी Vercel ने Apple Design Award-स्तर के native experience को लक्ष्य बनाकर कई tech stack और UI pattern पर प्रयोग किए, और अंततः React Native + Expo संयोजन के साथ इसे पूरा किया
- इसका मुख्य तत्व एक AI chat-आधारित creation experience है, जिसमें आप memo की तरह ideas लिखते हैं और वे बैकग्राउंड में बनते जाते हैं। message animation, scroll, keyboard, और Liquid Glass composer तक को बारीकी से डिज़ाइन करके iOS native-स्तर का chat interaction हासिल किया गया
- chat implementation में LegendList, Reanimated, react-native-keyboard-controller पर आधारित context और hook के संयोजन,
blankSize और contentInset की गणना, composer height linkage आदि के ज़रिए dynamic height और keyboard बदलावों को स्मूद तरीके से संभाला गया
- code structure की खासियत यह है कि web और native के बीच type, business logic, और API layer साझा किए गए, और Zod-आधारित OpenAPI schema → Hey API → Tanstack Query flow के माध्यम से v0 web और v0 Platform API ग्राहकों को एक ही endpoint इस्तेमाल करने के लिए डिज़ाइन किया गया
v0 iOS ऐप का अवलोकन और लक्ष्य
- Vercel ने अपना पहला mobile app v0 for iOS जारी करते हुए, वेब-केंद्रित कंपनी होने के बावजूद Apple Design Award को ध्यान में रखकर high-quality native experience बनाना लक्ष्य रखा
- iOS app लॉन्च से पहले तक कंपनी का फोकस web पर था, इसलिए पूरी तरह native app development एक नया क्षेत्र था
- इसके लिए public beta से पहले कई अलग-अलग tech stack और UI pattern के साथ दर्जनों versions पर प्रयोग किए गए
- reference के तौर पर Apple Notes, iMessage जैसे ऐसे apps से प्रेरणा ली गई जो iPhone की भाषा को अच्छी तरह इस्तेमाल करते हैं, और लक्ष्य था ऐसा polish हासिल करना कि ऐप home screen पर दूसरी apps के बीच अपनी जगह बना सके
- उन्होंने बताया कि किसी एक framework पर अटकने के बजाय, कई stacks को वास्तव में implement और compare करने के बाद निष्कर्ष निकाला गया
- कई प्रयोगों के बाद अंततः React Native + Expo चुना गया, और डेवलपर्स से बड़ी मात्रा में यह feedback मिला कि ऐप native app जैसा महसूस होता है। इसी वजह से इसकी विस्तृत तकनीकी संरचना साझा की गई
v0 chat experience की दिशा
- v0 iOS का लक्ष्य है “कंप्यूटर से दूर होने पर अचानक आए idea को तुरंत executable चीज़ में बदलने का tool” बनना, और यह खुद को notes app की अगली पीढ़ी के रूप में देखता है
- web जैसा mobile IDE या पूरी functionality लाने के बजाय, प्राथमिकता थी चलते-फिरते AI के साथ कुछ बनाने का आसान और आनंददायक अनुभव
- इस अनुभव का केंद्र chat interface है, जिसके लिए निम्नलिखित आवश्यकताएँ तय की गईं
- नया message स्मूद animation के साथ दिखाई दे
- नया user message screen के top तक scroll होकर दिखे
- assistant message streaming के दौरान staggered fade-in (streaming + delay) के साथ दिखे
- input box (composer) Liquid Glass style में floating हो और scroll होने वाले content के ऊपर रहे
- existing chat खोलने पर शुरुआत last message तक scrolled अवस्था से हो
- keyboard behavior natural और native के करीब लगे
- text input में image और file paste तथा pan gesture focus/blur का समर्थन हो
- Markdown rendering तेज़ हो और dynamic component भी support करे
- mobile पर AI chat UI pattern भले कई हों, लेकिन AI code generation के लिए mobile pattern लगभग नहीं थे, इसलिए नया pattern खुद डिज़ाइन करना पड़ा, और इसे मानक के अनुरूप लाने के लिए काफी काम, testing और tuning की ज़रूरत पड़ी
composable chat structure की डिज़ाइन
- chat आवश्यकताओं को पूरा करने के लिए chat code को feature के हिसाब से composable बनाया गया
- इसके लिए पूरे chat को wrap करने वाले कई Context Provider बनाए गए और message list को इनके भीतर रखा गया
- chat implementation में निम्न open source library इस्तेमाल की गईं
- LegendList: high-performance list rendering
- React Native Reanimated: animation और shared value
- react-native-keyboard-controller: keyboard state control और event handling
- हर message rendering को
item.role के आधार पर user / assistant / optimistic-placeholder में विभाजित किया गया, ताकि हर role के लिए अलग component इस्तेमाल हो
message animation implementation
- पहला user message Reanimated shared value का उपयोग करके स्मूद fade-in के साथ दिखाया जाता है
useFirstMessageAnimation hook message height, screen height, और keyboard height की गणना करके translateY और opacity को नियंत्रित करता है
- पहला assistant message user message animation पूरा होने के बाद delay fade-in के साथ आता है
- existing chat में
scrollToEnd() और contentInset adjustment के ज़रिए नए message को screen के top पर स्वाभाविक रूप से रखा जाता है
scroll और keyboard control
- chat experience की quality काफी हद तक keyboard behavior की natural feel पर निर्भर करती है, और React Native में native के करीब keyboard feel बनाना काफी कठिन था
- iOS version के हिसाब से अंतर होने के कारण keyboard behavior instability की समस्या आई,
react-native-keyboard-controller के maintainer के साथ मिलकर bug fix और performance improvement किए गए
useKeyboardAwareMessageList hook के ज़रिए keyboard open, close और drag events को बारीकी से नियंत्रित किया गया- existing chat खोलते समय auto scroll position adjustment के लिए
scrollToEnd को कई बार कॉल कर dynamic height समस्या हल की गई
Liquid Glass floating composer और input box में सुधार
- iMessage के Liquid Glass effect को लागू कर semi-transparent, floating input box बनाया गया
KeyboardStickyView और composerHeight shared value के ज़रिए scroll view के contentInset को real time में adjust किया गया
- input box की height बदलने पर auto scroll बनाए रखने के लिए
useScrollWhenComposerSizeUpdates hook का उपयोग किया गया
- default
TextInput में scroll bounce और indicator दिखने की समस्या हल करने के लिए RCTUITextView native patch लागू किया गया
- swipe gesture से keyboard focus संभव हो, इसके लिए भी सुधार किए गए
image paste और streaming content fade-in
- Expo module के माध्यम से
UIPasteboard event detect कर text, image, और file paste का समर्थन दिया गया
- FadeInStaggeredIfStreaming component का उपयोग कर AI response text के word-level fade-in को लागू किया गया
- animation pool management के ज़रिए simultaneous animation की संख्या सीमित कर performance optimize की गई
- पहले से देखे जा चुके content में
DisableFadeProvider के ज़रिए दोबारा animation रोका गया
web और native के बीच code sharing और Platform API
- web और mobile के बीच type और helper function साझा किए गए, जबकि UI और state management अलग रखे गए
- Zod-आधारित type-safe API framework बनाया गया, जो OpenAPI spec को अपने-आप generate करता है
- mobile app में Hey API + Tanstack Query के साथ API calls की जाती हैं
- इसी संरचना के आधार पर v0 Platform API जारी किया गया, ताकि वही endpoints बाहरी developers को भी उपलब्ध कराए जा सकें
styling और native component
- react-native-unistyles के साथ theme management किया गया, जिससे Context access के बिना तेज़ styling संभव हुई
- Zeego के ज़रिए iOS native
UIMenu-आधारित menu लागू किए गए
- iOS 26 में आने वाली Alert position error को ठीक किया गया और React Native में patch upstream contribute किया गया
- modal(formSheet) से जुड़ी drag और flickering समस्याएँ ठीक की गईं, और Callstack, Meta, Expo के साथ सहयोग कर इन्हें React Native 0.82 में शामिल कराया गया
आगे की योजना और community सहयोग
- React Native + Expo संयोजन के साथ पहला app पूरा करने के बाद, भविष्य की projects में भी यही stack बनाए रखने की योजना है। कंपनी मौजूदा stack से संतुष्ट है
- Vercel का फोकस ambitious product को high standard पर implement करने पर है,
- और उसने कहा कि web और native developers को समान स्तर के product बनाने में मदद देने के लिए अंदर विकसित की गई जानकारी और tools को open source किया जाएगा
- खास तौर पर AI chat app के लिए open source library की beta testing में community को शामिल करने की तैयारी है, और React Native में योगदान जारी रहेगा
अभी कोई टिप्पणी नहीं है.