نقشه یکسان، سه روش: SVG، Rust و Flutter

EVnSteven به جایگاه راحتی رسیده است. پلتفرم پایدار است و نیاز زیادی به نگهداری ندارد، که دقیقاً همان چیزی بود که وقتی شروع کردیم می‌خواستیم: یک سیستم کوچک که به آرامی به کار خود ادامه دهد. این اجازه می‌دهد کمی جا برای آزمایش وجود داشته باشد، و به بنیان‌گذاران ما زمان داده است تا چند پروژه دیگر را شروع کنند، که آن‌ها را در انتها خواهید یافت.

پس ما یک آزمایش انجام دادیم. نقشه صفحه اصلی خود را گرفتیم و دو بار بازسازی کردیم: یک بار در Rust کامپایل شده به WebAssembly، و یک بار در Flutter. این مقاله هر سه را در یک صفحه قرار می‌دهد و آن‌ها را مقایسه می‌کند.

۱. نسخه اصلی: SVG، CSS و کمی JavaScript

به زبان ساده: این همان نقشه صفحه اصلی ما است. این نقشه به همان روشی ساخته شده که بقیه صفحه وب ساخته می‌شود: یک تصویر ساخته شده از اشکالی که مرورگر شما قبلاً می‌داند چگونه آن‌ها را نمایش دهد و انیمیشن کند. این ساده‌ترین نسخه از بین سه نسخه است و بیشترین بازدیدکنندگان آن را می‌بینند.

این یک تصویر SVG است. مرورگر بیشتر انیمیشن‌ها را از CSS اجرا می‌کند، و یک اسکریپت کوچک بقیه را مدیریت می‌کند.

به نفع آن: هیچ مرحله ساختی وجود ندارد، بنابراین یک قالب Hugo همه چیزی است که نیاز دارد. این تصویر برداری است، بنابراین در هر اندازه‌ای واضح باقی می‌ماند. همه ۴۴ نقطه با صفحه‌کلید قابل دسترسی هستند، هر کدام با برچسبی برای صفحه‌خوان‌ها. و چند کلمه آن به همه زبان‌های ما ترجمه شده است.

هزینه آن وزن در صفحه است. نشانه‌گذاری نقشه حدود ۱۰۷ کیلوبایت است (حدود ۳۰ کیلوبایت فشرده شده)، و پس از اجرا حدود ۶۷۰ عنصر و حدود ۲۰۰ انیمیشن CSS دارد. منطق آن نیز سخت تست می‌شود: زمان‌بندی در داخل keyframes CSS و یک اسکریپت در صفحه قرار دارد، بنابراین تنها تست دیدن آن است.

۲. راست و وب‌اسمبلی

به زبان ساده: راست یک زبان برنامه‌نویسی است که به خاطر سرعت بالا و توانایی در یافتن بسیاری از اشتباهات پیش از اجرای برنامه شناخته شده است. در اینجا «مغز» نقشه را با راست نوشتیم، آن را به شکل فشرده‌ای بسته‌بندی کردیم که مرورگرها بتوانند اجرا کنند (که به آن وب‌اسمبلی می‌گویند)، و اجازه دادیم خودش کل نقشه را بکشد، مثل یک نقاش که یک بوم را بارها در ثانیه دوباره نقاشی می‌کند. برای شما همانطور به نظر می‌رسد.

کل نقشه روی یک بوم واحد توسط راست که به وب‌اسمبلی کامپایل شده کشیده می‌شود. کد راست مالک تمام رفتار نقشه است و هر فریم همه چیز را دوباره می‌کشد.

قسمتی که دوست داشتیم این بود که منطق کاملاً راست ساده است و هیچ چیزی از مرورگر در آن نیست: ریاضیات برای تعیین مکان اشیاء و زمان تغییر آن‌ها، و پارسری که خط ساحلی زمین را می‌خواند. این کد ۱۳ تست دارد که در کسری از ثانیه اجرا می‌شوند، و اگر زمان‌بندی چرخه اشتباه باشد، یک تست شکست می‌خورد به جای اینکه کسی متوجه شود که ظاهرش عجیب است. حدود یک سوم از تقریباً ۱۰۷۰ خط کد راست، هسته‌ای است که تست شده (به همراه تست‌هایش)؛ بقیه برای کشیدن روی بوم و مدیریت رویدادهای ماوس است.

