खास जानकारी
SVGOMG: SVGO के लिए एक सुंदर, मटीरियल, रिस्पॉन्सिव फ़्रंटएंड.
हमें क्या पसंद है?
SVGOMG इसे हमारे जेक आर्चिबाल्ड ने बनाया है, यह वेब टेक्नोलॉजी की मदद से लिखे गए पूरी तरह से रिस्पॉन्सिव और बेहतर टूल का करीब-करीब सटीक उदाहरण है. इसमें मटीरियल डिज़ाइन का एक खूबसूरत रूप दिखता है, ServiceWorker यह पक्का करता है कि ऐप्लिकेशन तेज़ी से लोड हो और ऑफ़लाइन उपलब्ध हो. साथ ही मोबाइल पर ट्रांज़िशन आसानी से हो.
संभावित सुधार
असल में हम बस यह बताते हैं कि मुख्य यूज़र इंटरफ़ेस (यूआई) मौजूद न होने की वजह से, शुरुआती UX को लेकर भ्रम की स्थिति पैदा होती है. इनके अलावा, बहुत बढ़िया!
जेक आर्किबाल्ड के साथ सवाल-जवाब
वेब क्यों?
आलस. कुल आलस. मैं Windows के खास ऐप्लिकेशन डेवलप करने में माहिर नहीं हूं, न ही मैं Nexus के खास ऐप बनाने में विशेषज्ञ हूं, न ही मैं iOS, Android, Windows Phone या Linux के लिए खास ऐप बनाने में विशेषज्ञ हूं. हालांकि, मैं वेब पर काम कर सकती हूँ और उस हुनर की वजह से, मुझे एक बार कुछ ऐसा बनाने का मौका मिला जो उन सभी प्लैटफ़ॉर्म पर काम करता.
गेम बनाने के दौरान उसमें क्या अच्छा लगा?
मैं इसके परफ़ॉर्मेंस से वाकई खुश हूं. मैं यह पक्का करता हूं कि JS उपलब्ध होने से पहले पेज रेंडर हो जाए. असल में, कुछ इनलाइन सीएसएस और SVG के साथ, यह पहली बार सिर्फ़ 5k एचटीएमएल के साथ रेंडर होता है. मुख्य स्क्रिप्ट और सीएसएस, सभी को बैकग्राउंड में लोड किया जाता है. इसका मतलब है कि साइट खाली कैश के साथ 3G पर भी 1.5 सेकंड में लोड होती दिखती है और इनमें से ज़्यादातर डीएनएस और एसएसएल होते हैं.
शुरुआती स्क्रीन बहुत आसान है. इसलिए, 5K में ऐसा करना कोई चुनौती नहीं थी. इससे मुझे काफ़ी परेशानी होती है कि कई साइटें अपने पहले रेंडर के लिए JS का इंतज़ार करती हैं. कुछ साइटों को रेंडर करने से पहले आगे के अनुरोध करने के लिए, JS की ज़रूरत होती है. इससे 3G रेंडर होने में लगने वाला समय 10 सेकंड हो जाता है - मोबाइल उपयोगकर्ता के तौर पर मुझे पता है कि मैं इसके साथ समय नहीं करूंगी.
मुख्य JS 15k है. हालांकि, इसमें SVG को पार्स और छोटा करने वाले हिस्से शामिल नहीं होते, जिन्हें बैकग्राउंड में एक और फ़ेज़ के तौर पर लोड किया जाता है. यह बहुत अच्छी बात है, क्योंकि इंटरैक्टिविटी काफ़ी तेज़ी से बढ़ जाती है और उपयोगकर्ता को ज़्यादा लोडिंग की ज़रूरत नहीं पड़ती. अगर उपयोगकर्ता किसी SVG को उस स्क्रिप्ट के उपलब्ध होने से पहले ही चुन लेता है, तो उस स्क्रिप्ट को लोड करना, प्रोसेस होने में लगने वाले समय का हिस्सा लगता है.
मैंने इसे ऑफ़लाइन काम करने के लिए ServiceWorker का भी इस्तेमाल किया. ऑफ़लाइन काम करना एक शानदार सुविधा है, लेकिन मैं प्रदर्शन का बेहतर तरीके से इस्तेमाल करने के लिए ऐसा कर रही हूं. SVGOMG पर बाद में जाने पर, उपयोगकर्ता के पास चाहे जो भी कनेक्शन हो, वह करीब-करीब तुरंत रेंडर हो जाता है. मोबाइल कनेक्टिविटी में वैरिएशन को देखते हुए यह करना बहुत मायने रखता है!
अगर आपके पास अपने ऐप्लिकेशन को बेहतर बनाने के लिए कोई एपीआई होता, तो वह क्या होता?
मैंने Nearby का इस्तेमाल किया, ताकि मैं JavaScript से जुड़ी सुविधाओं का इस्तेमाल कर पाऊं. तो बेहतर होगा कि कुछ टूल हमारे प्लैटफ़ॉर्म पर स्थानीय तौर पर काम करें. खास तौर पर, एक साथ काम नहीं करने वाली/इंतज़ार, ऐरो फ़ंक्शन, तर्क डिफ़ॉल्ट, और नुकसान पहुंचाने वाली चीज़ें.
मुझे आउटपुट को gzip करने के लिए लाइब्रेरी का इस्तेमाल करना पड़ा था, ताकि उसके gzip किए गए साइज़ का पता लगाया जा सके. इसके लिए लाइब्रेरी का इस्तेमाल करना कुछ हद तक परेशान करता है, क्योंकि एचटीटीपी प्रॉडक्ट के लिए ब्राउज़र में यह कोड पहले से ही मौजूद है, इसलिए इसके लिए कोई एपीआई नहीं है. आम तौर पर, यह ट्रांसफ़ॉर्मेशन स्ट्रीम होनी चाहिए, ताकि मैं मेमोरी में मौजूद सभी चीज़ों को आउटपुट के साइज़ के बिना गिन सकूँ.