CSS-in-JS के ट्रेडऑफ़्स

आर्टेम बाली द्वारा फोटो

हाल ही में मैंने सीएसएस-इन-जेएस का एक उच्च स्तरीय अवलोकन लिखा था, ज्यादातर समस्याओं के बारे में बात कर रहा है जो इस दृष्टिकोण को हल करने की कोशिश कर रहा है। लाइब्रेरी लेखक शायद ही कभी अपने समाधान के ट्रेडऑफ का वर्णन करने में निवेश करते हैं। कभी-कभी ऐसा इसलिए होता है क्योंकि वे बहुत पक्षपाती होते हैं, और कभी-कभी वे यह नहीं जानते कि उपयोगकर्ता उपकरण कैसे लागू करते हैं। इसलिए यह अब तक मैंने देखे गए ट्रेडऑफ का वर्णन करने का एक प्रयास है। मुझे लगता है कि यह उल्लेख करना महत्वपूर्ण है कि मैं जेएसएस का लेखक हूं, इसलिए मुझे पक्षपाती माना जाना चाहिए।

सामाजिक प्रभाव

ऐसे लोगों की एक परत है जो वेब प्लेटफॉर्म पर काम करते हैं और किसी भी जावास्क्रिप्ट को नहीं जानते हैं। उन लोगों को HTML और CSS लिखने के लिए भुगतान किया जा रहा है। CSS-in-JS ने डेवलपर्स के वर्कफ़्लो पर भारी प्रभाव डाला है। कुछ लोगों को पीछे छोड़े बिना वास्तव में परिवर्तनकारी परिवर्तन कभी नहीं किया जा सकता है। मुझे नहीं पता कि सीएसएस-इन-जेएस का एकमात्र तरीका है, लेकिन बड़े पैमाने पर गोद लेना आधुनिक अनुप्रयोगों में सीएसएस का उपयोग करने के साथ समस्याओं का एक स्पष्ट संकेत है।

समस्या का एक बड़ा हिस्सा हमारे उपयोग के मामलों को सही ढंग से संवाद करने में असमर्थता है जहां सीएसएस-इन-जेएस चमकता है और एक कार्य के लिए इसे ठीक से कैसे उपयोग किया जाए। कई सीएसएस-इन-जेएस उत्साही तकनीक को बढ़ावा देने में सफल रहे हैं, लेकिन कई आलोचकों ने टूल में सस्ते झूलों के बिना, रचनात्मक तरीके से ट्रेडऑफ के बारे में बात नहीं की। परिणामस्वरूप, हमने कई ट्रेडऑफ्स को छिपा दिया और स्पष्टीकरण और वर्कआर्डर्स प्रदान करने के लिए एक मजबूत प्रयास नहीं किया।

सीएसएस-इन-जेएस जटिल उपयोग के मामलों को संभालने के लिए आसान बनाने का एक प्रयास है, इसलिए इसे उस जगह न धकेलें जहां इसकी आवश्यकता नहीं है!

रनटाइम लागत

जब ब्राउज़र में सीएसएस जावास्क्रिप्ट से उत्पन्न होता है, तो ब्राउज़र में एक अंतर्निहित ओवरहेड होता है। रनटाइम ओवरहेड लाइब्रेरी से लाइब्रेरी में भिन्न होता है। यह एक अच्छा सामान्य मानदंड है, लेकिन अपने स्वयं के परीक्षण सुनिश्चित करें। रनटाइम के प्रमुख अंतर टेम्प्लेट स्ट्रिंग्स की एक पूर्ण सीएसएस पार्सिंग, अनुकूलन की मात्रा, गतिशील शैली कार्यान्वयन विवरण, हैशिंग एल्गोरिथ्म और फ्रेमवर्क इंटीग्रेशन कॉस्ट की आवश्यकता पर निर्भर करते हैं। *

संभावित रनटाइम ओवरहेड के अलावा, आपको 4 अलग-अलग बंडलिंग रणनीतियों पर विचार करने की आवश्यकता है, क्योंकि कुछ CSS-in-JS लाइब्रेरीज़ कई रणनीतियों का समर्थन करती हैं और उन्हें लागू करना उपयोगकर्ता पर निर्भर है। *

रणनीति 1: केवल रनटाइम पीढ़ी

रनटाइम सीएसएस पीढ़ी एक तकनीक है जो जावास्क्रिप्ट में सीएसएस स्ट्रिंग उत्पन्न करती है और फिर दस्तावेज़ में एक शैली टैग का उपयोग करके उस स्ट्रिंग को इंजेक्ट करती है। यह तकनीक स्टाइल शीट का उत्पादन करती है, इनलाइन शैलियों का नहीं।