صفحه در نهایت بسیار سبک می‌شود: یک عنصر بوم. اما دانلود بزرگ‌تر است. ماژول کامپایل شده حدود ۲۵۴ کیلوبایت است (حدود ۹۲ کیلوبایت فشرده شده) به علاوه حدود ۲۸ کیلوبایت چسب جاوااسکریپت که ابزار ساخت تولید می‌کند. و هزینه‌هایی وجود دارد که هنگام کار روی آن احساس می‌کنیم:

• یک زنجیره ابزار. ساخت نیازمند Rust، هدف WebAssembly و یک ابزار خط فرمان است که نسخه آن باید دقیقاً با نسخه کتابخانه مطابقت داشته باشد. اسکریپت ساخت ما ابتدا تست‌ها را اجرا می‌کند و اگر یکی شکست خورد، متوقف می‌شود.
• دسترسی صفحه‌کلید یا صفحه‌خوان به شهرهای جداگانه وجود ندارد. یک بوم نقاشی یک تصویر است. نسخه SVG که ۴۴ نقطه قابل فوکوس داشت، حذف شده‌اند.
• فقط انگلیسی. برچسب‌ها در برنامه نوشته شده‌اند.
• تاری. لبه سایه نرم از فیلتر تاری بوم استفاده می‌کند که همه مرورگرها از آن پشتیبانی نمی‌کنند. ما سافاری را آزمایش نکرده‌ایم، جایی که ممکن است لبه سخت باشد.

۳. فلاتر

به زبان ساده: فلاتر یک مجموعه ابزار از گوگل برای ساخت برنامه‌هایی است که روی تلفن‌ها، کامپیوترها و وب از یک مجموعه کد اجرا می‌شوند. این مجموعه از بلوک‌های ساخت صفحه وب استفاده نمی‌کند. همه چیز را خودش رسم می‌کند. در اینجا نقشه یک برنامه کوچک است که داخل این صفحه نمایش داده شده است، همان مجموعه ابزاری که برنامه ماشین حساب شارژ ما را پشتیبانی می‌کند.

نقشه را با یک نقاش سفارشی می‌کشد و اینجا در یک قاب نمایش داده شده است. فلاتر همچنین می‌تواند برنامه‌های تلفن و دسکتاپ را از همان کد بسازد، که استدلال اصلی آن است: نقشه را یک بار بنویسید، در چند جا اجرا کنید.

منطق همان منطق نقشه Rust است که به Dart منتقل شده است، با ۱۱ تست. حدود ۱۱۰۰ خط کد شامل تست‌ها. Flutter هر شهر را به عنوان یک دکمه برچسب‌گذاری شده به صفحه‌خوان‌ها ارائه می‌دهد، که نسخه canvas این ویژگی را ندارد (ما بررسی نکرده‌ایم که چقدر با یک صفحه‌خوان واقعی خوب کار می‌کند). همچنین بزرگ‌ترین دانلود است: برنامه حدود ۱.۸ مگابایت است (حدود ۵۳۵ کیلوبایت فشرده شده). موتور رسم 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) حسابداری ناقص با یک پیچش، برای کسانی که از پول نقد استفاده می‌کنند. خریدها را با چند ضربه ثبت کنید، موجودی کیف پول خود را بشمارید و به گذشته نگاه کنید که چه چیزی ارزشش را داشته است. پیچش این است که هر کسی که به استفاده از پول نقد ادامه می‌دهد به حفظ آن برای دیگران کمک می‌کند. رایگان و بدون تبلیغات، در حال آمدن به اندروید و آیفون، با نسخه بتا و نسخه نمایشی وب که هم‌اکنون فعال است.