Ta sama mapa, trzy sposoby: SVG, Rust i Flutter

EVnSteven osiągnął wygodne miejsce. Platforma jest stabilna i nie wymaga dużo konserwacji, co dokładnie chcieliśmy, gdy zaczynaliśmy: mały system, który cicho działa. To zostawia trochę miejsca na eksperymenty, a naszym założycielom pozwoliło to rozpocząć kilka innych projektów, które znajdziesz na końcu.

Przeprowadziliśmy więc eksperyment. Wzięliśmy mapę z naszej strony głównej i przebudowaliśmy ją dwukrotnie: raz w Rust skompilowanym do WebAssembly, a raz we Flutterze. Ten artykuł umieszcza wszystkie trzy na jednej stronie i porównuje je.

1. Oryginał: SVG, CSS i trochę JavaScriptu

Prosto mówiąc: to jest mapa na naszej stronie głównej. Zbudowana jest tak, jak reszta strony internetowej: rysunek złożony z kształtów, które Twoja przeglądarka już potrafi wyświetlać i animować. To najprostsza z trzech i to ją widzi większość odwiedzających.

To jeden rysunek SVG. Przeglądarka uruchamia większość animacji z CSS, a mały skrypt obsługuje resztę.

Na jego korzyść: nie ma kroku budowania, więc wystarczy szablon Hugo. To grafika wektorowa, więc pozostaje ostra w dowolnym rozmiarze. Wszystkie 44 kropki są dostępne z klawiatury, każda z etykietą dla czytników ekranu. A jego kilka słów jest przetłumaczonych na wszystkie nasze języki.

Kosztem jest waga na stronie. Znacznik mapy ma około 107 KB (około 30 KB skompresowane), a podczas działania ma około 670 elementów i około 200 animacji CSS. Logika jest też trudna do przetestowania: synchronizacja znajduje się wewnątrz kluczowych klatek CSS i skryptu na stronie, więc jedynym testem jest jej oglądanie.

2. Rust i WebAssembly

Mówiąc prosto: Rust to język programowania znany z szybkości działania oraz z wykrywania wielu błędów zanim program zostanie uruchomiony. Tutaj napisaliśmy „mózg” mapy w Rust, zapakowaliśmy go w kompaktową formę, którą mogą uruchomić przeglądarki (zwaną WebAssembly), i pozwoliliśmy mu samodzielnie malować całą mapę, jak malarz przerysowujący jedno płótno wiele razy na sekundę. Dla Ciebie wygląda to tak samo.

Cała mapa jest rysowana na jednym elemencie canvas przez Rust, który został skompilowany do WebAssembly. Kod Rust zarządza całym zachowaniem mapy i przerysowuje wszystko w każdej klatce.

Część, która nam się spodobała, to fakt, że logika to czysty Rust bez niczego z przeglądarki: matematyka określająca, gdzie co się znajduje i kiedy się zmienia, oraz parser czytający kontur lądu. Ma 13 testów, które uruchamiają się w ułamku sekundy, a jeśli czas cyklu jest nieprawidłowy, test nie przechodzi zamiast tego, by ktoś zauważył, że wygląda to dziwnie. Około jedna trzecia z około 1070 linii Rust to właśnie to testowane jądro (razem z testami); reszta rysuje na canvasie i obsługuje zdarzenia myszy.

Strona końcowo jest bardzo lekka: jeden element canvas. Ale pobranie jest większe. Skompilowany moduł ma około 254 KB (około 92 KB po kompresji) plus około 28 KB kleju JavaScript generowanego przez narzędzie budujące. I są koszty, które odczuwamy podczas pracy nad tym:

• Łańcuch narzędzi. Kompilacja wymaga Rust, celu WebAssembly oraz narzędzia wiersza poleceń, którego wersja musi dokładnie odpowiadać wersji biblioteki. Nasz skrypt budujący najpierw uruchamia testy i zatrzymuje się, jeśli któryś z nich nie powiedzie się.
• Brak dostępu do poszczególnych miast za pomocą klawiatury lub czytnika ekranu. Canvas to obraz. Wersja SVG z 44 punktami możliwymi do ustawienia w fokusu zniknęła.
• Tylko angielski. Etykiety są wpisane bezpośrednio w program.
• Rozmycie. Miękka krawędź cienia używa filtra rozmycia canvas, którego nie wszystkie przeglądarki obsługują. Nie testowaliśmy Safari, gdzie krawędź może być ostra.

3. Flutter

Prosto mówiąc: Flutter to zestaw narzędzi od Google do tworzenia aplikacji działających na telefonach, komputerach i w sieci z jednego zestawu kodu. Nie korzysta z natywnych elementów strony internetowej. Wszystko rysuje samodzielnie. Tutaj mapa to mała aplikacja wyświetlana wewnątrz tej strony, ten sam zestaw narzędzi, który zasila nasz kalkulator ładowania.

Mapa jest malowana za pomocą niestandardowego malarza i jest tutaj pokazana w ramce. Flutter może też tworzyć aplikacje na telefony i komputery z tego samego kodu, co jest jego głównym argumentem: napisz mapę raz, uruchamiaj ją w wielu miejscach.

