प्रतिक्रियाशील इंटरफ़ेस। फ्रंटटाल्क्स 2018 में आर्टीम बेलोव द्वारा व्याख्यान

ब्राउज़र-आधारित जावास्क्रिप्ट में, इंटरफेस अनुमानित हैं। "सिंगल-थ्रेडेड", एक ट्रांसेक्शनल रेंडरिंग स्क्रिप्ट के साथ: खाली स्क्रीन - लोडिंग - इंटरफ़ेस। प्रिक्सो कानून पर ध्यान केंद्रित करते हुए, Cxense के डेवलपर अर्टिओम बेलोव ने बताया, कैसे, 20% समय बिताया, "प्रतिक्रियाशील डिजाइन" की तकनीकों के कारण आवेदन को 80% तेजी से प्रदान किया - अभी तक तैयार नहीं किया गया था, लेकिन पहले से ही UX पर प्राथमिकता वाले उत्पादों में उपयोग किया जाता है।

लेकिन अधिक अनुभवी लोगों के लिए जो वेबपैक से बाहर नहीं निकलते हैं और वेबपैक को पीड़ित करते हैं, और इसके विपरीत नहीं? वे प्लगइन्स में प्लग करते हैं। लेकिन जब से हम इस तकनीक के विकास की शुरुआत में हैं, पारिस्थितिकी तंत्र हमें एक प्लग-इन प्रदान करता है जो आपके HTML को लेता है, HTML को अंतर्निहित सीएसएस पर आधारित बनाता है, विज्ञापन के लिए एक क्यूआर कोड प्रदान करता है ... गंभीरता से? उसके बाद, आप "महत्वपूर्ण" शैलियों के माध्यम से ले सकते हैं और ले सकते हैं ... शायद यह सवाल पूछने के लायक है कि मैं अभी भी सामने क्यों हूं।

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

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



लेकिन एक बात निश्चित है: प्रतिपादन, एक आवेदन की प्रतिक्रिया की तरह, एक लेन-देन नहीं है। एक इंटरफ़ेस प्रदर्शित करना एक तार्किक इकाई नहीं है, इसलिए आपको इसे बैचों में हरा देने की आवश्यकता है।



और सामने के अंत में, सामान्य तौर पर, हम अपनी मदद करते हैं, हम झूठ बोलते हैं।



असल में, जब हम अपने आवेदन के "लोड समय" के बारे में बात करते हैं, तो हम वाक्यांश को पूरी तरह से नहीं कहते हैं - "औसत लोड समय"। यद्यपि आपको सेवा कार्यकर्ता का उपयोग करके, दूसरा एप्लिकेशन डाउनलोड तत्काल करने के लिए माथे में सात स्पैन होने की आवश्यकता नहीं है।

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



और अब प्रदर्शन के लिए आवेदन परीक्षण में 100 अंक कम होना सबसे कठिन नहीं है। Google ने इस पर ध्यान दिया, धन्यवाद।



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



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



यह सब इस तथ्य पर उतरता है कि लाइटहाउस में मैट्रिक्स का लगभग पूरा होने का समय है - जबकि उन्हें संतुलित होना चाहिए।



"पहले अर्थपूर्ण पेंट" जितना संभव हो उतना तेज़ होना चाहिए, "पहले विवादास्पद पेंट" इसके पीछे होना चाहिए, और "समय से लगातार इंटरएक्टिव" ब्राउज़र की सफेद स्क्रीन से इंटरफ़ेस की तत्परता तक इतना बड़ा डेल्टा नहीं होना चाहिए।

बेशक, ऐसे विशेषज्ञ हैं जो कहेंगे कि यह बस हासिल किया गया है:

“हमें वेबपैक में एप्लिकेशन को रूट करने और सर्वर-साइड रेंडर करने की आवश्यकता है। हाँ, आधे घंटे के लिए काम है! ”