रनटाइम जनरेशन का ट्रेडऑफ़ प्रारंभिक चरण में स्टाइल सामग्री प्रदान करने में असमर्थता है, क्योंकि दस्तावेज़ लोड करना शुरू कर देता है। यह दृष्टिकोण आमतौर पर सामग्री के बिना अनुप्रयोगों के लिए फिट बैठता है जो तुरंत उपयोगी हो सकते हैं। आमतौर पर, ऐसे एप्लिकेशन को उपयोगकर्ता के इंटरैक्शन की आवश्यकता होती है, इससे पहले कि वे वास्तव में किसी उपयोगकर्ता के लिए उपयोगी हो सकें। अक्सर ऐसे एप्लिकेशन कंटेंट के साथ काम करते हैं जो इतना गतिशील होता है कि इसे लोड करते ही यह पुराना हो जाता है, इसलिए आपको जल्द ही एक अपडेट पाइपलाइन स्थापित करने की आवश्यकता है, उदाहरण के लिए, ट्विटर। इसके अलावा, जब कोई उपयोगकर्ता लॉग-इन करता है, तो एसईओ के लिए HTML प्रदान करने की कोई आवश्यकता नहीं है।

यदि इंटरैक्शन के लिए जावास्क्रिप्ट की आवश्यकता होती है, तो ऐप तैयार होने से पहले बंडल को लोड करना होगा। उदाहरण के लिए, आप दस्तावेज़ में स्लैक लोड करते समय एक डिफ़ॉल्ट चैनल की सामग्री दिखा सकते हैं, लेकिन यह संभावना है कि उपयोगकर्ता उसके ठीक बाद चैनल को बदलना चाहेगा। इसलिए यदि आपने प्रारंभिक सामग्री को केवल उन्हें तुरंत फेंकने के लिए लोड किया है।

इस तरह के अनुप्रयोगों के अनुमानित प्रदर्शन को प्लेसहोल्डर्स और अन्य तरकीबों के साथ बेहतर बनाया जा सकता है ताकि एप्लिकेशन को वास्तव में की तुलना में अधिक तत्काल महसूस हो सके। इस तरह के अनुप्रयोग आम तौर पर भारी डेटा होते हैं, इसलिए वे एक लेख के रूप में जल्दी से उपयोगी नहीं होंगे।

रणनीति 2: क्रिटिकल सीएसएस के साथ रनटाइम पीढ़ी

क्रिटिकल सीएसएस सीएसएस की न्यूनतम राशि है जो पृष्ठ को अपनी प्रारंभिक स्थिति में स्टाइल करने के लिए आवश्यक है। यह दस्तावेज़ के प्रमुख में एक शैली टैग का उपयोग करके प्रदान किया गया है। यह तकनीक सीएसएस-इन-जेएस के साथ और बिना व्यापक रूप से उपयोग की जाती है। दोनों ही मामलों में, आप सीएसएस नियमों को दोहरा सकते हैं, एक बार क्रिटिकल सीएसएस के हिस्से के रूप में और एक बार जावास्क्रिप्ट या सीएसएस के हिस्से के रूप में। सामग्री की मात्रा के आधार पर क्रिटिकल सीएसएस का आकार काफी बड़ा हो सकता है। आमतौर पर, दस्तावेज़ को कैश नहीं किया जाएगा।

क्रिटिकल सीएसएस के बिना, रनस्ट सीएसएस-इन-जेएस के साथ एक स्थिर सामग्री-भारी एकल पृष्ठ एप्लिकेशन को सामग्री के बजाय प्लेसहोल्डर दिखाना होगा। यह बुरा है क्योंकि यह बहुत पहले एक उपयोगकर्ता के लिए उपयोगी हो सकता था, कम-एंड डिवाइस पर पहुंच में सुधार और कम-बैंडविड्थ कनेक्शन के लिए।

प्रारंभिक चरण में यूआई को अवरुद्ध किए बिना, गंभीर सीएसएस के साथ, रनटाइम सीएसएस पीढ़ी बाद के चरण में किया जा सकता है। हालांकि, कम-अंत वाले मोबाइल उपकरणों पर चेतावनी दी जाती है, जो लगभग 5+ वर्ष पुराने हैं, जावास्क्रिप्ट से सीएसएस पीढ़ी के प्रदर्शन पर नकारात्मक प्रभाव पड़ सकता है। यह दृढ़ता से सीएसएस के उत्पन्न होने और उपयोग की गई लाइब्रेरी की मात्रा पर निर्भर करता है, इसलिए इसे सामान्यीकृत नहीं किया जा सकता है।

