तीच नकाशा, तीन मार्ग: SVG, Rust आणि Flutter

EVnSteven एका आरामदायक ठिकाणी पोहोचला आहे. प्लॅटफॉर्म स्थिर आहे आणि त्याला जास्त देखभाल लागत नाही, जे आम्हाला सुरुवातीला हवे होते: एक लहान प्रणाली जी शांतपणे काम करत राहते. त्यामुळे प्रयोग करण्यासाठी थोडेसे स्थान राहिले आहे, आणि यामुळे आमच्या संस्थापकांना काही इतर प्रकल्प सुरू करण्यासाठी वेळ मिळाला आहे, जे तुम्हाला शेवटी सापडतील.

मग आम्ही एक प्रयोग केला. आम्ही आमच्या मुख्य पानावरील नकाशा घेतला आणि तो दोनदा पुन्हा तयार केला: एकदा Rust मध्ये WebAssembly साठी संकलित करून, आणि एकदा Flutter मध्ये. हा लेख तीनही एका पानावर ठेवतो आणि त्यांची तुलना करतो.

1. मूळ: SVG, CSS आणि थोडे JavaScript

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

हा एक SVG आकृती आहे. ब्राउझर CSS मधील बहुतेक अॅनिमेशन्स चालवतो, आणि एक लहान स्क्रिप्ट उरलेले हाताळतो.

त्याच्या बाजूने: कोणताही बिल्ड स्टेप नाही, त्यामुळे फक्त Hugo टेम्पलेट पुरेसं आहे. हा व्हेक्टर आहे, त्यामुळे कोणत्याही आकारात तो स्पष्ट राहतो. सर्व 44 डॉट्स कीबोर्डने पोहोचता येतात, प्रत्येकासाठी स्क्रीन रीडर्ससाठी लेबल आहे. आणि त्यातील काही शब्द आमच्या सर्व भाषांमध्ये अनुवादित आहेत.

खर्च म्हणजे पानातील वजन. नकाश्याचा मार्कअप सुमारे 107 KB आहे (सुमारे 30 KB संकुचित), आणि चालू असताना त्यात सुमारे 670 घटक आणि सुमारे 200 CSS अॅनिमेशन्स असतात. लॉजिक देखील तपासणे कठीण आहे: वेळ CSS कीफ्रेम्स आणि पानातील स्क्रिप्टमध्ये असते, त्यामुळे एकमेव तपासणी म्हणजे त्याकडे पाहणे.

2. रस्ट आणि वेबअसेम्ब्ली

सोप्या भाषेत: रस्ट ही एक प्रोग्रामिंग भाषा आहे जी वेगवान असल्याने आणि प्रोग्राम चालू होण्यापूर्वी अनेक चुका पकडण्यास ओळखली जाते. येथे आम्ही नकाशाचा “मेंदू” रस्टमध्ये लिहिला, त्याला वेबअसेम्ब्ली नावाच्या एका संक्षिप्त स्वरूपात पॅक केले जे ब्राउझर चालवू शकतो, आणि त्याला संपूर्ण नकाशा स्वतः रंगवू दिला, जसे एखादा चित्रकार एका कॅनव्हासवर सेकंदाला अनेक वेळा पुन्हा चित्र काढतो. तुमच्यासाठी ते त्याचप्रमाणे दिसते.

संपूर्ण नकाशा एका कॅनव्हासवर रस्टने काढला जातो जो वेबअसेम्ब्लीमध्ये संकलित केला गेला आहे. रस्ट कोड नकाशाच्या सर्व वर्तनाचा मालक आहे आणि प्रत्येक फ्रेममध्ये सर्व काही पुन्हा काढतो.

आम्हाला आवडलेला भाग म्हणजे लॉजिक पूर्णपणे रस्टमध्ये आहे आणि त्यात ब्राउझरचे काहीही नाही: वस्तू कुठे जातात आणि केव्हा बदलतात यासाठी गणित, आणि जमीन रेषा वाचणारा पार्सर. त्यात १३ चाचण्या आहेत ज्या सेकंदाच्या एका भागात चालतात, आणि जर सायकलची वेळ चुकीची असेल तर चाचणी अयशस्वी होते, लोकांना विचित्र दिसल्याचे लक्षात येण्याऐवजी. अंदाजे १,०७० रस्तच्या ओळींपैकी सुमारे एक तृतीयांश हा चाचण्या असलेला कोर भाग आहे; उर्वरित कॅनव्हासवर काढतो आणि माऊस इव्हेंट्स हाताळतो.

पृष्ठ खूप हलके होते: एकच कॅनव्हास एलिमेंट. पण डाउनलोड मोठा आहे. संकलित मॉड्यूल सुमारे २५४ केबी (सुमारे ९२ केबी संकुचित) आणि सुमारे २८ केबी जावास्क्रिप्ट ग्लू जो बिल्ड टूल तयार करते. आणि त्यावर काम करताना आम्हाला काही खर्च जाणवतात:

• एक टूलचेन. बिल्डिंगसाठी Rust, WebAssembly टार्गेट आणि एक कमांड-लाइन टूल आवश्यक आहे ज्याचा आवृत्ती लायब्ररीशी अगदी जुळणारा असावा. आमचा बिल्ड स्क्रिप्ट प्रथम चाचण्या चालवतो आणि जर एखादी चाचणी अयशस्वी झाली तर थांबतो.
• वैयक्तिक शहरांवर कीबोर्ड किंवा स्क्रीन-रीडर प्रवेश नाही. कॅनव्हास म्हणजे एक चित्र आहे. SVG आवृत्तीतील 44 फोकस करण्यायोग्य डॉट्स गेले आहेत.
• फक्त इंग्रजी. लेबले प्रोग्राममध्ये लिहिलेली आहेत.
• ब्लर. मऊ सावलीच्या कडीसाठी कॅनव्हास ब्लर फिल्टर वापरला जातो, जो प्रत्येक ब्राउझर समर्थित करत नाही. आम्ही Safari तपासलेले नाही, जिथे कडा कडक असू शकते.