लेकिन यह पूरी तरह से सच नहीं है ... प्रिय विशेषज्ञ, यह उल्लेख नहीं करता है कि प्रत्येक नया मार्ग एक ही काम करता है - लोड हो रहा है। और फिर, लाइटहाउस के सभी मेट्रिक्स में आपस में एक छोटा डेल्टा होता है, क्योंकि मार्ग आमतौर पर महत्वपूर्ण होता है।

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

सिद्धांत रूप में, आर एंड डी योजना बहुत सरल लगती है ... आपको किसी तरह लाभ प्राप्त करने की आवश्यकता है। और मुख्य चीज के बारे में मत भूलो - उस समय और तिथियों के बारे में जो जलने के लिए प्यार करता है। और, अपने हाथों में एक न्यूनतम प्रोग्रामर के घोषणापत्र को पकड़े हुए, आपको याद रखना चाहिए: परिणाम के 80% पर 20% समय खर्च करें।

मुझे उपकरण मिल गए। उदाहरण के लिए, अंतराल-रडार।



सच है, मैं सांता बारबरा में नहीं गया था, जिसने इस विचार को चुरा लिया, किसी से दान अब्रामोव या इसके विपरीत ... जेएससीओएन आइसलैंड 2018 की अंतिम प्रस्तुति में, एक दिलचस्प अवधारणा दिखाई गई: रडार तब तक हरा है जब तक कि यह मुख्य चलने में देरी का पता लगाता है, और जब वे संवेदनशील होते हैं, तो रडार पीला हो जाता है, और महत्वपूर्ण होने पर, यह लाल हो जाता है।

और एक मैक पर सीएमडी + शिफ्ट + पी दबाकर - या विंडोज पर Ctrl + Shift + P - मैंने कोड कवरेज का प्रतिशत देखा। और फिर उसने बंडल को देखा।





और फिर से कवर करने के लिए, और फिर से बंडल करने के लिए। और उन्होंने बस स्थिति को स्वीकार करने का फैसला किया। मुझे यहां से कुछ भी प्राप्त करने की आवश्यकता नहीं है। दरअसल, परियोजनाओं में, कई उपयोग उपकरण हैं जो वास्तविक मानक हैं। उदाहरण के लिए, इवान अकुलोव ने, Google क्रोम लैब्स के साथ मिलकर, बहुत पहले वेबपैक ऑप्टिमाइज़ेशन, वेबपैक-लिबास-ऑप्टिमाइज़ेशन के लिए एक रिपॉजिटरी बनाई थी। और मुझे यह क्यों दोहराना चाहिए, कोड स्प्लिट के बारे में, आलसी लोड के बारे में? यह वही है जो 2018 में ज्ञात और प्रगतिशील मानक है।



और इस सवाल का जवाब "आधे सेकंड में क्या डाउनलोड किया जा सकता है?" - जेएस और यहां विजेता है। उदाहरण के लिए, आप 100 किलोग्राम जेपीजी को अपलोड कर सकते हैं और इसके प्रसंस्करण पर 0.04 खर्च कर सकते हैं, लेकिन जेएस ऐसा करता है, क्योंकि इसे संसाधित करने में बहुत अधिक समय लगता है, 20 बार।



क्योंकि आपको याद रखना होगा कि आवेदन शुरू होने पर क्या होता है।



डाउनलोड करने के बाद, जिस चीज को आप पुनः प्राप्त करना चाहते हैं, वह शुरू होती है: एक समय में डाउनलोड करें, और दूसरे समय में कोड को पार्स, संकलित और निष्पादित करें।



मैंने देखा कि <script /> टैग हमें क्या प्रदान करता है। कई विकल्प हैं, और मैंने एक संकेत का उपयोग करने के बारे में सोचा।



हम्म, कमरे में कोई उपाय नहीं हैं, कोई फोन नहीं। मैं 50:50 लेता हूं। हमारे पास अभी भी विकल्प "defer" और प्रकार = "मॉड्यूल" है।



