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

EVnSteven telah mencapai posisi yang nyaman. Platform ini stabil dan tidak memerlukan banyak pemeliharaan, yang memang kami inginkan sejak awal: sebuah sistem kecil yang terus bekerja dengan tenang. Itu meninggalkan sedikit ruang untuk bereksperimen, dan telah memberi waktu bagi para pendiri kami untuk memulai beberapa proyek lain, yang dapat Anda temukan di akhir.

Jadi kami melakukan sebuah eksperimen. Kami mengambil peta di halaman utama kami dan membangunnya ulang dua kali: satu kali dengan Rust yang dikompilasi ke WebAssembly, dan satu kali dengan Flutter. Artikel ini menampilkan ketiganya dalam satu halaman dan membandingkannya.

1. Asli: SVG, CSS dan sedikit JavaScript

Dalam istilah sederhana: ini adalah peta di halaman utama kami. Dibangun dengan cara yang sama seperti halaman web lainnya: sebuah gambar yang terbuat dari bentuk-bentuk yang sudah dikenal browser Anda untuk ditampilkan dan dianimasikan. Ini adalah yang paling sederhana dari ketiganya, dan ini yang paling banyak dilihat pengunjung.

Ini adalah satu gambar SVG. Browser menjalankan sebagian besar animasi dari CSS, dan sebuah skrip kecil menangani sisanya.

Keuntungannya: tidak ada langkah build, jadi template Hugo sudah cukup. Ini berbentuk vektor, sehingga tetap tajam dalam ukuran apapun. Semua 44 titik dapat dijangkau dengan keyboard, masing-masing dengan label untuk pembaca layar. Dan beberapa kata di dalamnya diterjemahkan ke semua bahasa kami.

Biayanya adalah berat pada halaman. Markup peta sekitar 107 KB (sekitar 30 KB setelah dikompresi), dan saat berjalan memiliki sekitar 670 elemen dan sekitar 200 animasi CSS. Logikanya juga sulit diuji: timing berada di dalam keyframes CSS dan skrip di halaman, jadi satu-satunya cara mengujinya adalah dengan melihatnya.

2. Rust dan WebAssembly

Dalam istilah sederhana: Rust adalah bahasa pemrograman yang dikenal cepat dan mampu menangkap banyak kesalahan sebelum sebuah program dijalankan. Di sini kami menulis “otak” peta dalam Rust, mengemasnya ke dalam bentuk ringkas yang dapat dijalankan oleh browser (disebut WebAssembly), dan membiarkannya melukis seluruh peta sendiri, seperti pelukis yang menggambar ulang satu kanvas berkali-kali dalam satu detik. Bagi Anda, tampilannya sama saja.

Seluruh peta digambar pada satu kanvas oleh Rust yang telah dikompilasi ke WebAssembly. Kode Rust mengendalikan seluruh perilaku peta dan menggambar ulang semuanya setiap frame.

Bagian yang kami sukai adalah logikanya adalah Rust murni tanpa ada yang berasal dari browser: matematika untuk menentukan posisi dan waktu perubahan, serta parser yang membaca garis besar tanah. Ada 13 tes yang berjalan dalam sepersekian detik, dan jika waktu siklus salah, tes akan gagal daripada seseorang menyadari tampilannya aneh. Sekitar sepertiga dari kira-kira 1.070 baris kode Rust adalah inti yang diuji tersebut (beserta tesnya); sisanya menggambar ke kanvas dan menangani event mouse.

Halaman akhirnya sangat ringan: hanya satu elemen kanvas. Namun unduhannya lebih besar. Modul yang dikompilasi sekitar 254 KB (sekitar 92 KB setelah dikompresi) ditambah sekitar 28 KB JavaScript glue yang dihasilkan oleh alat build. Dan ada biaya yang kami rasakan saat mengerjakannya:

• Sebuah rantai alat. Pembangunan membutuhkan Rust, target WebAssembly, dan alat baris perintah yang versinya harus persis sama dengan pustaka. Skrip pembangunan kami menjalankan pengujian terlebih dahulu dan berhenti jika salah satu gagal.
• Tidak ada akses keyboard atau pembaca layar ke kota-kota individual. Sebuah kanvas adalah gambar. Versi SVG dengan 44 titik yang dapat difokuskan sudah hilang.
• Hanya bahasa Inggris. Label-label ditulis ke dalam program.
• Blur. Tepi bayangan lembut menggunakan filter blur kanvas, yang tidak didukung oleh semua peramban. Kami belum menguji Safari, di mana tepinya mungkin terlihat keras.

3. Flutter

Dalam istilah sederhana: Flutter adalah toolkit dari Google untuk membangun aplikasi yang berjalan di ponsel, komputer, dan web dari satu set kode. Ia tidak menggunakan blok bangunan halaman web itu sendiri. Ia menggambar semuanya sendiri. Di sini peta adalah aplikasi kecil yang ditampilkan di dalam halaman ini, toolkit yang sama yang menjalankan kalkulator pengisian daya kami.

Ia melukis peta dengan pelukis khusus, dan ditampilkan di sini dalam sebuah bingkai. Flutter juga dapat membangun aplikasi ponsel dan desktop dari kode yang sama, yang merupakan argumen utamanya: tulis peta sekali, jalankan di beberapa tempat.

