Aynı Harita, Üç Yolla: SVG, Rust ve Flutter

EVnSteven rahat bir yere ulaştı. Platform stabil ve çok fazla bakım gerektirmiyor, bu da başladığımızda istediğimiz şeydi: sessizce çalışmaya devam eden küçük bir sistem. Bu da biraz deneme yapmaya olanak tanıyor ve kurucularımıza birkaç başka projeye başlamak için zaman bıraktı, bunları sonunda bulabilirsiniz.

Bu yüzden bir deney yaptık. Ana sayfamızdaki haritayı aldık ve iki kez yeniden inşa ettik: bir kez Rust ile WebAssembly’ye derlenmiş olarak, bir kez de Flutter ile. Bu makale üçünü bir sayfada topluyor ve karşılaştırıyor.

1. Orijinal: SVG, CSS ve biraz JavaScript

Basitçe söylemek gerekirse: bu, ana sayfamızdaki harita. Bir web sayfasının geri kalanının inşa edildiği şekilde inşa edilmiştir: tarayıcınızın zaten nasıl görüntüleyeceğini ve animasyon yapacağını bildiği şekillerden oluşan bir çizim. Üçünün en basiti ve en çok ziyaretçinin gördüğü olanıdır.

Bu tek bir SVG çizimi. Tarayıcı animasyonların çoğunu CSS’den çalıştırıyor ve küçük bir betik geri kalanını yönetiyor.

Avantajı: bir derleme adımı yok, bu yüzden bir Hugo şablonu yeterli oluyor. Vektör tabanlı olduğu için her boyutta net kalıyor. Tüm 44 nokta klavye ile erişilebilir, her biri ekran okuyucular için bir etikete sahip. Ve birkaç kelimesi tüm dillerimize çevrilmiş durumda.

Maliyeti ise sayfa ağırlığı. Haritanın işaretlemesi yaklaşık 107 KB (sıkıştırılmış hali yaklaşık 30 KB) ve çalışırken yaklaşık 670 öğe ve yaklaşık 200 CSS animasyonu var. Mantığı test etmek de zor: zamanlama CSS anahtar karelerinde ve sayfadaki bir betikte yaşıyor, bu yüzden tek test ona bakmak oluyor.

2. Rust ve WebAssembly

Basitçe söylemek gerekirse: Rust, hızlı olması ve bir program çalışmadan önce birçok hatayı yakalamasıyla bilinen bir programlama dilidir. Burada haritanın “beynini” Rust ile yazdık, tarayıcıların çalıştırabileceği kompakt bir forma paketledik (WebAssembly olarak adlandırılır) ve haritanın tamamını kendisi boyamasına izin verdik, tıpkı bir ressamın bir tuvali saniyede birçok kez yeniden çizmesi gibi. Size aynı görünüyor.

Tüm harita, WebAssembly’ye derlenmiş Rust tarafından tek bir tuval üzerinde çizilir. Rust kodu haritanın tüm davranışını kontrol eder ve her karede her şeyi yeniden çizer.

Beğendiğimiz kısım, mantığın tamamen saf Rust olması ve içinde tarayıcıdan hiçbir şey bulunmaması: nesnelerin nerede olacağı ve ne zaman değişeceği ile ilgili matematik ve arazi sınırlarını okuyan ayrıştırıcı. Yaklaşık 1.070 satır Rust kodunun üçte biri kadar olan bu test edilmiş çekirdek (testleriyle birlikte) 13 test içerir ve bu testler saniyenin bir kesrinde çalışır; döngünün zamanlaması yanlışsa, biri garip göründüğünü fark etmeden önce test başarısız olur. Geri kalan kısım tuvale çizim yapar ve fare olaylarını yönetir.

Sayfa sonunda çok hafif olur: sadece bir tuval öğesi. Ancak indirme boyutu daha büyüktür. Derlenmiş modül yaklaşık 254 KB (sıkıştırılmış hali yaklaşık 92 KB) ve yapım aracı tarafından oluşturulan yaklaşık 28 KB JavaScript yapıştırıcı içerir. Ve üzerinde çalışırken hissettiğimiz maliyetler vardır:

• Bir araç zinciri. Derleme için Rust, WebAssembly hedefi ve sürümü kütüphane ile tam olarak eşleşen bir komut satırı aracına ihtiyaç vardır. Derleme betiğimiz önce testleri çalıştırır ve biri başarısız olursa durur.
• Bireysel şehirlere klavye veya ekran okuyucu erişimi yok. Bir canvas bir resimdir. SVG versiyonundaki 44 odaklanabilir nokta kayboldu.
• Yalnızca İngilizce. Etiketler programa yazılmıştır.
• Bulanıklık. Yumuşak gölge kenarı, her tarayıcının desteklemediği bir canvas bulanıklık filtresi kullanır. Kenarın sert olabileceği Safari tarayıcısını test etmedik.

3. Flutter

Basitçe: Flutter, Google tarafından telefonlarda, bilgisayarlarda ve webde çalışan uygulamalar oluşturmak için tek bir kod setinden kullanılan bir araç takımıdır. Web sayfasının kendi yapı taşlarını kullanmaz. Her şeyi kendisi çizer. Burada harita, bu sayfa içinde gösterilen küçük bir uygulamadır, aynı araç takımı bizim şarj hesaplayıcımızı çalıştırır.

Haritayı özel bir ressamla çizer ve burada bir çerçevede gösterilir. Flutter aynı koddan telefon ve masaüstü uygulamaları da oluşturabilir, bu da onun temel argümanıdır: haritayı bir kere yaz, birkaç yerde çalıştır.