वे पार्सिंग को अवरुद्ध किए बिना लोड करते हैं, लेकिन खुद को संसाधित करते हैं और बाद में निष्पादित करते हैं, जब आवेदन इसके लिए सबसे अधिक तैयार होता है - मुख्य धागे को मुक्त करना।

लेकिन कोई सही विकल्प नहीं है, और महान व्यक्ति बेन श्वार्ट्ज के शब्दों को याद किया जाता है। ऐसा नहीं है कि उन्होंने यह रूसी में कहा, लेकिन:



इससे बचने के लिए, मुझे जेएस की आवश्यकता है, इसलिए प्रारंभिक अनुरोध एकमात्र तरीका है कि मैं कैसे अनावश्यक अनुरोधों से छुटकारा पा सकता हूं।



ठीक है, आपको फिर से वेबपैक कॉन्फ़िगर करना होगा। यह हमेशा प्लगइन्स का कनेक्शन नहीं होता है।



संदर्भ में बंडल को देखते हुए, मैं वास्तव में नहीं समझता कि मैं फ़ाइलों के बीच कोड के इन या उन टुकड़ों को कैसे दोहराता हूं।



संभवतः, उन्हें क्रिटिकल-अनुरोध में निकालने की आवश्यकता है?



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



सामान्य तौर पर, वेबपैक दिमाग का एकीकरण सबसे करामाती वृद्धि नहीं देता है, लेकिन अब क्रिटिकल सीएसएस के बारे में बात करते हैं।



लेकिन ... हमें एहसास हुआ कि क्रिटिकल सीएसएस उन लोगों के लिए है जिनके पास एक भी पेज एप्लीकेशन नहीं है। आखिरकार, एक पूर्ण HTML मार्ग के बिना, उपकरण क्रिटिकल सीएसएस का निर्माण करने में सक्षम नहीं होंगे।



और यह अच्छा है कि वहाँ एक कठपुतली है कि कर सकता है।



आखिरकार, उसके साथ जो प्रस्तुत किया गया था - गिटहब पर "कठपुतली-उदाहरण" फ़ोल्डर को परियोजनाओं पर पकड़ लिया गया था। और इसलिए रेंडर्ट्रॉन परियोजना के बारे में आया। सही है, उससे कम से कम किसी प्रकार की त्रुटि प्राप्त करने के लिए, आपको पता सम्मिलित करना होगा, Enter दबाएं ... और वह है।



अच्छी बात यह है कि काम करने वाले अन्य npm पैकेज हैं। वे बाजार पर हैं, जाहिर है, लंबे समय तक।



पैकेज को स्थापित करने और बनाने के बाद, सामान्य कर्ल के साथ, मैं स्थानीय सर्वर पर अपने एप्लिकेशन के HTML को फिर से प्रस्तुत कर सकता हूं, और इस तरह क्रिटिकल HTML प्राप्त कर सकता हूं, इसलिए क्रिटिकल सीएसएस बनाने की आवश्यकता है।



बूटस्ट्रैप HTML ने रेंडर के लिए इंतजार करने के बजाय, उम्मीद के मुताबिक बढ़ोतरी दी, लेकिन इस पर ध्यान देना जल्दबाजी होगी। चलो क्रिटिकल CSS का मार्ग जारी रखें।



पारिस्थितिक तंत्र की देखभाल करने और HtmlCriticalWebpackPlugin () बनाने के लिए एडी उस्मानी के लिए फिर से धन्यवाद, जहां कॉन्फ़िगरेशन के लिए आपको बस कुछ सवालों के जवाब देने की आवश्यकता है: जहां क्रिटिकल सीएसएस को बचाने के लिए और किस रूप में?



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



लेकिन ईमानदार होने के लिए, मुझे वेब इंटरफ़ेस का उपयोग करने में शर्म आती है, यह स्पष्ट रूप से लेआउट डिजाइनरों के लिए है जिनके पास कमांड लाइन नहीं है। लेकिन सब कुछ सरल है, जैसा कि 90 के दशक के यूप्पी विज्ञापन में है: बस "बनाएं" पर क्लिक करें।



