Ringkasan
SVGOMG: Frontend yang menarik, material, responsif untuk SVGO.
Apa yang kita suka?
Dibangun oleh Jake Archibald kami sendiri, SVGOMG adalah contoh yang hampir sempurna dari alat yang sepenuhnya responsif dan mumpuni yang ditulis dengan teknologi web. Layanan ini memiliki tampilan Desain Material yang indah, ServiceWorker memastikan bahwa aplikasi dimuat dengan cepat dan tersedia secara offline, dan transisinya berjalan lancar di perangkat seluler.
Kemungkinan Peningkatan
Satu-satunya intisari yang harus kami tawarkan adalah bahwa UX awal membingungkan karena UI utama tidak ada. Selain itu, kerja bagus!
Tanya Jawab dengan Jake Archibald
Mengapa web?
Malas. Malas total. Saya bukan ahli dalam mengembangkan aplikasi asli Windows, saya bukan ahli dalam aplikasi asli OSX, dan juga tidak ahli dalam membuat aplikasi asli untuk iOS, Android, Windows Phone, atau Linux. Namun saya bisa mengerjakan web, dan satu keahlian tersebut memungkinkan saya membuat sesuatu sekali yang berfungsi di semua platform tersebut.
Apa yang bekerja dengan sangat baik selama pengembangan?
Saya sangat puas dengan performanya. Saya memastikan halaman dirender sebelum JS tersedia. Bahkan, ia dapat merender terlebih dahulu dengan hanya 5k HTML dengan beberapa CSS dan SVG inline. Skrip utama dan CSS semuanya dimuat di latar belakang. Artinya, situs tersebut akan dimuat dalam waktu 1,5 detik bahkan pada jaringan 3G dengan cache kosong, dan sebagian besarnya adalah DNS dan SSL.
Layar pembukanya sangat sederhana, jadi melakukannya dalam 5k bukanlah tantangan. Saya sangat terganggu karena banyak situs menunggu di JS untuk render pertamanya, beberapa bahkan memerlukan JS-nya untuk membuat permintaan lebih lanjut sebelum dirender. Ini mendorong waktu render 3G menuju 10 detik – sebagai pengguna seluler, saya tahu saya tidak akan tahan dengan itu.
JS utama berukuran 15k, tetapi tidak menyertakan bagian yang mengurai dan meminifikasi SVG, yang dimuat sebagai fase tambahan di latar belakang. Hal ini sangat bagus karena interaktivitas terjadi dengan sangat cepat, dan pengguna tidak menyadari adanya pemuatan ekstra. Jika pengguna berhasil memilih SVG sebelum skrip tersebut tersedia, pemuatan skrip tersebut akan tampak menjadi bagian dari waktu pemrosesan.
Saya juga menggunakan ServiceWorker untuk membuat semuanya berfungsi secara offline. Bekerja offline adalah fitur yang cukup keren, tetapi saya sering melakukannya untuk kinerja. Kunjungan berikutnya ke SVGOMG akan dirender hampir secara instan, apa pun koneksi yang dimiliki pengguna. Mengingat beragamnya konektivitas seluler, hal ini menjadi hal yang sangat berharga.
Jika Anda dapat memiliki API untuk meningkatkan kualitas aplikasi Anda, apa itu?
Saya menggunakan Babel sehingga saya bisa memanfaatkan hal-hal JavaScript di masa mendatang. Alangkah baiknya jika ada beberapa yang bekerja secara native di platform. Secara khusus, asinkron/await, fungsi panah, default argumen, dan destrukturisasi.
Saya harus menggunakan {i>library<i} untuk membuat {i> gzip<i} untuk mengetahui ukuran file {i>gzip<i}. Menggunakan library untuk hal ini agak menjengkelkan karena kode tersebut sudah ada di browser untuk hal-hal HTTP, hanya saja tidak ada API untuknya. Idealnya, ini harus semacam aliran transformasi agar saya dapat menghitung ukuran output tanpa memiliki semuanya di memori.