Peta Yang Sama, Tiga Cara: SVG, Rust dan Flutter

EVnSteven telah mencapai tahap yang selesa. Platform ini stabil dan tidak memerlukan banyak penyelenggaraan, yang tepat seperti yang kami mahukan ketika mula-mula bermula: sebuah sistem kecil yang terus berfungsi dengan senyap. Ini memberi sedikit ruang untuk bereksperimen, dan ia telah memberi masa kepada pengasas kami untuk memulakan beberapa projek lain, yang anda akan temui di akhir.

Jadi kami menjalankan satu eksperimen. Kami mengambil peta di halaman utama kami dan membinanya semula dua kali: sekali dalam Rust yang dikompilasi ke WebAssembly, dan sekali dalam Flutter. Artikel ini meletakkan ketiga-tiganya dalam satu halaman dan membandingkannya.

1. Asal: SVG, CSS dan sedikit JavaScript

Dalam istilah mudah: ini adalah peta di halaman utama kami. Ia dibina seperti cara halaman web lain dibina: lukisan yang terdiri daripada bentuk yang sudah diketahui oleh pelayar anda bagaimana untuk dipaparkan dan dianimasikan. Ia yang paling mudah daripada ketiga-tiganya, dan ia adalah yang paling banyak dilihat oleh pelawat.

Ia adalah satu lukisan SVG. Pelayar menjalankan kebanyakan animasi dari CSS, dan satu skrip kecil mengendalikan selebihnya.

Kelebihannya: tiada langkah binaan, jadi templat Hugo sahaja yang diperlukan. Ia vektor, jadi ia kekal tajam pada apa jua saiz. Semua 44 titik boleh dicapai dengan papan kekunci, setiap satu dengan label untuk pembaca skrin. Dan beberapa katanya diterjemahkan ke dalam semua bahasa kami.

Kosnya adalah berat pada halaman. Markah peta adalah kira-kira 107 KB (kira-kira 30 KB selepas dimampatkan), dan apabila berjalan ia mempunyai kira-kira 670 elemen dan kira-kira 200 animasi CSS. Logiknya juga sukar untuk diuji: masa hidup dalam keyframes CSS dan skrip dalam halaman, jadi satu-satunya ujian adalah dengan melihatnya.

2. Rust dan WebAssembly

Dalam istilah mudah: Rust adalah bahasa pengaturcaraan yang dikenali kerana kelajuannya dan kerana dapat mengesan banyak kesilapan sebelum program dijalankan. Di sini kami menulis “otak” peta dalam Rust, membungkusnya ke dalam bentuk padat yang boleh dijalankan oleh pelayar (dipanggil WebAssembly), dan membiarkannya melukis keseluruhan peta itu sendiri, seperti seorang pelukis yang melukis semula satu kanvas berkali-kali dalam satu saat. Kepada anda, ia kelihatan sama.

Keseluruhan peta dilukis pada satu kanvas oleh Rust yang telah dikompilasi ke WebAssembly. Kod Rust mengawal semua tingkah laku peta dan melukis semula segala-galanya setiap bingkai.

Bahagian yang kami sukai ialah logiknya adalah Rust biasa tanpa apa-apa dari pelayar di dalamnya: matematik untuk menentukan di mana sesuatu diletakkan dan bila ia berubah, serta parser yang membaca garis besar tanah. Ia mempunyai 13 ujian yang dijalankan dalam sebahagian kecil saat, dan jika masa kitaran salah, ujian gagal dan bukan seseorang perasan ia kelihatan pelik. Sekitar satu pertiga daripada kira-kira 1,070 baris Rust adalah teras yang diuji itu (bersama ujian-ujian); selebihnya melukis ke kanvas dan mengendalikan acara tetikus.

Halaman akhirnya sangat ringan: satu elemen kanvas sahaja. Tetapi muat turun lebih besar. Modul yang dikompilasi adalah kira-kira 254 KB (kira-kira 92 KB dimampatkan) ditambah kira-kira 28 KB gam JavaScript yang dijana oleh alat binaan. Dan terdapat kos yang kami rasai semasa mengerjakannya:

• Rantaian alat. Pembinaan memerlukan Rust, sasaran WebAssembly dan alat baris perintah yang versinya mesti sama tepat dengan perpustakaan. Skrip binaan kami menjalankan ujian terlebih dahulu dan berhenti jika satu gagal.
• Tiada akses papan kekunci atau pembaca skrin ke bandar individu. Kanvas adalah gambar. Versi SVG dengan 44 titik yang boleh difokuskan telah tiada.
• Bahasa Inggeris sahaja. Label ditulis ke dalam program.
• Kabur. Tepi bayang lembut menggunakan penapis kabur kanvas, yang tidak disokong oleh setiap pelayar. Kami belum menguji Safari, di mana tepi mungkin menjadi keras.

3. Flutter

Dalam istilah mudah: Flutter adalah toolkit dari Google untuk membina aplikasi yang berjalan di telefon, komputer dan web dari satu set kod. Ia tidak menggunakan blok binaan halaman web sendiri. Ia melukis semuanya sendiri. Di sini peta adalah aplikasi kecil yang dipaparkan di dalam halaman ini, toolkit yang sama yang menggerakkan kalkulator pengecasan.

Ia melukis peta dengan pelukis tersuai, dan ia dipaparkan di sini dalam bingkai. Flutter juga boleh membina aplikasi telefon dan desktop dari kod yang sama, yang merupakan hujah utamanya: tulis peta sekali, jalankan di beberapa tempat.

