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