3. Flutter

सोप्या भाषेत: Flutter हा Google कडून एक टूलकिट आहे जो फोन, संगणक आणि वेबवर चालणाऱ्या अॅप्ससाठी एकाच कोड सेटमधून अॅप्स तयार करतो. तो वेब पेजच्या स्वतःच्या बिल्डिंग ब्लॉक्सचा वापर करत नाही. तो सर्व काही स्वतः ड्रा करतो. येथे नकाशा हा या पृष्ठात दाखवलेला एक लहान अॅप आहे, तोच टूलकिट जो आमच्या चार्जिंग कॅल्क्युलेटर ला चालना देतो.

तो नकाशा कस्टम पेंटरने रंगवतो, आणि तो येथे फ्रेममध्ये दाखवला आहे. Flutter त्याच कोडमधून फोन आणि डेस्कटॉप अॅप्सही तयार करू शकतो, जे त्याचा मुख्य मुद्दा आहे: नकाशा एकदाच लिहा, अनेक ठिकाणी चालवा.

हे Rust नकाश्याच्या सारख्या तर्काचा वापर करून Dart मध्ये पोर्ट केले आहे, ज्यामध्ये ११ चाचण्या आहेत. सुमारे १,१०० ओळी चाचण्यांसह आहेत. Flutter प्रत्येक शहराला स्क्रीन रीडर्ससाठी लेबल केलेल्या बटणाप्रमाणे हाताळतो, जे कॅनव्हास आवृत्तीमध्ये नाही (आपण अजून तपासले नाही की ते वास्तविक स्क्रीन रीडरसह किती चांगले कार्य करते). हे देखील सर्वात मोठे डाउनलोड आहे: अॅप सुमारे १.८ MB आहे (सुमारे ५३५ KB संकुचित). Flutter चे ड्रॉइंग इंजिन आणखी एक डाउनलोड आहे, पण साइट आधीच कॅल्क्युलेटरसह एक कॉपी शेअर करते, त्यामुळे कॅल्क्युलेटर उघडणारा अभ्यागत ते पुन्हा डाउनलोड करत नाही. त्याचा मजकूर साइटच्या फॉन्टमध्ये सेट केला आहे, Merriweather, जो ब्राउझर रन टाइमवर आणतो.

आम्हाला काय सापडले

गतीबाबत आणखी एक नोंद. आमच्या तपासणीत, SVG नकाशा आणि Rust नकाशा दोन्ही स्क्रीनच्या रिफ्रेश दराने चालले (चाचणी डिस्प्लेमध्ये सुमारे १२० फ्रेम प्रति सेकंद), त्यामुळे फ्रेम दराने त्यांना वेगळे करता आले नाही. आम्ही Flutter चा फ्रेम दर मोजला नाही, आणि बॅटरी किंवा CPU वापर मोजला नाही, त्यामुळे फोनवर कोणता हलका आहे हे आम्ही सांगू शकत नाही.

आम्हाला आश्चर्यचकित करणाऱ्या गोष्टी

काही तपशील सहज चुकू शकतात. आमच्या पहिल्या क्लोनने नकाशावर की आणि घड्याळे निश्चित वाटा दिली, त्यामुळे ते लहान स्क्रीनवर लहान दिसत होते आणि मूळच्या तुलनेत खूप लहान दिसत होते. मूळ पान त्याच्या स्वतःच्या फॉन्ट युनिट (rem, जो स्क्रीनच्या रुंदीशी बदलतो) मध्ये त्याचा आकार ठरवते. क्लोन आता त्या पानाकडून तो आकार वाचतात. घड्याळे देखील वेगवेगळी आहेत: मूळ घड्याळाच्या हातांनी १५ मिनिटांच्या टप्प्यात हालचाल केली, तर Rust आणि Flutter आवृत्त्यांमध्ये ते सतत फिरतात.

टाइम झोन अंगभूत नाहीत. Rust जे WebAssembly मध्ये संकलित होते आणि 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) डेव्हिड यांचा एक प्रकल्प जो रस्त्यावरच्या मांजरींची, भटक्या मांजरींची किंवा कोणत्याही मांजरीची काळजी घेणाऱ्या लोकांना मदत करतो, अगदी ती मांजर कुत्रा असली तरीही. हा अजून कल्पना टप्प्यात आहे, अजून कोणतीही अॅप नाही, आणि डेव्हिडला तुमच्या कल्पना आणि अभिप्राय आवडतील. सैबो यांना समर्पित, २०१०–२०२६.

रोख ट्रॅकिंग, मोफत, लवकरच लॉन्च Effectivo ↗ (opens in a new tab) रोख वापरणाऱ्यांसाठी एक थोडा वेगळा, अपूर्ण लेखा-जोखा. काही टॅप्समध्ये खरेदी नोंदवा, तुमच्या पाकीटात काय आहे ते मोजा, आणि मागे पाहा काय फायदेशीर ठरले. वेगळेपणा असा की रोख वापरणारे प्रत्येकजण इतरांसाठी हा पर्याय टिकवून ठेवण्यास मदत करतो. मोफत आणि जाहिरातमुक्त, अँड्रॉइड आणि आयफोनसाठी येत आहे, सध्या बीटा आणि वेब डेमो चालू आहे.