Ia adalah logik yang sama seperti peta Rust, dipindahkan ke Dart, dengan 11 ujian. Kira-kira 1,100 baris termasuk ujian. Flutter menyerahkan setiap bandar kepada pembaca skrin sebagai butang berlabel, yang tidak dimiliki oleh versi kanvas (kami belum memeriksa sejauh mana ia berfungsi dengan pembaca skrin sebenar). Ia juga muat turun terbesar: aplikasi ini kira-kira 1.8 MB (kira-kira 535 KB dimampatkan). Enjin lukisan Flutter adalah muat turun tambahan, tetapi laman web sudah berkongsi satu salinan dengan kalkulator, jadi pelawat yang telah membuka kalkulator tidak memuat turun semula. Teksnya ditetapkan dalam fon laman web, Merriweather, yang diambil oleh pelayar pada masa jalan.

Apa yang kami temui

Satu lagi nota mengenai kelajuan. Dalam pemeriksaan kami, peta SVG dan peta Rust kedua-duanya berjalan pada kadar segar semula skrin (kira-kira 120 bingkai sesaat pada paparan ujian), jadi kadar bingkai tidak membezakan mereka. Kami tidak mengukur kadar bingkai Flutter, dan kami tidak mengukur penggunaan bateri atau CPU, jadi kami tidak boleh mengatakan yang mana lebih ringan pada telefon.

Perkara yang mengejutkan kami

Beberapa butiran mudah untuk salah. Klon pertama kami melukis kunci dan jam pada bahagian tetap peta, jadi ia mengecil pada skrin kecil dan kelihatan kecil berbanding dengan asal. Asal menetapkan saiznya dalam unit fon halaman sendiri (rem, yang berubah mengikut lebar skrin). Klon kini membaca saiz itu dari halaman. Jam juga berbeza: jarum jam asal bergerak dalam langkah 15 minit, manakala dalam versi Rust dan Flutter ia berputar secara berterusan.

Zon masa tidak dibina. Sama ada Rust yang disusun ke WebAssembly atau Dart tidak membawa pangkalan data zon masa yang mengetahui “Asia/Dubai”. Kedua-duanya bertanya kepada pelayar sebaliknya, melalui perkhidmatan Intl terbina dalamnya, yang juga mengendalikan waktu penjimatan siang dengan betul.

Ketiga-tiganya berkongsi input mereka. Peta Rust dan Flutter membaca senarai bandar dan garis besar tanah dari halaman yang mereka berada, data yang sama yang digunakan oleh peta SVG. Tukar satu bandar, dan ketiga-tiganya berubah. Ini juga bermakna peta hanya boleh dijalankan pada halaman yang menyediakannya.

Flutter web mengingati. Flutter web memasang cache sendiri, jadi selepas membina semula kami terus melihat versi lama sehingga kami membersihkannya.

Kesimpulan kami

Peta SVG kekal di halaman utama. Untuk lukisan sebesar ini ia paling ringan, boleh diakses, diterjemah, dan tidak memerlukan apa-apa untuk dibina. Rust adalah pilihan kedua yang lebih menarik: jika kami pernah memerlukan logik peta untuk dibuktikan betul, atau perlu melakukan pengiraan berat dalam pelayar, teras Rust yang diuji adalah cara yang baik untuk melakukannya. Flutter masuk akal jika peta perlu hidup dalam aplikasi Flutter.

Satu eksperimen tidak perlu mengubah produk untuk berbaloi dijalankan. Kami berakhir dengan gambaran yang lebih jelas tentang kos setiap pendekatan, penerangan yang diuji tentang bagaimana peta berkelakuan, dan halaman di mana anda boleh melihat ketiga-tiganya sendiri.

Apa yang pengasas kami sedang bina seterusnya

Platform yang stabil memberi masa untuk idea lain. Selain EVnSteven, pengasas kami sedang mengusahakan ini:

Perkhidmatan teksi, akan dilancarkan tidak lama lagi Kimem ↗ (opens in a new tab) Perkhidmatan teksi untuk Bahir Dar, Ethiopia, daripada pengasas Mekonnen Alemu. Penumpang melihat anggaran tambang sebelum menempah, melihat pemandu terdekat mendekati di peta, dan membayar tambang meter secara tunai di akhir perjalanan.

Bukan keuntungan, sumber terbuka StrayCats ↗ (opens in a new tab) Projek daripada David untuk membantu orang yang menjaga kucing jalanan, kucing liar, atau mana-mana kucing, walaupun kucing itu kebetulan seekor anjing. Ia masih di peringkat idea, tiada aplikasi lagi, dan David sangat mengalu-alukan idea dan maklum balas anda. Didedikasikan untuk Saibo, 2010–2026.

Penjejakan tunai, percuma, akan dilancarkan tidak lama lagi Effectivo ↗ (opens in a new tab) Perakaunan tidak sempurna dengan kelainan, untuk mereka yang menggunakan tunai. Log pembelian dalam beberapa ketukan, kira apa yang ada dalam dompet anda, dan lihat kembali apa yang berbaloi. Kelainannya ialah setiap orang yang terus menggunakan tunai membantu mengekalkannya untuk semua orang lain. Percuma dan tanpa iklan, akan datang ke Android dan iPhone, dengan beta dan demo web sedang berjalan sekarang.