और यह सबसे करामाती विकास नहीं देता है, लेकिन आवेदन के पहले रंग के लिए बहुत संवेदनशील है।



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

फोंट डाउनलोड करने के लिए व्यंजनों। यहां फॉन्ट-डिस्प्ले हमारी मदद करेगा। यह समझ लेने के बाद कि आपको बल्ले से सही कदम नहीं उठाने की जरूरत है, पहले हम तय करते हैं: अदृश्य पाठ का फ्लैश, एफओआईटी, या बिना पाठ के फ्लैश, फ्यूस, हमारे लिए डरावना है।



और - स्पॉइलर - हमारे लिए सबसे भयानक, अदृश्य पाठ का फ्लैश है, क्योंकि यह अधिक संख्या में रेड्रेट्स का कारण बनता है।



यदि संक्षेप में, यह देखते हुए कि फ़ॉन्ट-प्रदर्शन गुण मौजूद हैं, तो अपने लिए स्वैप या फ़ॉलबैक चुनने का अधिकार है। पांच गुणों में से आप अपने लिए सही विकल्प चुन सकते हैं, कोई सही विकल्प नहीं है।



इसके अलावा, मैंने सुना है कि एक फॉन्ट स्टाइल मैचर प्रोजेक्ट है जो मुझे मेरे कॉमिक सैंस फॉन्ट के लिए एक अच्छे फालबैक सिस्टम फॉन्ट का चयन करने और Google फोंट के साथ लोड न करने की अनुमति देगा। हालांकि यह काफी सही नहीं है ...

Zach Zezerman जैसे लोग हैं जिन्होंने FOFT अवधारणा का आविष्कार किया।



जो ब्राउज़र में व्यावहारिक रूप से दिखाई नहीं देता है।

यह इस तथ्य के कारण प्राप्त किया जाता है कि जब आप मानक शैली के रोमन फ़ॉन्ट को डाउनलोड करते हैं, और ब्राउज़र पहले से ही इतना स्मार्ट है कि यह मानक शैली के आधार पर "नकली" बोल्ड, इटैलिक, रेखांकित और पार किए गए फ़ॉन्ट बना सकता है। यह एक फ्लैश देता है, लेकिन लगभग कोई भी नहीं। ऐसा करने के लिए, तथाकथित प्रीलोड फ़ॉन्ट को लागू करें।



लेकिन क्या होगा अगर मैं कहता हूं कि फ़ॉन्ट को सीएसएस में एम्बेड किया जा सकता है? और यह सच है, और यह एक लाभ भी देता है!



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



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



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

लेकिन फिर, विशेषज्ञ आपको बताएंगे - एक आलसी लोड है।



लेकिन याद रखें कि आप उसके साथ कैसे बातचीत करते हैं। आप 100% मामलों को कवर नहीं कर सकते।



हां, और यदि आप अनुकूलन के रास्ते पर चलते हैं और एडी ओस्मानी "आवश्यक छवि अनुकूलन" द्वारा पुस्तक में सभी चौकियों को पूरा करते हैं, तो आप भी अनसुलझे समस्याओं के साथ बने रहेंगे ...

लेकिन मैंने देखा कि एडी उस्मानी को माध्यम में अपने पंचांगों और लेखों में रेडिट का उल्लेख करना पसंद है। मुझे याद आया कि एक दोस्त ने मेरे लिए वहां काम किया था और उसे सलाह के लिए फोन किया, उसने मुझे याद दिलाया कि पर्कटेड प्रदर्शन जैसी कोई चीज थी, और यह परिभाषा मेरे दिमाग के हॉल में थी।



यहां, वैसे, डिजाइनर हमारी मदद करते हैं। यह तब होता है जब वह समय नहीं खेलता है, लेकिन आप अपना आवेदन कैसे प्रस्तुत करते हैं। और इसके लिए बहुत सही रणनीति "सामग्री प्लेसहोल्डर" है।



उदाहरण के लिए, YouTube ऐसा कर सकता है।