इस रणनीति का ट्रेडऑफ क्रिटिकल सीएसएस निष्कर्षण की लागत और रनटाइम सीएसएस पीढ़ी की लागत है।

रणनीति 3: बिल्ड-टाइम निष्कर्षण

यह रणनीति सीएसएस-इन-जेएस के बिना वेब पर डिफ़ॉल्ट एक है। कुछ CSS-in-JS लाइब्रेरीज़ आपको बिल्ड समय पर स्टेटिक CSS निकालने की अनुमति देती हैं। * इस मामले में, कोई रनटाइम ओवरहेड शामिल नहीं है, सीएसएस एक लिंक टैग का उपयोग करके पृष्ठ पर प्रदान किया जाता है। सीएसएस पीढ़ी की लागत समय से पहले एक बार भुगतान की जाती है।

यहां 2 प्रमुख ट्रेडऑफ हैं:

  1. आप रनटाइम के दौरान कुछ गतिशील एपीआई सीएसएस-इन-जेएस ऑफ़र का उपयोग नहीं कर सकते, क्योंकि आपके पास राज्य तक कोई पहुंच नहीं है। अक्सर आप अभी भी सीएसएस कस्टम गुणों का उपयोग नहीं कर सकते हैं, क्योंकि वे हर ब्राउज़र में समर्थित नहीं हैं और प्रकृति द्वारा बिल्ड समय पर पॉलीफ़िल्ड नहीं किया जा सकता है। इस मामले में, आपको गतिशील थीमिंग और राज्य-आधारित स्टाइलिंग के लिए वर्कअराउंड करना होगा। "
  2. क्रिटिकल सीएसएस के बिना और एक खाली कैश के साथ, आप पहले पेंट को ब्लॉक कर देंगे, जब तक कि आपका सीएसएस बंडल लोड नहीं हो जाता। दस्तावेज़ के सिर में एक लिंक तत्व HTML के प्रतिपादन को अवरुद्ध करता है।
  3. एकल पृष्ठ अनुप्रयोगों में पेज आधारित बंडल विभाजन के साथ गैर-निर्धारक विशिष्टता। *

रणनीति 4: क्रिटिकल सीएसएस के साथ बिल्ड-टाइम निष्कर्षण

यह रणनीति सीएसएस-इन-जेएस के लिए भी अद्वितीय नहीं है। महत्वपूर्ण सीएसएस के साथ पूर्ण स्थिर निष्कर्षण अधिक स्थिर अनुप्रयोग के साथ काम करते समय सर्वश्रेष्ठ प्रदर्शन प्रदान करता है। इस दृष्टिकोण में अभी भी स्टैटिक सीएसएस के पूर्वोक्त ट्रेडऑफ़ हैं, सिवाय इसके कि ब्लॉकिंग लिंक टैग को दस्तावेज़ के निचले भाग में ले जाया जा सकता है।

4 मुख्य सीएसएस प्रतिपादन रणनीतियाँ हैं। उनमें से केवल 2 सीएसएस-इन-जेएस के लिए विशिष्ट हैं और उनमें से कोई भी सभी पुस्तकालयों पर लागू नहीं होता है।

सरल उपयोग

सीएसएस-इन-जेएस गलत तरीके से उपयोग किए जाने पर पहुंच में कमी कर सकता है। यह तब होगा जब क्रिटिकल सीएसएस निष्कर्षण के बिना एक बड़े पैमाने पर स्थिर सामग्री साइट को लागू किया जाता है ताकि HTML को जावास्क्रिप्ट बंडल लोड होने और मूल्यांकन करने से पहले चित्रित नहीं किया जा सके। यह तब भी हो सकता है जब दस्तावेज़ के प्रमुख में अवरुद्ध लिंक टैग का उपयोग करके एक विशाल सीएसएस फ़ाइल प्रदान की जाती है, जो कि पारंपरिक एम्बेडिंग के साथ सबसे लोकप्रिय वर्तमान समस्या है और सीएसएस-इन-जेएस के लिए विशिष्ट नहीं है।

