একই মানচিত্র, তিন উপায়: SVG, Rust এবং Flutter

EVnSteven একটি আরামদায়ক অবস্থানে পৌঁছেছে। প্ল্যাটফর্মটি স্থিতিশীল এবং বেশি রক্ষণাবেক্ষণের প্রয়োজন নেই, যা আমরা শুরু করার সময় চেয়েছিলাম: একটি ছোট সিস্টেম যা শান্তভাবে কাজ চালিয়ে যায়। এটি পরীক্ষা-নিরীক্ষার জন্য কিছুটা জায়গা রেখে দিয়েছে, এবং এটি আমাদের প্রতিষ্ঠাতাদের কয়েকটি অন্য প্রকল্প শুরু করার সময় দিয়েছে, যা আপনি শেষে পাবেন।

তাই আমরা একটি পরীক্ষা চালিয়েছি। আমরা আমাদের হোম পেজের মানচিত্রটি নিয়ে দুবার পুনর্নির্মাণ করেছি: একবার Rust এ কম্পাইল করা WebAssembly তে, এবং একবার Flutter এ। এই নিবন্ধটি তিনটিকেই এক পৃষ্ঠায় রাখে এবং তাদের তুলনা করে।

১. মূল: SVG, CSS এবং একটু JavaScript

সরল ভাষায়: এটি আমাদের হোম পেজের মানচিত্র। এটি ওয়েব পেজের বাকি অংশের মতোই তৈরি: একটি অঙ্কন যা আকার নিয়ে গঠিত এবং আপনার ব্রাউজার ইতিমধ্যে কিভাবে প্রদর্শন ও অ্যানিমেট করতে হয় তা জানে। এটি তিনটির মধ্যে সবচেয়ে সহজ, এবং এটি সবচেয়ে বেশি দর্শক দেখে।

এটি একটি SVG অঙ্কন। ব্রাউজার অধিকাংশ অ্যানিমেশন CSS থেকে চালায়, এবং একটি ছোট স্ক্রিপ্ট বাকি অংশ পরিচালনা করে।

এর সুবিধা হলো: কোনো বিল্ড ধাপ নেই, তাই একটি Hugo টেমপ্লেটই যথেষ্ট। এটি ভেক্টর, তাই যেকোনো আকারে এটি তীক্ষ্ণ থাকে। সব ৪৪টি ডট কীবোর্ড দিয়ে পৌঁছানো যায়, প্রতিটির জন্য স্ক্রিন রিডারের জন্য একটি লেবেল আছে। এবং এর কয়েকটি শব্দ আমাদের সব ভাষায় অনূদিত।

মূল্য হলো পৃষ্ঠার ওজন। মানচিত্রের মার্কআপ প্রায় ১০৭ KB (প্রায় ৩০ KB সংকুচিত), এবং চালু অবস্থায় এতে প্রায় ৬৭০ টি উপাদান এবং প্রায় ২০০ টি CSS অ্যানিমেশন থাকে। লজিক পরীক্ষা করাও কঠিন: টাইমিং CSS কীফ্রেম এবং পৃষ্ঠার একটি স্ক্রিপ্টের মধ্যে থাকে, তাই একমাত্র পরীক্ষা হলো এটি দেখা।

২. রাস্ট এবং ওয়েবঅ্যাসেম্বলি

সরল ভাষায়: রাস্ট একটি প্রোগ্রামিং ভাষা যা দ্রুততার জন্য এবং প্রোগ্রাম চালানোর আগে অনেক ভুল ধরার জন্য পরিচিত। এখানে আমরা মানচিত্রের “মস্তিষ্ক” রাস্তেই লিখেছি, এটিকে একটি সংক্ষিপ্ত ফর্মে প্যাকেজ করেছি যা ব্রাউজার চালাতে পারে (যাকে ওয়েবঅ্যাসেম্বলি বলা হয়), এবং এটিকে পুরো মানচিত্র নিজেই আঁকতে দিয়েছি, যেমন একজন চিত্রশিল্পী প্রতি সেকেন্ডে একাধিকবার একটি ক্যানভাস পুনরায় আঁকে। আপনার কাছে এটি একই রকমই দেখায়।

পুরো মানচিত্র একটি একক ক্যানভাসে আঁকা হয়েছে রাস্ট দ্বারা যা ওয়েবঅ্যাসেম্বলি-তে কম্পাইল করা হয়েছে। রাস্ট কোড মানচিত্রের সমস্ত আচরণের মালিক এবং প্রতিটি ফ্রেমে সবকিছু পুনরায় আঁকে।

