Ringkasan
SVGOMG: Frontend yang indah, material, dan responsif untuk SVGO.
Apa yang kita sukai?
Dibuat oleh Jake Archibald kami sendiri, SVGOMG adalah contoh yang hampir sempurna dari alat yang sepenuhnya responsif dan andal yang ditulis dengan teknologi web. Aplikasi ini menampilkan tampilan Desain Material yang menarik, ServiceWorker memastikan aplikasi dimuat dengan cepat dan tersedia secara offline, serta transisi berjalan lancar di perangkat seluler.
Kemungkinan Peningkatan
Satu-satunya hal yang perlu kami sampaikan adalah UX awal membingungkan karena UI utama tidak ada. Selain itu, bagus!
Tanya Jawab dengan Jake Archibald
Mengapa web?
Malas. Malas total. Saya bukan pakar dalam mengembangkan aplikasi native Windows, Saya bukan pakar dalam aplikasi native OSX, dan saya juga bukan pakar dalam membuat aplikasi native untuk iOS, Android, Windows Phone, atau Linux. Namun, saya dapat menangani web, dan satu set keterampilan tersebut memungkinkan saya membuat sesuatu sekali yang berfungsi di semua platform tersebut.
Apa yang berfungsi dengan baik selama pengembangan?
Saya sangat puas dengan performanya. Saya memastikan halaman dirender sebelum JS tersedia. Bahkan, render pertama hanya menggunakan 5 ribu HTML dengan beberapa CSS dan SVG inline. Semua skrip utama dan CSS dimuat di latar belakang. Artinya, situs tampaknya dimuat dalam 1,5 detik bahkan di jaringan 3G dengan cache kosong, dan sebagian besar adalah DNS dan SSL.
Layar pembuka sangat sederhana, jadi melakukannya dalam resolusi 5K bukanlah tantangan. Saya sangat terganggu karena begitu banyak situs yang menunggu JS untuk rendering pertamanya, beberapa bahkan mengharuskan JS mereka untuk membuat permintaan lebih lanjut sebelum merender. Hal ini mendorong waktu render 3G mendekati 10 detik. Sebagai pengguna seluler, saya tahu saya tidak akan tahan dengan hal itu.
JS utama berukuran 15 ribu, tetapi tidak menyertakan bagian yang mengurai dan meminifikasi SVG, yang dimuat sebagai fase tambahan di latar belakang. Hal ini sangat bagus karena interaktivitas ditampilkan dengan sangat cepat, dan pengguna tidak melihat pemuatan tambahan. Jika pengguna berhasil memilih SVG sebelum skrip tersebut tersedia, pemuatan skrip tersebut tampaknya merupakan bagian dari waktu pemrosesan.
Saya juga menggunakan ServiceWorker untuk membuat semuanya berfungsi secara offline. Bekerja secara offline adalah fitur yang cukup keren, tetapi saya melakukannya terutama untuk performa. Kunjungan berikutnya ke SVGOMG dirender hampir secara instan, apa pun koneksi yang dimiliki pengguna. Mengingat variasi konektivitas seluler, hal ini sangatlah berharga.
Jika Anda dapat memiliki API untuk meningkatkan kualitas aplikasi, API apa yang akan Anda pilih?
Saya menggunakan Babel agar dapat menggunakan hal-hal JavaScript di masa mendatang. Akan lebih baik jika beberapa hal tersebut berfungsi secara native di platform. Secara khusus, async/await, fungsi panah, argumen default, dan destrukturisasi.
Saya harus menggunakan library untuk mengompresi output dengan gzip guna mengetahui ukurannya yang dikompresi dengan gzip. Menggunakan library untuk hal ini agak menjengkelkan karena kode tersebut sudah ada di browser untuk hal-hal HTTP, hanya saja tidak ada API untuk kode tersebut. Idealnya, ini harus berupa semacam aliran transformasi sehingga saya dapat menghitung ukuran output tanpa menyimpan semuanya dalam memori.