Ini adalah logika yang sama seperti peta Rust, dipindahkan ke Dart, dengan 11 tes. Sekitar 1.100 baris termasuk tes. Flutter menyerahkan setiap kota ke pembaca layar sebagai tombol berlabel, yang tidak dimiliki versi kanvas (kami belum memeriksa seberapa baik ini bekerja dengan pembaca layar asli). Ini juga unduhan terbesar: aplikasi sekitar 1,8 MB (sekitar 535 KB terkompresi). Mesin gambar Flutter adalah unduhan tambahan, tetapi situs sudah berbagi satu salinan dengan kalkulator, jadi pengunjung yang sudah membuka kalkulator tidak mengunduhnya lagi. Teksnya disetel dalam font situs, Merriweather, yang diambil browser saat runtime.

Apa yang kami temukan

Satu catatan lagi tentang kecepatan. Dalam pemeriksaan kami, peta SVG dan peta Rust keduanya berjalan pada kecepatan refresh layar (sekitar 120 frame per detik pada layar uji), jadi kecepatan frame tidak membedakan keduanya. Kami tidak mengukur kecepatan frame Flutter, dan kami tidak mengukur penggunaan baterai atau CPU, jadi kami tidak bisa mengatakan mana yang lebih ringan di ponsel.

Hal-hal yang mengejutkan kami

Beberapa detail mudah salah. Klon pertama kami menggambar kunci dan jam pada bagian tetap dari peta, jadi ukurannya mengecil di layar kecil dan terlihat sangat kecil dibandingkan dengan aslinya. Aslinya mengatur ukurannya dalam satuan font halaman sendiri (rem, yang berubah sesuai lebar layar). Klon sekarang membaca ukuran itu dari halaman. Jam juga berbeda: jarum jam asli bergerak dalam langkah 15 menit, sementara versi Rust dan Flutter berputar secara terus-menerus.

Zona waktu tidak dibangun di dalamnya. Baik Rust yang dikompilasi ke WebAssembly maupun Dart tidak membawa basis data zona waktu yang mengenal “Asia/Dubai”. Keduanya menanyakan ke browser sebagai gantinya, melalui layanan Intl bawaan, yang juga menangani daylight saving dengan benar.

Ketiganya berbagi input mereka. Peta Rust dan Flutter membaca daftar kota dan garis besar daratan dari halaman tempat mereka berada, data yang sama yang digunakan oleh peta SVG. Ubah sebuah kota, dan ketiganya berubah. Ini juga berarti peta hanya bisa dijalankan di halaman yang menyediakannya.

Flutter web mengingat. Flutter web memasang cache sendiri, jadi setelah membangunnya ulang kami terus melihat versi lama sampai kami menghapusnya.

Kesimpulan kami

Peta SVG tetap di halaman utama. Untuk gambar sebesar ini, itu yang paling ringan, dapat diakses, sudah diterjemahkan, dan tidak membutuhkan apa pun untuk dibangun. Rust adalah pesaing yang lebih menarik: jika kami pernah membutuhkan logika peta yang dapat dibuktikan benar, atau perlu melakukan komputasi berat di browser, inti Rust yang sudah diuji adalah cara yang baik untuk melakukannya. Flutter masuk akal jika peta perlu hidup di dalam aplikasi Flutter.

Sebuah eksperimen tidak perlu mengubah produk agar layak dijalankan. Kami akhirnya memiliki gambaran yang lebih jelas tentang biaya masing-masing pendekatan, deskripsi yang diuji tentang bagaimana peta berperilaku, dan halaman di mana Anda dapat melihat ketiganya sendiri.

Apa yang sedang dibangun oleh para pendiri kami selanjutnya

Platform yang stabil memberikan waktu untuk ide-ide lain. Selain EVnSteven, para pendiri kami sedang mengerjakan hal-hal berikut:

Ride-hailing, launching very soon Kimem ↗ (opens in a new tab) Layanan ride-hailing untuk Bahir Dar, Ethiopia, dari pendiri Mekonnen Alemu. Penumpang melihat perkiraan tarif sebelum memesan, melihat pengemudi terdekat mendekat di peta, dan membayar tarif yang terukur secara tunai di akhir perjalanan.

Non-profit, open source StrayCats ↗ (opens in a new tab) Sebuah proyek dari David untuk membantu orang yang merawat kucing jalanan, kucing liar, atau kucing apa pun, bahkan jika kucing itu kebetulan seekor anjing. Ini masih dalam tahap ide, belum ada aplikasi, dan David sangat menginginkan ide dan masukan Anda. Didedikasikan untuk Saibo, 2010–2026.

Cash tracking, free, launching soon Effectivo ↗ (opens in a new tab) Akuntansi yang tidak sempurna dengan sentuhan khusus, untuk mereka yang menggunakan uang tunai. Catat pembelian dalam beberapa ketukan, hitung apa yang ada di dompet Anda, dan lihat kembali apa yang sepadan. Sentuhan khususnya adalah bahwa setiap orang yang terus menggunakan uang tunai membantu menjaga keberadaannya untuk semua orang. Gratis dan bebas iklan, akan hadir di Android dan iPhone, dengan versi beta dan demo web yang sudah berjalan sekarang.