सभी सहायक घटकों को डाउनलोड करने से पहले YouTube वीडियो चलाने का प्रबंधन करता है। यह सामग्री प्लेसहोल्डर्स, जैसे ग्रे एनिमेटेड पासा के कारण, आगे देखते हुए किया जाता है।



और फिलहाल पारिस्थितिकी तंत्र हमें क्या प्रदान करता है? कुछ खास नहीं। CodePen। आइए देखते हैं उनका क्रियान्वयन।



यह काफी कार्ड है जो किसी भी डिज़ाइन पैटर्न में होता है। आइए देखें ...



हमें 30 लाइनों पर कुछ चर घोषित करने की आवश्यकता है, 50 लाइनों पर एक संपत्ति ग्राम घोषित करें, कुछ एनिमेशन और हमें 100 लाइनें कोड मिलती हैं ... यह ली वीरू पैमाने पर 10 में से 10 है।

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



लेकिन ऐसे लोगों की एक टीम है, जिनके लिए उनके उत्पाद के बारे में चुटकुले सरल नहीं हैं। PostCSS।



आप हमेशा उन पर भरोसा कर सकते हैं। विशेष रूप से, आप सीएसएस अवधारणा "मल्टी बैकग्राउंड" पर - इस तकनीक को "प्रतियोगी प्लेसहोल्डर्स" को लागू कर सकते हैं। यह तब है जब एक एकल "पृष्ठभूमि" संपत्ति में अल्पविराम में कई मान हो सकते हैं।



CanIUse सिर्फ जवाब देता है, हाँ।



यह निम्नलिखित की तरह लग रहा है, हमारे लिए परिचित है। परिचित - मध्यम से धन्यवाद।



आपकी छवि पर एक लीनियर ग्रेडिएंट लागू किया जाता है, जो जल्दी से जल्दी प्रदर्शित होता है, और एक पूर्ण आकार की छवि इसके ऊपर दिखाई देगी, बाद में। कोड में, यह कुछ इस तरह दिखता है।



पहली प्राथमिकता अनुरोध छवि को लोड करने के लिए शुरू होती है, ज़ाहिर है, भारी। और तुरंत, जब आप सीएसएस प्राप्त करते हैं, तो एक रैखिक ढाल दिखाई देगा। लेकिन रैखिक ढाल सहजता की तरह सीधी और चिकनी नहीं है।



इसलिए, कोड को किसी अन्य प्लगइन द्वारा उठाया जाना चाहिए, जो रैखिक ढाल को चिकना कर देगा।



लेकिन थोड़ा ढाल के साथ आप ओवरले बना देंगे ताकि वे सभी मामलों को कवर करें।



इस मामले में, यह ठीक से काम नहीं करेगा, क्योंकि छवि केवल एक रैखिक ढाल के साथ एक अमूर्त बनाने के लिए बहुत जटिल है। लेकिन यहां पर स्क्वायर काम करेगा।



यह आपकी छवि के लिए एक प्लेसहोल्डर बनाने और कई पृष्ठभूमि तकनीक का उपयोग करके इसे संलग्न करने के लिए एक सीएलआई मॉड्यूल है।



बेशक, पूर्ण आकार की छवि बहुत लंबे समय तक लोड होगी, और अपने वजन के कारण sqip से प्लेसहोल्डर को बहुत तेज़ी से प्रदर्शित किया जाएगा।



लेकिन यह काफी नहीं है जिसके लिए मैं प्रयास कर रहा हूं। जब मुझे इसकी आवश्यकता होगी, तब मैं चाहता हूं कि जब मुझे इसकी आवश्यकता हो, और जब ब्राउज़र चाहता है, तब मैं चाहता हूं। और मुझे इसे दो सीएसएस फाइलों में विभाजित करने की आवश्यकता है, एक को <head> में डालें, जहां प्रकाश छवियां होंगी, और फिर <body> में भारी छवियों को लोड करेंगी।