डेवलपर्स को पहुंच की जिम्मेदारी लेने की जरूरत है। अभी भी एक मजबूत भ्रामक विचार है कि अस्थिर इंटरनेट कनेक्शन आर्थिक रूप से कमजोर देशों की समस्या है। हम यह भूल जाते हैं कि भूमिगत रेल प्रणाली या बड़े भवन में प्रवेश करने पर हर एक दिन हमारे पास कनेक्टिविटी के मुद्दे हैं। एक स्थिर केबल-मुक्त मोबाइल कनेक्शन एक मिथक है। एक स्थिर वाईफाई कनेक्शन होना भी आसान नहीं है, उदाहरण के लिए, एक 2.4 गीगाहर्ट्ज़ WI-FI नेटवर्क माइक्रोवेव ओवन से हस्तक्षेप प्राप्त कर सकता है!

सर्वर-साइड रेंडरिंग के साथ क्रिटिकल सीएसएस की लागत

CSS-in-JS के लिए क्रिटिकल CSS निष्कर्षण प्राप्त करने के लिए, हमें SSR की आवश्यकता है। SSR सर्वर पर किसी एप्लिकेशन की दी गई स्थिति के लिए अंतिम HTML उत्पन्न करने की एक प्रक्रिया है। वास्तव में, यह काफी जटिल और महंगी प्रक्रिया हो सकती है। प्रत्येक HTTP अनुरोध के लिए सर्वर पर एक निश्चित मात्रा में सीपीयू चक्र की आवश्यकता होती है।

CSS-in-JS आमतौर पर इस तथ्य का लाभ उठाता है कि इसे HTML रेंडरिंग पाइपलाइन में शामिल किया गया है। * यह जानता है कि HTML को क्या प्रदान किया गया था और CSS को इसकी क्या आवश्यकता है ताकि यह इसकी न्यूनतम न्यूनतम मात्रा का उत्पादन करने में सक्षम हो। क्रिटिकल सीएसएस सर्वर पर HTML रेंडरिंग के लिए अतिरिक्त ओवरहेड जोड़ता है क्योंकि सीएसएस को भी अंतिम सीएसएस स्ट्रिंग में संकलित करने की आवश्यकता होती है। कुछ परिदृश्यों में, हालांकि सर्वर पर कैश करना कठिन या असंभव है।

ब्लैक बॉक्स का प्रतिपादन

आपको यह जानने की आवश्यकता है कि आप जिस CSS-in-JS लाइब्रेरी का उपयोग कर रहे हैं, वह आपके CSS को कैसे प्रस्तुत कर रही है। उदाहरण के लिए, लोग अक्सर इस बात से अवगत नहीं होते हैं कि स्टाइलिंग कंपोनेंट्स और इमोशन डायनेमिक स्टाइल को कैसे लागू करते हैं। डायनेमिक स्टाइल एक सिंटैक्स है जो आपकी शैलियों की घोषणा के अंदर जावास्क्रिप्ट कार्यों के उपयोग की अनुमति देता है। उन कार्यों को सहारा स्वीकार करते हैं और एक सीएसएस ब्लॉक वापस करते हैं।

स्रोत के क्रम की विशिष्टता को सुसंगत बनाए रखने के लिए, ऊपर दिए गए पुस्तकालयों में दोनों एक नया सीएसएस नियम उत्पन्न करते हैं यदि इसमें एक गतिशील घोषणा और नए प्रॉप्स के साथ घटक अपडेट शामिल हैं। यह दिखाने के लिए कि मेरा क्या मतलब है, मैंने इस सैंडबॉक्स को बनाया। जेएसएस में हमने एक अलग ट्रेडऑफ़ लेने का फैसला किया, जो हमें नए सीएसएस नियमों को उत्पन्न किए बिना गतिशील गुणों को अपडेट करने की अनुमति देता है। *

तेजी से सीखने की अवस्था

जो लोग CSS से परिचित हैं, लेकिन जावास्क्रिप्ट के लिए नए हैं, CSS-in-JS के साथ गति प्राप्त करने के लिए काम की प्रारंभिक राशि काफी बड़ी हो सकती है।

आपको सीएसएस-इन-जेएस लिखने के लिए एक पेशेवर जावास्क्रिप्ट डेवलपर होने की आवश्यकता नहीं है, जब तक कि उस बिंदु पर जहां जटिल तर्क शामिल हो। हम स्टाइल की जटिलता को सामान्य नहीं कर सकते, क्योंकि यह वास्तव में उपयोग के मामले पर निर्भर करता है। ऐसे मामलों में जहां सीएसएस-इन-जेएस जटिल हो जाता है, संभावना है कि वेनिला सीएसएस के साथ कार्यान्वयन और भी जटिल होगा।

