एक ही नक्शा, तीन तरीके: SVG, Rust और Flutter

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

तो हमने एक प्रयोग किया। हमने हमारे होम पेज पर नक्शा लिया और उसे दो बार पुनर्निर्मित किया: एक बार Rust में WebAssembly के लिए संकलित किया, और एक बार Flutter में। यह लेख तीनों को एक पृष्ठ पर रखता है और उनकी तुलना करता है।

1. मूल: SVG, CSS और थोड़ा JavaScript

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

यह एक SVG चित्र है। ब्राउज़र अधिकांश एनिमेशन CSS से चलाता है, और एक छोटा स्क्रिप्ट बाकी संभालता है।

इसके पक्ष में: कोई बिल्ड चरण नहीं है, इसलिए एक Hugo टेम्पलेट ही इसके लिए पर्याप्त है। यह वेक्टर है, इसलिए यह किसी भी आकार में तेज रहता है। सभी 44 डॉट्स कीबोर्ड से पहुँचे जा सकते हैं, प्रत्येक के लिए स्क्रीन रीडर के लिए एक लेबल है। और इसके कुछ शब्द हमारी सभी भाषाओं में अनुवादित हैं।

मूल्य पृष्ठ में भार है। नक्शे का मार्कअप लगभग 107 KB है (लगभग 30 KB संकुचित), और चलने पर इसमें लगभग 670 तत्व और लगभग 200 CSS एनिमेशन होते हैं। लॉजिक का परीक्षण भी कठिन है: समय CSS की-फ्रेम्स और पृष्ठ में एक स्क्रिप्ट के अंदर रहता है, इसलिए एकमात्र परीक्षण इसे देखकर करना होता है।

2. रस्ट और वेबअसेंबली

सरल शब्दों में: रस्ट एक प्रोग्रामिंग भाषा है जो तेज़ होने और प्रोग्राम चलने से पहले कई गलतियों को पकड़ने के लिए जानी जाती है। यहाँ हमने नक्शे का “मस्तिष्क” रस्ट में लिखा, इसे एक संक्षिप्त रूप में पैक किया जिसे ब्राउज़र चला सकते हैं (जिसे वेबअसेंबली कहा जाता है), और इसे पूरे नक्शे को खुद ही रंगने दिया, जैसे एक चित्रकार एक कैनवास को कई बार प्रति सेकंड फिर से रंगता है। आपके लिए यह एक जैसा ही दिखता है।

पूरा नक्शा एक ही कैनवास पर रस्ट द्वारा ड्रॉ किया जाता है जिसे वेबअसेंबली में संकलित किया गया है। रस्ट कोड नक्शे के सभी व्यवहार का मालिक है और हर फ्रेम में सब कुछ फिर से ड्रॉ करता है।

हमें जो हिस्सा पसंद आया वह यह है कि लॉजिक पूरी तरह से रस्ट में है जिसमें ब्राउज़र से कुछ भी नहीं है: जहाँ चीजें जाती हैं और कब बदलती हैं इसका गणित, और वह पार्सर जो भूमि की रूपरेखा पढ़ता है। इसमें 13 परीक्षण हैं जो एक सेकंड के अंश में चलते हैं, और अगर चक्र का समय गलत होता है, तो कोई परीक्षण असफल हो जाता है बजाय इसके कि कोई इसे अजीब दिखता हुआ नोटिस करे। लगभग 1,070 रस्ट लाइनों में से लगभग एक तिहाई वह परीक्षण किया गया कोर है (अपने परीक्षणों के साथ); बाकी कैनवास पर ड्रॉ करता है और माउस इवेंट्स को संभालता है।

पेज अंततः बहुत हल्का होता है: एक कैनवास एलिमेंट। लेकिन डाउनलोड बड़ा होता है। संकलित मॉड्यूल लगभग 254 KB है (लगभग 92 KB संकुचित) साथ ही लगभग 28 KB जावास्क्रिप्ट ग्लू है जो बिल्ड टूल जनरेट करता है। और जब हम इस पर काम करते हैं तो हमें कुछ लागत महसूस होती है:

• एक टूलचेन। बिल्डिंग के लिए Rust, WebAssembly टारगेट और एक कमांड-लाइन टूल की आवश्यकता होती है जिसका संस्करण लाइब्रेरी के संस्करण से बिल्कुल मेल खाना चाहिए। हमारा बिल्ड स्क्रिप्ट पहले टेस्ट चलाता है और यदि कोई टेस्ट फेल होता है तो रुक जाता है।
• व्यक्तिगत शहरों के लिए कोई कीबोर्ड या स्क्रीन-रीडर एक्सेस नहीं। एक कैनवास एक चित्र है। SVG संस्करण के 44 फोकस योग्य डॉट्स गायब हो गए हैं।
• केवल अंग्रेज़ी। लेबल प्रोग्राम में लिखे गए हैं।
• ब्लर। सॉफ्ट शैडो एज एक कैनवास ब्लर फ़िल्टर का उपयोग करता है, जिसे हर ब्राउज़र सपोर्ट नहीं करता। हमने Safari का परीक्षण नहीं किया है, जहां एज कठोर हो सकता है।

3. Flutter

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

यह नक्शा एक कस्टम पेंटर के साथ पेंट करता है, और इसे यहाँ एक फ्रेम में दिखाया गया है। Flutter एक ही कोड से फोन और डेस्कटॉप ऐप्स भी बना सकता है, जो इसका मुख्य तर्क है: नक्शा एक बार लिखें, कई जगह चलाएं।

यह वही तर्क है जो Rust मानचित्र का है, Dart में पोर्ट किया गया है, जिसमें 11 परीक्षण हैं। परीक्षणों सहित लगभग 1,100 पंक्तियाँ। Flutter प्रत्येक शहर को स्क्रीन रीडर को एक लेबल वाले बटन के रूप में देता है, जो कैनवास संस्करण में नहीं है (हमने यह नहीं जांचा है कि यह एक वास्तविक स्क्रीन रीडर के साथ कितना अच्छा काम करता है)। यह सबसे बड़ा डाउनलोड भी है: ऐप लगभग 1.8 एमबी है (लगभग 535 केबी संकुचित)। Flutter का ड्राइंग इंजन एक अतिरिक्त डाउनलोड है, लेकिन साइट पहले से ही एक प्रति कैलकुलेटर के साथ साझा करती है, इसलिए जो आगंतुक कैलकुलेटर खोल चुके हैं वे इसे फिर से डाउनलोड नहीं करते। इसका टेक्स्ट साइट के फ़ॉन्ट Merriweather में सेट है, जिसे ब्राउज़र रन टाइम पर लाता है।

हमने क्या पाया

गति पर एक और नोट। हमारी जांच में, SVG मानचित्र और Rust मानचित्र दोनों स्क्रीन के रिफ्रेश दर पर चले (परीक्षण डिस्प्ले पर लगभग 120 फ्रेम प्रति सेकंड), इसलिए फ्रेम दर ने उन्हें अलग नहीं किया। हमने Flutter की फ्रेम दर मापी नहीं, और न ही बैटरी या CPU उपयोग मापा, इसलिए हम यह नहीं कह सकते कि फोन पर कौन सा हल्का है।

ऐसी चीजें जिन्होंने हमें आश्चर्यचकित किया

कुछ विवरण गलत समझना आसान होता है। हमारे पहले क्लोन ने कुंजी और घड़ियों को मानचित्र के एक निश्चित हिस्से पर खींचा, इसलिए वे छोटे स्क्रीन पर सिकुड़ गए और मूल के मुकाबले बहुत छोटे दिखे। मूल पेज के अपने फ़ॉन्ट यूनिट (rem, जो स्क्रीन की चौड़ाई के साथ बदलता है) में आकार देता है। क्लोन अब उस आकार को पेज से पढ़ते हैं। घड़ियाँ भी अलग हैं: मूल की सुइयाँ 15 मिनट के चरणों में चलती हैं, जबकि Rust और Flutter संस्करणों में वे लगातार घूमती हैं।

समय क्षेत्र अंतर्निहित नहीं थे। न तो WebAssembly के लिए संकलित Rust और न ही Dart में ऐसा समय-क्षेत्र डेटाबेस है जो “Asia/Dubai” को जानता हो। दोनों इसके बजाय ब्राउज़र से पूछते हैं, इसके अंतर्निहित Intl सेवा के माध्यम से, जो डेलाइट सेविंग को भी सही ढंग से प्राप्त करता है।