আমরা যা পছন্দ করেছি তা হলো লজিক সম্পূর্ণ রাষ্টে, ব্রাউজারের কোনো অংশ ছাড়া: কোথায় কী যাবে এবং কখন পরিবর্তন হবে তার গণিত, এবং ল্যান্ড আউটলাইন পড়ার পার্সার। এতে ১৩টি টেস্ট রয়েছে যা অল্প সময়ে চলে, এবং যদি সাইকেলের সময় ভুল হয়, তাহলে টেস্ট ব্যর্থ হয়, কেউ লক্ষ্য করার আগে যে এটি অদ্ভুত দেখাচ্ছে। প্রায় ১,০৭০ লাইনের রাস্ট কোডের প্রায় এক তৃতীয়াংশই সেই পরীক্ষিত কোর (টেস্ট সহ); বাকি অংশ ক্যানভাসে আঁকে এবং মাউস ইভেন্ট পরিচালনা করে।

পেজটি খুবই হালকা হয়: একটি ক্যানভাস উপাদান। কিন্তু ডাউনলোড বড়। কম্পাইল করা মডিউল প্রায় ২৫৪ কেবি (প্রায় ৯২ কেবি কম্প্রেসড) এবং প্রায় ২৮ কেবি জাভাস্ক্রিপ্ট গ্লু যা বিল্ড টুল তৈরি করে। এবং কাজ করার সময় আমরা কিছু খরচ অনুভব করি:

• একটি টুলচেইন। বিল্ড করার জন্য Rust, WebAssembly টার্গেট এবং একটি কমান্ড-লাইন টুল প্রয়োজন যার সংস্করণ অবশ্যই লাইব্রেরির সাথে একেবারে মিলে যেতে হবে। আমাদের বিল্ড স্ক্রিপ্ট প্রথমে টেস্ট চালায় এবং যদি কোনো একটি ব্যর্থ হয় তবে থেমে যায়।
• ব্যক্তিগত শহরগুলিতে কীবোর্ড বা স্ক্রিন-রিডার অ্যাক্সেস নেই। একটি ক্যানভাস একটি ছবি। SVG সংস্করণের ৪৪টি ফোকাসযোগ্য ডট চলে গেছে।
• শুধুমাত্র ইংরেজি। লেবেলগুলি প্রোগ্রামে লেখা আছে।
• ব্লার। নরম ছায়ার প্রান্ত একটি ক্যানভাস ব্লার ফিল্টার ব্যবহার করে, যা সব ব্রাউজার সমর্থন করে না। আমরা Safari পরীক্ষা করিনি, যেখানে প্রান্তটি কঠিন হতে পারে।

৩. Flutter

সরল ভাষায়: Flutter হলো Google-এর একটি টুলকিট যা একই কোড থেকে ফোন, কম্পিউটার এবং ওয়েবে চলা অ্যাপ তৈরি করতে ব্যবহৃত হয়। এটি ওয়েব পেজের নিজস্ব বিল্ডিং ব্লক ব্যবহার করে না। এটি সবকিছু নিজেই আঁকে। এখানে মানচিত্রটি একটি ছোট অ্যাপ যা এই পৃষ্ঠার ভিতরে প্রদর্শিত হয়েছে, একই টুলকিট যা আমাদের চার্জিং ক্যালকুলেটর চালায়।

এটি একটি কাস্টম পেইন্টার দিয়ে মানচিত্র আঁকে, এবং এটি এখানে একটি ফ্রেমে প্রদর্শিত হয়েছে। Flutter একই কোড থেকে ফোন এবং ডেস্কটপ অ্যাপও তৈরি করতে পারে, যা এর প্রধান যুক্তি: মানচিত্র একবার লিখুন, একাধিক স্থানে চালান।

এটি একই যুক্তি যেমন Rust ম্যাপের, Dart-এ পোর্ট করা হয়েছে, ১১টি টেস্ট সহ। প্রায় ১,১০০ লাইন টেস্ট সহ। Flutter প্রতিটি শহরকে স্ক্রিন রিডারদের জন্য একটি লেবেলযুক্ত বোতাম হিসেবে হ্যান্ডল করে, যা ক্যানভাস সংস্করণে নেই (আমরা এখনও পরীক্ষা করিনি এটি একটি বাস্তব স্ক্রিন রিডারের সাথে কতটা ভালো কাজ করে)। এটি সবচেয়ে বড় ডাউনলোডও: অ্যাপটি প্রায় ১.৮ এমবি (প্রায় ৫৩৫ কেবি কম্প্রেসড)। 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) নগদ ব্যবহারকারীদের জন্য একটি টুইস্ট সহ অসম্পূর্ণ হিসাবরক্ষণ। কয়েকটি ট্যাপে একটি ক্রয় লগ করুন, আপনার ওয়ালেটে যা আছে তা গণনা করুন, এবং ফিরে দেখুন কী মূল্যবান ছিল। টুইস্ট হল যে যারা নগদ ব্যবহার চালিয়ে যান তারা সবাই অন্যদের জন্য নগদ ব্যবস্থাকে টিকিয়ে রাখতে সাহায্য করেন। বিনামূল্যে এবং বিজ্ঞাপন-মুক্ত, অ্যান্ড্রয়েড ও আইফোনে আসছে, এখন একটি বিটা এবং ওয়েব ডেমো চলছে।