बेसिक सीएसएस-इन-जेएस स्टाइलिंग के लिए, किसी को यह जानना होगा कि चर की घोषणा कैसे करें, टेम्प्लेट स्ट्रिंग्स का उपयोग कैसे करें और जावास्क्रिप्ट मूल्यों को प्रक्षेपित करें। यदि ऑब्जेक्ट-नोटेशन का उपयोग किया जाता है, तो किसी को जावास्क्रिप्ट ऑब्जेक्ट और लाइब्रेरी-विशिष्ट ऑब्जेक्ट-आधारित सिंटैक्स के साथ कैसे काम करना है, यह जानना होगा। यदि गतिशील स्टाइलिंग शामिल है, तो किसी को यह जानने की आवश्यकता है कि जावास्क्रिप्ट फ़ंक्शन और सशर्त का उपयोग कैसे करें।

कुल मिलाकर एक सीखने की अवस्था है, हम इसे अस्वीकार नहीं कर सकते। यह सीखने की अवस्था आम तौर पर सैस सीखने की तुलना में बहुत बड़ी नहीं है। वास्तव में, मैंने इसे प्रदर्शित करने के लिए यह एगहेड पाठ्यक्रम बनाया।

कोई अंतर नहीं

अधिकांश CSS-in-JS libs इंटरऑपरेबल नहीं हैं। इसका मतलब है कि एक लाइब्रेरी का उपयोग करके लिखी गई शैलियों को एक अलग लाइब्रेरी का उपयोग करके प्रदान नहीं किया जा सकता है। व्यावहारिक रूप से इसका मतलब है कि आप अपने पूरे एप्लिकेशन को एक कार्यान्वयन से दूसरे में आसानी से स्विच नहीं कर सकते। इसका अर्थ यह भी है कि आप अपनी UI को आसानी से NPM पर अपने CSS-in-JS लाइब्रेरी को उपभोक्ता के बंडल में लाए बिना साझा नहीं कर सकते, जब तक कि आपके पास आपके CSS के लिए बिल्ड-टाइम स्थिर निष्कर्षण न हो।

हमने आईएसटीएफ प्रारूप पर काम करना शुरू कर दिया है, जो इस समस्या को ठीक करने वाला है, लेकिन दुर्भाग्य से हमारे पास इसे उत्पादन के लिए तैयार होने के लिए समय नहीं है। *

मुझे लगता है कि सार्वजनिक डोमेन में पुन: प्रयोज्य रूपरेखा अज्ञेय यूआई घटकों को साझा करना अभी भी एक आम तौर पर मुश्किल से हल करने वाली समस्या है।

सुरक्षा जोखिम

सीएसएस-इन-जेएस के साथ सुरक्षा लीक शुरू करना संभव है। किसी भी क्लाइंट-साइड एप्लिकेशन के साथ, आपको इसे प्रदान करने से पहले उपयोगकर्ता इनपुट से बचना होगा, हमेशा।

यह लेख आपको अधिक अंतर्दृष्टि और कुछ डिफेंसिंग उदाहरण देगा।

अपठनीय वर्ग के नाम

कुछ लोग अभी भी सोचते हैं कि यह महत्वपूर्ण है कि हम वेब पर सार्थक पठनीय नाम रखें। वर्तमान में, कई सीएसएस-इन-जेएस लाइब्रेरी विकास मोड में घोषणा नाम या घटक नाम के आधार पर सार्थक वर्ग नाम प्रदान करती हैं। उनमें से कुछ भी आप वर्ग नाम जनरेटर समारोह को अनुकूलित करते हैं।

हालांकि उत्पादन मोड में, उनमें से अधिकांश एक छोटे पेलोड के लिए छोटे नाम उत्पन्न करते हैं। यह एक ट्रेडऑफ है जिसे लाइब्रेरी के उपयोगकर्ता को जरूरत पड़ने पर लाइब्रेरी को बनाना और अनुकूलित करना पड़ता है।

निष्कर्ष

ट्रेडऑफ़ मौजूद हैं, और मैंने शायद उन सभी का उल्लेख भी नहीं किया है। लेकिन उनमें से अधिकांश सार्वभौमिक रूप से सभी सीएसएस-इन-जेएस पर लागू नहीं होते हैं। वे इस बात पर निर्भर करते हैं कि आप किस पुस्तकालय का उपयोग करते हैं और आप इसका उपयोग कैसे करते हैं।

* इस वाक्य को समझाने के लिए एक समर्पित लेख लगेगा। मुझे ट्विटर (@ oleg008) पर बताएं जिसके बारे में आप अधिक पढ़ना चाहते हैं।