तीनों अपने इनपुट साझा करते हैं। Rust और Flutter मानचित्र उस पेज से शहर की सूची और भूमि की रूपरेखा पढ़ते हैं जिस पर वे हैं, वही डेटा जिसे SVG मानचित्र उपयोग करता है। किसी शहर को बदलें, और तीनों बदल जाते हैं। इसका मतलब यह भी है कि मानचित्र केवल उस पेज पर चल सकते हैं जो उन्हें प्रदान करता है।

Flutter वेब याद रखता है। Flutter वेब अपनी खुद की कैश स्थापित करता है, इसलिए पुनर्निर्माण के बाद भी हम पुराना संस्करण देखते रहे जब तक कि हमने इसे साफ़ नहीं किया।

हमारा निष्कर्ष

SVG मानचित्र होम पेज पर रहता है। इस आकार के चित्र के लिए यह सबसे हल्का है, यह सुलभ है, यह अनुवादित है, और इसे बनाने के लिए कुछ भी आवश्यक नहीं है। Rust अधिक रोचक उपविजेता है: यदि हमें कभी मानचित्र की तर्कशक्ति को प्रमाणित रूप से सही होना चाहिए, या ब्राउज़र में भारी गणना करनी हो, तो एक परीक्षण किया हुआ Rust कोर इसे करने का अच्छा तरीका है। Flutter तब समझ में आता है जब मानचित्र को कभी Flutter ऐप के अंदर रहना हो।

एक प्रयोग को चलाने के लिए उत्पाद को बदलने की आवश्यकता नहीं होती। हमने अंततः यह स्पष्ट तस्वीर प्राप्त की कि प्रत्येक दृष्टिकोण की लागत क्या है, मानचित्र कैसे व्यवहार करता है इसका परीक्षण किया हुआ विवरण, और एक पेज जहाँ आप स्वयं तीनों को देख सकते हैं।

हमारे संस्थापक अगला क्या बना रहे हैं

एक स्थिर प्लेटफ़ॉर्म अन्य विचारों के लिए समय छोड़ता है। EVnSteven के अलावा, हमारे संस्थापक इन पर काम कर रहे हैं:

राइड-हेलिंग, बहुत जल्द लॉन्च हो रहा है Kimem ↗ (opens in a new tab) बाहिर दार, इथियोपिया के लिए एक राइड-हेलिंग सेवा, संस्थापक मेकोनन आलमू से। सवार बुकिंग से पहले किराए का अनुमान देखते हैं, नक्शे पर सबसे नजदीकी ड्राइवर को आते हुए देखते हैं, और यात्रा के अंत में नकद में मीटर किए गए किराए का भुगतान करते हैं।

गैर-लाभकारी, ओपन सोर्स StrayCats ↗ (opens in a new tab) डेविड का एक प्रोजेक्ट जो सड़क पर रहने वाली बिल्लियों, आवारा बिल्लियों, या किसी भी बिल्ली की देखभाल करने वाले लोगों की मदद करता है, भले ही वह बिल्ली कुत्ता ही क्यों न हो। यह अभी विचार चरण में है, अभी कोई ऐप नहीं है, और डेविड आपके विचारों और प्रतिक्रिया का स्वागत करेंगे। सैबो, 2010–2026 को समर्पित।

नकद ट्रैकिंग, मुफ्त, जल्द लॉन्च हो रहा है Effectivo ↗ (opens in a new tab) उन लोगों के लिए एक ट्विस्ट के साथ अपूर्ण लेखांकन जो नकद का उपयोग करते हैं। कुछ टैप्स में खरीदारी लॉग करें, अपने वॉलेट में क्या है गिनें, और देखें कि क्या मूल्यवान था। ट्विस्ट यह है कि जो कोई भी नकद का उपयोग जारी रखता है, वह इसे सभी के लिए बनाए रखने में मदद करता है। मुफ्त और विज्ञापन-रहित, Android और iPhone के लिए आ रहा है, एक बीटा और वेब डेमो अभी चल रहा है।