लेकिन शेष छवियों के बारे में क्या है, उदाहरण के लिए, जेएस में?



एसवीजी के साथ हेरफेर, विशेष रूप से, निराशाजनक लगता है। आप एसवीजी को फिर से बनाना चाहते हैं, लेकिन परिचित सीएसएस के माध्यम से यह आपके नियंत्रण में नहीं है।



जाहिर है, नए रुझानों के अनुसार, एसवीजी को एक घटक बनना होगा।



दान Abramov द्वारा "बनाएँ-प्रतिक्रिया-अनुप्रयोग" में अपनाया गया था कि पैकेज की मदद से - यह "svgr" है।



यह एक सीएलआई उपकरण है जो बस एसवीजी को आपके जेएस में सम्मिलित करता है, और आप इसके साथ एक घटक के रूप में काम कर सकते हैं। ये कोड की तीन लाइनें हैं, वास्तव में।



लेकिन डिजाइनर, जाहिरा तौर पर, इस बात से अवगत नहीं हैं कि कई रूपरेखाओं में घटक का एक मूल तत्व होना चाहिए। मैं उसे "विशेष तरीके से" स्केच से एसवीजी "निर्यात" करने के लिए नहीं कहूंगा?



इस तरह की कई छोटी समस्याओं के कारण, किसी को संदिग्ध रूप से लोकप्रिय परियोजनाओं पर ध्यान देना पड़ता है।



उदाहरण के लिए, कुछ "प्रतिक्रिया-आइकन-आधार" जो स्वयं को <SVG> टैग के प्रतिस्थापन के रूप में प्रस्तुत करता है। अर्थात्, पैकेज, जैसा कि यह था, हमें बताता है: <SVG> टैग के बजाय, मुझ में अपना SVG कोड लपेटें, जिसके बाद मैं गुण लागू करूंगा: भरें, पाठ, स्ट्रोक और जो भी, अपने आप से, क्योंकि मेरे पास तर्क है जो "कार्य करता है" पुल "सीएसएस से।



और एक साधारण कमांड की सहायता से, आप अपने प्रोजेक्ट के लिए अपना svgr-टेम्पलेट बना सकते हैं।





ईमानदार होने के लिए, मुझे नहीं पता कि यह परियोजना केवल रिएक्ट के लिए क्यों है।

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



और अंत में, अप्रचलित से हटकर, संभवतः <img> टैग, उस घटक दृष्टिकोण की ओर, जिसके बारे में हर कोई बात कर रहा है।



और किस के पक्ष में? उदाहरण के लिए, आपके SCSS \ SASS फ़ाइलों में ": निर्यात" छद्म वर्ग की कोशिश करने के पक्ष में।



मुझे सबसे अधिक संभावना है कि यह आपके संस्करण के वेबपैक में भी काम करता है। "निर्यात: छद्म वर्ग" उन चरों को लोड करता है जिन्हें आप SCSS में घोषित करते हैं। फिर आप उन्हें जेएस कोड में आयात कर सकते हैं। और यह है, और आप सभी रंगों और सब कुछ के साथ किसी तरह की JSON फ़ाइल की तरह, साइकिल उगाने की जरूरत नहीं है।



Svgr आपको एप्लिकेशन के पहले रंग को कम करने की अनुमति देता है। लेकिन इतना ईमानदार नहीं है, क्योंकि कोड बस सीएसएस से जेएस में स्थानांतरित हो गया।

लेकिन दूसरा, हम sqip के बारे में भूल गए, इसके आवेदन के बाद क्या विकास होगा?



सरल गतिशील आयात कौशल रखने के बाद, हम निम्नलिखित तकनीक लागू करते हैं। हम छवि के प्रकाश संस्करण, स्क्वायर प्लेसहोल्डर को लोड करते हैं, और इसे इंटरफ़ेस में प्रदर्शित करते हैं। तब डायनमिक आयात में, .then () में, हम इंटरफ़ेस के साथ इंटरैक्शन को ब्लॉक किए बिना पूर्ण आकार के आइकन की प्रतीक्षा करेंगे।