Rust map ile aynı mantık, Dart’a taşındı, 11 test ile birlikte. Testler dahil yaklaşık 1.100 satır. Flutter, her şehri ekran okuyuculara etiketlenmiş bir buton olarak sunuyor, bu özellik canvas versiyonunda yok (gerçek bir ekran okuyucu ile ne kadar iyi çalıştığını kontrol etmedik). Ayrıca en büyük indirme boyutuna sahip: uygulama yaklaşık 1.8 MB (sıkıştırılmış haliyle yaklaşık 535 KB). Flutter’ın çizim motoru ayrıca indiriliyor, ancak site zaten hesap makinesi ile bir kopyasını paylaşıyor, bu yüzden hesap makinesini açmış bir ziyaretçi onu tekrar indirmiyor. Metni, tarayıcının çalışma zamanında getirdiği sitenin yazı tipi Merriweather ile ayarlanmış.

Bulduklarımız

Hız ile ilgili bir not daha. Kontrolümüzde, SVG harita ve Rust harita her ikisi de ekranın yenileme hızında çalıştı (test ekranında yaklaşık saniyede 120 kare), bu yüzden kare hızı onları ayırt etmedi. Flutter’ın kare hızını ölçmedik, pil veya CPU kullanımını da ölçmedik, bu yüzden hangisinin telefonda daha hafif olduğunu söyleyemeyiz.

Bizi şaşırtan şeyler

Bazı detayları yanlış yapmak kolaydır. İlk klonlarımız anahtarı ve saatleri haritanın sabit bir payında çiziyordu, bu yüzden küçük ekranlarda küçülüyor ve orijinalin yanında çok küçük görünüyordu. Orijinal, bunları sayfanın kendi yazı tipi birimiyle (rem, ekran genişliğiyle değişir) boyutlandırır. Klonlar şimdi bu boyutu sayfadan okuyor. Saatler de farklıdır: orijinalin akrep ve yelkovanı 15 dakikalık adımlarla hareket ederken, Rust ve Flutter sürümlerinde sürekli dönerler.

Saat dilimleri dahili değildir. Ne WebAssembly’ye derlenen Rust ne de Dart, “Asia/Dubai” gibi bir saat dilimi veritabanı içerir. İkisi de bunun yerine tarayıcıdan, yerleşik Intl servisi aracılığıyla sorar, bu servis aynı zamanda yaz saati uygulamasını da doğru şekilde alır.

Üçü de girişlerini paylaşır. Rust ve Flutter haritaları, bulundukları sayfadan şehir listesini ve kara hatlarını okur, SVG haritasının kullandığı aynı veriler. Bir şehri değiştirin, üçü de değişir. Bu aynı zamanda haritaların yalnızca onları sağlayan bir sayfada çalışabileceği anlamına gelir.

Flutter web hatırlar. Flutter web kendi önbelleğini kurar, bu yüzden yeniden derledikten sonra önbelleği temizleyene kadar eski sürümü görmeye devam ettik.

Sonuçlarımız

SVG haritası ana sayfada kalır. Bu büyüklükte bir çizim için en hafif olanıdır, erişilebilirdir, çevrilmiştir ve inşa etmek için hiçbir şeye ihtiyaç duymaz. Rust daha ilginç ikinci sıradadır: eğer haritanın mantığının kanıtlanabilir şekilde doğru olması gerekirse veya tarayıcıda ağır hesaplamalar yapmak gerekirse, test edilmiş bir Rust çekirdeği bunu yapmak için iyi bir yoldur. Flutter, harita bir Flutter uygulamasının içinde yaşaması gerekirse mantıklıdır.

Bir deneyin ürün değiştirmesi gerekmez ki çalıştırmaya değer olsun. Sonunda her yaklaşımın maliyetine dair daha net bir resme, haritanın nasıl davrandığına dair test edilmiş bir tanıma ve üçünü kendiniz görebileceğiniz bir sayfaya sahip olduk.

Kurucularımızın sonraki projeleri

Kararlı bir platform, diğer fikirler için zaman bırakır. EVnSteven dışında, kurucularımız şu projeler üzerinde çalışıyor:

Yakında lansman, yolculuk çağırma Kimem ↗ (opens in a new tab) Kurucu Mekonnen Alemu tarafından Etiyopya, Bahir Dar için bir yolculuk çağırma servisi. Yolcular rezervasyon yapmadan önce ücret tahminini görür, en yakın sürücünün harita üzerinde yaklaşmasını izler ve yolculuk sonunda sayaçlı ücreti nakit olarak öder.

Kar amacı gütmeyen, açık kaynak StrayCats ↗ (opens in a new tab) David tarafından sokak kedilerine, başıboş kedilere veya herhangi bir kediye, hatta o kedi bir köpek olsa bile, bakım yapan insanlara yardımcı olmak için bir proje. Henüz fikir aşamasında, uygulaması yok ve David fikirlerinizi ve geri bildirimlerinizi çok ister. Saibo’ya adanmıştır, 2010–2026.

Nakit takibi, ücretsiz, yakında lansman Effectivo ↗ (opens in a new tab) Nakit kullananlar için küçük bir farkla eksik muhasebe. Birkaç dokunuşla satın alma kaydedin, cüzdanınızdakini sayın ve neyin değerli olduğunu geriye dönük görün. Fark, nakit kullanmaya devam eden herkesin, nakitin herkes için varlığını sürdürmesine yardımcı olmasıdır. Ücretsiz ve reklamsız, Android ve iPhone’a geliyor, şu anda beta ve web demosu çalışıyor.