Одна й та сама карта, трьома способами: SVG, Rust та Flutter

EVnSteven досяг комфортного стану. Платформа стабільна і не потребує багато обслуговування, що саме те, чого ми хотіли на початку: невелика система, яка тихо продовжує працювати. Це залишає трохи простору для експериментів і дало нашим засновникам час почати кілька інших проєктів, які ви знайдете в кінці.

Отже, ми провели експеримент. Ми взяли карту на нашій домашній сторінці і перебудували її двічі: один раз на Rust, скомпільованому у WebAssembly, і один раз на Flutter. Ця стаття розміщує всі три на одній сторінці та порівнює їх.

1. Оригінал: SVG, CSS і трохи JavaScript

Простими словами: це карта на нашій домашній сторінці. Вона побудована так само, як і решта веб-сторінки: малюнок, складений із фігур, які ваш браузер вже вміє відображати та анімувати. Це найпростіший із трьох варіантів, і саме його бачить більшість відвідувачів.

Це один SVG-малюнок. Браузер виконує більшість анімацій за допомогою CSS, а невеликий скрипт обробляє решту.

На його користь: немає кроку збірки, тому достатньо шаблону Hugo. Це вектор, тож він залишається чітким у будь-якому розмірі. Всі 44 точки доступні з клавіатури, кожна має мітку для екранних рідерів. І кілька слів перекладені на всі наші мови.

Вартість — це вага на сторінці. Розмітка карти займає близько 107 КБ (приблизно 30 КБ у стисненому вигляді), а під час роботи має близько 670 елементів і близько 200 CSS-анімацій. Логіку також важко тестувати: таймінг знаходиться всередині CSS keyframes і скрипту на сторінці, тож єдиний тест — це просто дивитися на неї.

2. Rust і WebAssembly

Простими словами: Rust — це мова програмування, відома своєю швидкістю та здатністю виявляти багато помилок ще до запуску програми. Тут ми написали “мозок” карти на Rust, упакували його у компактну форму, яку браузери можуть виконувати (називається WebAssembly), і дозволили йому самостійно малювати всю карту, як художник, що переробляє одне полотно багато разів на секунду. Для вас це виглядає так само.

Вся карта малюється на одному полотні Rust, який було скомпільовано у WebAssembly. Код Rust керує всією поведінкою карти і перерисовує все кожен кадр.

Нам сподобалося, що логіка — це чистий Rust без жодного коду браузера: математика для визначення, де і коли щось змінюється, та парсер, який читає контур землі. Є 13 тестів, які виконуються за частку секунди, і якщо таймінг циклу неправильний, тест не проходить, замість того щоб хтось помітив дивний вигляд. Приблизно третина з близько 1070 рядків Rust — це цей протестований ядро (разом із тестами); решта малює на полотні і обробляє події миші.

Сторінка в результаті дуже легка: один елемент canvas. Але завантаження більше. Скомпільований модуль займає близько 254 КБ (приблизно 92 КБ у стисненому вигляді) плюс близько 28 КБ JavaScript-клею, який генерує інструмент збірки. І є витрати, які ми відчуваємо під час роботи з цим:

• Інструментальний ланцюжок. Для збірки потрібен Rust, ціль WebAssembly та командний інструмент, версія якого має точно відповідати версії бібліотеки. Наш скрипт збірки спочатку запускає тести і зупиняється, якщо один з них не проходить.
• Немає доступу з клавіатури або скрінрідера до окремих міст. Canvas — це зображення. Версія SVG з 44 фокусованими точками зникла.
• Тільки англійською. Написи вбудовані в програму.
• Розмиття. М’яка тіньова межа використовує фільтр розмиття canvas, який не підтримує кожен браузер. Ми не тестували Safari, де межа може бути різкою.

3. Flutter

Простими словами: Flutter — це набір інструментів від Google для створення додатків, які працюють на телефонах, комп’ютерах і в інтернеті з одного набору коду. Він не використовує власні будівельні блоки веб-сторінки. Він малює все сам. Тут карта — це невеликий додаток, показаний всередині цієї сторінки, той самий набір інструментів, що живить наш калькулятор зарядки.

Він малює карту за допомогою власного маляра, і вона показана тут у рамці. Flutter також може створювати додатки для телефонів і настільних комп’ютерів з того самого коду, що є його головним аргументом: написати карту один раз, запускати її в кількох місцях.

Це та сама логіка, що й у Rust map, портована на Dart, з 11 тестами. Близько 1100 рядків коду, включно з тестами. Flutter передає кожне місто для екранних зчитувачів як кнопку з міткою, чого немає у версії на canvas (ми не перевіряли, наскільки добре це працює з реальним екранним зчитувачем). Це також найбільше завантаження: додаток займає близько 1,8 МБ (приблизно 535 КБ у стисненому вигляді). Малювальний движок Flutter — це додаткове завантаження, але сайт уже ділиться однією копією з калькулятором, тож відвідувач, який відкривав калькулятор, не завантажує його повторно. Текст встановлений у шрифті сайту Merriweather, який браузер завантажує під час виконання.

Що ми знайшли

Ще одне зауваження щодо швидкості. За нашою перевіркою, SVG-карта і Rust-карта обидві працювали з частотою оновлення екрану (близько 120 кадрів за секунду на тестовому дисплеї), тому частота кадрів не розрізняла їх. Ми не вимірювали частоту кадрів Flutter і не вимірювали споживання батареї чи ЦП, тому не можемо сказати, який варіант легший для телефону.

Речі, які нас здивували

Деякі деталі легко неправильно зрозуміти. Наші перші клони малювали ключ і годинники з фіксованою часткою карти, тому вони зменшувалися на малих екранах і виглядали крихітними поруч з оригіналом. Оригінал задає їх розмір у власній одиниці шрифту сторінки (rem, яка змінюється залежно від ширини екрану). Клони тепер читають цей розмір зі сторінки. Годинники теж відрізняються: стрілки оригіналу рухаються кроками по 15 хвилин, тоді як у версіях на Rust і Flutter вони обертаються безперервно.

Часові пояси не були вбудовані. Ні Rust, скомпільований у WebAssembly, ні Dart не містять бази даних часових поясів, яка знає “Asia/Dubai”. Обидва звертаються до браузера через його вбудовану службу Intl, яка також правильно враховує літній час.

Всі троє діляться своїми вхідними даними. Карти на Rust і Flutter читають список міст і контури суші зі сторінки, на якій вони знаходяться, ті ж дані, що використовує SVG-карта. Змінюєте місто — змінюються всі троє. Це також означає, що карти можуть працювати лише на сторінці, яка їх надає.

Flutter web запам’ятовує. Flutter web встановлює власний кеш, тому після перебудови ми продовжували бачити стару версію, доки не очистили кеш.

Наш висновок

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, зараз працює бета-версія та веб-демо.