यह इस तथ्य की ओर जाता है कि हमें विषय एसवीजी प्राप्त होता है, जिसे हम वास्तविक जेएस-घटक की तरह तर्कों के साथ ओवरराइड कर सकते हैं।



और अंत में, यह "इंटरैक्टिव" के आवश्यक मैट्रिक्स में वृद्धि देता है। और यहाँ आप उस मुख्य प्रश्न का उत्तर देते हैं जो एडी उस्मानी के लेखों में दिया गया है: "क्या कुछ सामान्य रूप से चल रहा है?" आप इसका बहुत पहले जवाब देते हैं: "हाँ, यह हो रहा है।"



लेकिन ऐसा लगता है कि मेरे पास एप्लिकेशन में केवल आइकन हैं। उदाहरण के लिए, प्रपत्र फ़ील्ड भी हैं।



यहाँ एक समाधान है कि आप अभी गूगल कर सकते हैं। उदाहरण के लिए, "प्रतिक्रिया-सामग्री-प्लेसहोल्डर" और "प्रति-सामग्री-प्लेसहोल्डर"। लेकिन रुकिए, यहां हमें मैन्युअल रूप से एसवीजी प्लेसहोल्डर को आकर्षित करने की पेशकश की गई है।



एक वेब संस्करण भी है जहां आप ड्रैग एंड ड्रॉप के माध्यम से प्लेसहोल्डर्स को खींच सकते हैं और बना सकते हैं। जो आपके वास्तविक घटकों की तरह ही होगा।



लेकिन क्या यह स्टाइलिंग-घटकों को पांच बार लोड करने की बात है - नहीं! - और स्टाइल-सिस्टम जो मैं उपयोग करता हूं।



और इसे एक नियम बनाएं कि आपको डिजाइन सिस्टम का कड़ाई से पालन करने की आवश्यकता है। और आइकन और छवियों को सही तरीके से निर्यात नहीं किया जाना चाहिए, लेकिन एक डिज़ाइन सिस्टम को इस प्रक्रिया को विनियमित करना चाहिए। टेक्स्ट फ़ील्ड की चौड़ाई हार्डकोड नहीं होनी चाहिए, लेकिन डिज़ाइन सिस्टम, शीर्ष पर, इसे विनियमित करना चाहिए।



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

सामान्य तौर पर, एक डेमो होना चाहिए, लेकिन मैं एक विज्ञापन रिपोर्ट के लिए यहां नहीं आया। लेकिन दूसरे लोग जिन्हें आप सभी जानते हैं, वे सम्मान के योग्य हैं।



और अगर मैं ऑस्कर में था, तो मैं एक लिफाफा निकालूंगा और कुछ इस तरह कहूंगा: “सामग्री प्लेसहोल्डर के कार्यान्वयन में अविश्वसनीय सरलता के लिए, अर्थात् 10x10 पिक्सेल जीआईएफ का उपयोग करते हुए एनीमेशन के कार्यान्वयन में सीएसएस शैलियों को लिखने के बजाय, शीर्षक से सम्मानित किया जाता है। "अतीत में, इंस्टाग्राम से अभिवादन के साथ एनीमेशन में विशेषज्ञ!"



मुझे आशा है कि वे पारदर्शी एकल पिक्सेल GIFs का संकेत नहीं देते हैं, और सीमा संपत्ति एक डबल टेबल नहीं है।

और मैं आपको याद दिलाना चाहूंगा: वास्तविक उपयोगकर्ता निगरानी, ​​RUM पर भरोसा करें।



आपकी परियोजनाओं और प्रासंगिक मैट्रिक्स के वास्तविक उपयोगकर्ताओं के लिए। , , , first input delay.

, , common-, .

, , .

, , JPG , .

, . , .



और आखिरी वाला। , , , , , - loadable-. ́, , . , — , . — , . , , , Webpack. , … great loading component? , - ? ?

, , , , . .