To ta sama logika co w mapie Rust, przeniesiona do Darta, z 11 testami. Około 1 100 linii łącznie z testami. Flutter przekazuje każde miasto czytnikom ekranu jako oznaczony przycisk, czego brakuje wersji na kanwie (nie sprawdzaliśmy, jak dobrze działa to z prawdziwym czytnikiem ekranu). To także największy plik do pobrania: aplikacja ma około 1,8 MB (około 535 KB skompresowane). Silnik rysowania Fluttera to dodatkowe pobranie, ale strona już dzieli jedną kopię z kalkulatorem, więc odwiedzający, który otworzył kalkulator, nie pobiera go ponownie. Tekst jest ustawiony w czcionce strony, Merriweather, którą przeglądarka pobiera w czasie działania.

Co odkryliśmy

Jeszcze jedna uwaga dotycząca szybkości. W naszym sprawdzeniu mapa SVG i mapa Rust działały z częstotliwością odświeżania ekranu (około 120 klatek na sekundę na testowym wyświetlaczu), więc liczba klatek na sekundę ich nie rozróżniała. Nie mierzyliśmy liczby klatek Fluttera ani zużycia baterii czy CPU, więc nie możemy powiedzieć, która jest lżejsza na telefonie.

Rzeczy, które nas zaskoczyły

Niektóre szczegóły łatwo jest źle zrozumieć. Nasze pierwsze klony rysowały klucz i zegary na stałym udziale mapy, więc na małych ekranach kurczyły się i wyglądały na malutkie w porównaniu z oryginałem. Oryginał ustawia ich rozmiar w jednostce czcionki strony (rem, która zmienia się wraz z szerokością ekranu). Klony teraz odczytują ten rozmiar ze strony. Zegary też się różnią: wskazówki oryginału poruszają się skokowo co 15 minut, podczas gdy w wersjach Rust i Flutter obracają się płynnie.

Strefy czasowe nie były wbudowane. Ani Rust skompilowany do WebAssembly, ani Dart nie zawierają bazy danych stref czasowych, która zna „Asia/Dubai”. Oba pytają o to przeglądarkę, przez jej wbudowaną usługę Intl, która również poprawnie obsługuje czas letni.

Wszystkie trzy dzielą swoje dane wejściowe. Mapy Rust i Flutter odczytują listę miast i kontur lądu ze strony, na której się znajdują, z tych samych danych, które używa mapa SVG. Zmiana miasta powoduje zmianę we wszystkich trzech. Oznacza to również, że mapy mogą działać tylko na stronie, która im to zapewnia.

Flutter web pamięta. Flutter web instaluje własny cache, więc po przebudowie nadal widzieliśmy starą wersję, dopóki go nie wyczyściliśmy.

Nasze wnioski

Mapa SVG pozostaje na stronie głównej. Dla rysunku tej wielkości jest najlżejsza, dostępna, przetłumaczona i nie wymaga budowania. Rust to ciekawszy wicemistrz: jeśli kiedykolwiek będziemy potrzebować, aby logika mapy była dowodowo poprawna lub trzeba wykonać ciężkie obliczenia w przeglądarce, przetestowane jądro w Rust to dobry sposób na to. Flutter ma sens, jeśli mapa kiedykolwiek będzie musiała działać wewnątrz aplikacji Flutter.

Eksperyment nie musi zmieniać produktu, by warto było go przeprowadzić. Uzyskaliśmy jaśniejszy obraz kosztów każdego podejścia, przetestowany opis zachowania mapy oraz stronę, na której możesz zobaczyć wszystkie trzy samodzielnie.

Co nasi założyciele budują dalej

Stabilna platforma daje czas na inne pomysły. Oprócz EVnSteven, nasi założyciele pracują nad tymi projektami:

Usługa przewozu na żądanie, wkrótce start Kimem ↗ (opens in a new tab) Usługa przewozu na żądanie dla Bahir Dar w Etiopii, od założyciela Mekonnena Alemu. Pasażerowie widzą szacunkową cenę przed rezerwacją, obserwują na mapie zbliżającego się najbliższego kierowcę i płacą za przejazd gotówką według licznika na końcu podróży.

Non-profit, open source StrayCats ↗ (opens in a new tab) Projekt Davida, który ma pomóc osobom opiekującym się kotami ulicznymi, bezdomnymi lub jakimkolwiek kotem, nawet jeśli ten kot przypadkiem jest psem. Projekt jest jeszcze na etapie pomysłu, nie ma jeszcze aplikacji, a David chętnie przyjmie Twoje pomysły i opinie. Dedykowany Saibo, 2010–2026.

Śledzenie gotówki, darmowe, wkrótce premiera Effectivo ↗ (opens in a new tab) Niedoskonała księgowość z twistem, dla tych, którzy używają gotówki. Zarejestruj zakup kilkoma stuknięciami, policz co masz w portfelu i przejrzyj, co było warte swojej ceny. Twist polega na tym, że każdy, kto nadal korzysta z gotówki, pomaga utrzymać ją dla wszystkich innych. Darmowa i bez reklam, dostępna na Android i iPhone, z wersją beta i demonstracją webową już działającą.