विज़ुअल कंटेंट या टेम्प्लेट बिल्डर बनाने वाले प्रत्येक डेवलपर को एक ही कठिन चौराहे का सामना करना पड़ता है: क्या हम स्क्रैच से कोर एडिटर इंफ्रास्ट्रक्चर का निर्माण करते हैं, या क्या हम दिग्गजों के कंधों पर खड़े हैं? कंपोज़िट का निर्माण करते समय, सटीक पीडीएफ पीढ़ी के लिए डिज़ाइन किया गया अगली पीढ़ी का टेम्पलेट बिल्डर, हमने बाद वाले को चुना। अपने स्टैक को लंगर grapesjs-shadcnडालकर, हमने महीनों के थकाऊ आधारभूत विकास को दरकिनार कर दिया।
यहां पर्दे के पीछे एक नज़र है कि हमने क्या छोड़ा, जहां हमने अपने इंजीनियरिंग घंटों को फिर से निवेश किया, और इसके परिणामस्वरूप एक तेज़, अधिक प्रदर्शन करने वाला अनुप्रयोग कैसे हुआ।
हमें क्या नहीं बनाना था (आउट-ऑफ-द-बॉक्स जीतता है)
मूलभूत यूआई घटकों को वायरफ्रेमिंग और डिबगिंग में सप्ताह बिताने के बजाय, grapesjs-shadcn हमें पहले दिन एक मजबूत, उत्पादन-तैयार कोर सौंप दिया। हमने इसके कार्यान्वयन को पूरी तरह से छोड़ दिया:
कोर एडिटर यूआई: टेक्स्ट हेरफेर, परिसंपत्ति प्रबंधन तौर-तरीकों और लेयर ट्रीज़ के लिए रिच टेक्स्ट एडिटर्स (आरटीई)।
शैली और विशेषता यांत्रिकी: सीएसएस कक्षाओं, लक्षणों, विशेषताओं और वैश्विक शैली नियमों के लिए जटिल प्रबंधक।
संरचना और पुन: प्रयोज्यता: ब्लॉक, पुन: प्रयोज्य प्रतीकों और बहु-पृष्ठ रूटिंग के लिए अंतर्निहित समर्थन।
इन भारी वास्तुशिल्प लिफ्टों को अपनी प्लेट से हटाकर, हमें पहिये को फिर से आविष्कार करने की आवश्यकता नहीं पड़ी। इसके बजाय, हमने अपनी 100% ऊर्जा पीडीएफ टेम्पलेट निर्माण की अद्वितीय, उच्च-मूल्य वाली चुनौतियों को हल करने की दिशा में निर्देशित की।
जहां हमने अपना समय फिर से निवेश किया
बेसलाइन आर्किटेक्चर हल होने के साथ, हमने अपना ध्यान Composeit के मूल मूल्य प्रस्ताव को पूरा करने पर केंद्रित किया: पूर्ण लेआउट परिशुद्धता और शक्तिशाली डेटा एकीकरण।
1. पिक्सेल-परफेक्ट कैनवास लाइव एडिटिंग
पीडीएफ कुख्यात रूप से बारीक होते हैं - जो आप वेब कैनवास पर देखते हैं वह शायद ही कभी मुद्रित पृष्ठ आकार में पूरी तरह से अनुवाद करता है। हमने लाइव कैनवास को अंतिम आउटपुट इंजन के लिए सटीक बनाने के लिए अतिरिक्त विकास समय का उपयोग किया।
वैश्विक और अनुभागीय पृष्ठ नियंत्रण: हमने एक वास्तुशिल्प लेआउट प्रणाली बनाई है जहां उपयोगकर्ता प्रोजेक्ट-वाइड पेज सेटिंग्स को परिभाषित कर सकते हैं, जबकि अभी भी स्वतंत्र अनुभागों को एक ही दस्तावेज़ के भीतर अलग-अलग पृष्ठ आकार और अभिविन्यास की अनुमति दे सकते हैं।
2. उच्च-प्रदर्शन डेटास्रोत और टोकन मैपिंग
खरोंच से सशर्त स्वरूपण के लिए एक स्कीमा विज़ुअलाइज़र और एक सार सिंटैक्स ट्री (एएसटी) का निर्माण एक कुख्यात समय-सिंक है, खासकर जब कई पुस्तकालयों को एकीकृत किया जाता है। grapesjs-shadcn स्कीमा और सशर्त तर्क प्रबंधन के लिए एक अंतर्निहित यूआई की सुविधा है, जो पहले से ही कई पुस्तकालयों को संभालने और उनके बीच डेटा पास करने के बोझ को पूरी तरह से हटाकर प्रदान grapesjs किए गए एपीआई के शीर्ष पर बनाया गया है।
इससे भी महत्वपूर्ण बात यह है कि यह बड़े पैमाने पर प्रदर्शन को बढ़ावा देता है:
घटना-संचालित लाभ: वैश्विक स्कीमा परिवर्तनों को सुनने के लिए भारी React
useEffectहुक पर भरोसा करने के बजाय (जो स्कीमा और टेम्पलेट दोनों के बढ़ने के रूप में प्रदर्शन को नीचे खींचता है), हमने सीधे GrapesJS के मूल ईवेंट एमिटर में झुका दिया।हम सीधे टोकन-विशिष्ट घटनाओं को सुनते हैं, हल्के, अलग-थलग लाइव अपडेट को तभी ट्रिगर करते हैं जब एक सटीक टोकन बदलता है। इस आर्किटेक्चर ने जटिल बैकएंड डेटा को सीधे UI लक्षणों और शैलियों के लिए अविश्वसनीय रूप से सरल बना दिया।
ईजेएस के साथ सुपरचार्जिंग कॉम्प्लेक्स लॉजिक
हमारे उपयोगकर्ताओं को उनके दस्तावेज़ों पर एंटरप्राइज़-ग्रेड नियंत्रण देने के लिए, हमें भारी नेस्टेड लूप और उन्नत डेटा स्वरूपण का समर्थन करने की आवश्यकता थी। हमने अपने अंतर्निहित सिंटैक्स इंजन के रूप में ईजेएस (एम्बेडेड JavaScript टेम्प्लेट) का उपयोग करने का विकल्प चुना।
संग्रह, स्थितियों और चर के लिए डेटा रिज़ॉल्वर को ईजेएस में परिवर्तित करना जटिल लगता है, डेटा रिज़ॉल्वर के grapesjs संरचित डिज़ाइन ने इसे उल्लेखनीय रूप से अनुमानित बना दिया। क्योंकि डेटा आकार निश्चित हैं, उन्हें ईजेएस टेम्पलेट्स में मैप करना निर्बाध था।
इस एकीकरण ने हमें प्रीमियम डेटा हेरफेर सुविधाओं को बॉक्स से बाहर शिप करने की अनुमति दी:
चर के लिए: अंतर्निहित डेटा एकत्रीकरण और कस्टम स्वरूपण।
लूप्स के लिए: उन्नत छँटाई और दानेदार फ़िल्टरिंग तंत्र सीधे विज़ुअल बिल्डर के भीतर।
स्मार्ट बिल्डिंग, तेज़ डिलीवरी
सही नींव चुनने से न केवल हमारा समय बचाया - इसने हमें कुछ नया करने की अनुमति दी। हमारे मुख्य बुनियादी ढांचे के ठोस होने के साथ, हमारे पास उपयोगकर्ताओं को तुरंत लेआउट बनाने में मदद करने के लिए एआई-सहायता प्राप्त बिल्डिंग सुविधाओं को डिजाइन और कार्यान्वित करने के लिए बैंडविड्थ भी था। (आप हमारे एआई एकीकरण के बारे में सब कुछ हमारे समर्पित डीप-डाइव ब्लॉग पोस्ट में पढ़ सकते हैं!)
हमें इस बात पर अविश्वसनीय रूप से गर्व है कि कंपोज़िट कितना दुबला, प्रदर्शनकारी और शक्तिशाली हो गया है, और हम चाहते हैं कि आप इसे प्रत्यक्ष रूप से अनुभव करें।
Composeit के साथ शुरुआत करें
इसे कार्रवाई में देखें: देखें कि हम composeit.app पर क्या बना रहे हैं।
प्रीसेट पकड़ो: अपना खुद का निर्माण करने के लिए तैयार हैं? यहां प्रीसेट खरीदें।
अनुकूलन की आवश्यकता है? यदि आपको इस सेटअप को अपने विशिष्ट वर्कफ़्लो के अनुरूप बनाने में सहायता की आवश्यकता है, तो आज ही हमसे संपर्क करें—हमें इसे अनुकूलित करने में आपकी सहायता करने में खुशी होगी।