Същата карта, по три начина: 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

С прости думи: Rust е програмен език, известен с това, че е бърз и улавя много грешки преди програмата изобщо да се изпълни. Тук написахме “мозъка” на картата на Rust, опаковахме го в компактен формат, който браузърите могат да изпълняват (наречен WebAssembly), и го оставихме да нарисува цялата карта сам, като художник, който прерисува едно платно много пъти в секунда. За вас изглежда същото.

Цялата карта се рисува върху едно платно от Rust, който е компилиран до WebAssembly. Rust кодът контролира цялото поведение на картата и прерисува всичко при всеки кадър.

Частта, която ни хареса, е че логиката е чист Rust без нищо от браузъра в нея: математиката за това къде се поставят нещата и кога се променят, и парсърът, който чете очертанията на земята. Има 13 теста, които се изпълняват за част от секундата, и ако времето на цикъла е грешно, тестът се проваля, вместо някой да забележи, че изглежда странно. Около една трета от приблизително 1,070 реда Rust са това тествано ядро (с тестовете); останалото рисува върху платното и обработва събития от мишката.

Страницата в крайна сметка е много лека: един елемент canvas. Но изтеглянето е по-голямо. Компилираният модул е около 254 KB (около 92 KB компресиран) плюс около 28 KB JavaScript лепило, което генерира инструментът за билд. И има разходи, които усещаме при работа с него:

• Инструментален комплект. За компилиране са необходими Rust, WebAssembly таргет и команден инструмент, чиято версия трябва да съвпада точно с тази на библиотеката. Нашият скрипт за компилация първо изпълнява тестовете и спира, ако някой от тях се провали.
• Без достъп с клавиатура или екранен четец до отделните градове. Canvas е изображение. Версията със SVG няма 44-те точки, които могат да получат фокус.
• Само на английски. Етикетите са записани в програмата.
• Размазване. Меката сянка по ръба използва canvas blur филтър, който не се поддържа от всеки браузър. Не сме тествали Safari, където ръбът може да изглежда твърд.

3. Flutter

С прости думи: Flutter е инструментален комплект от Google за създаване на приложения, които работят на телефони, компютри и уеб от един и същ код. Той не използва собствените елементи на уеб страницата. Рисува всичко сам. Тук картата е малко приложение, показано вътре в тази страница, същият инструментален комплект, който захранва нашия калькулатор за зареждане.

Той рисува картата с персонализиран художник и тук е показан в рамка. Flutter може също да създава приложения за телефони и настолни компютри от един и същ код, което е неговият основен аргумент: напишете картата веднъж, изпълнявайте я на няколко места.

Това е същата логика като Rust map, пренесена в Dart, с 11 теста. Около 1 100 реда, включително тестовете. Flutter подава всеки град на екранните четци като етикетиран бутон, което версията с canvas няма (не сме проверявали колко добре работи с реален екранен четец). Това е и най-голямото изтегляне: приложението е около 1.8 MB (около 535 KB компресирано). Рендеринг двигателят на 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, с бета версия и уеб демонстрация, работещи сега.