Özet
SVGOMG: SVGO için güzel, materyal ve duyarlı bir ön uç.
Neleri beğeniyoruz?
Jake Archibald tarafından geliştirilen SVGOMG, web teknolojileriyle yazılmış, tamamen duyarlı ve yetenekli bir araca mükemmel bir örnektir. Materyal Tasarıma sahip çok güzel bir görünüme sahip olan ServiceWorker, uygulamanın hızlı bir şekilde yüklenmesini, çevrimdışı olarak kullanılabilmesini ve mobil cihazlarda sorunsuz geçişlerin yapılmasını sağlar.
Olası İyileştirmeler
Sunabileceğimiz tek gerçek nitelik, ilk kullanıcı deneyiminin ana kullanıcı arayüzünün eksik olması nedeniyle kafa karıştırıcı olmasıdır. Bunun dışında, tebrikler!
Jake Archibald ile Soru-Cevap
Neden web?
Tembellik. Tamamen tembellik. Windows yerel uygulamaları geliştirme konusunda uzman değilim, OSX yerel uygulamaları ve iOS, Android, Windows Phone veya Linux için yerel uygulamalar oluşturma konusunda da uzman değilim. Ancak web'de çalışabiliyorum ve bu becerilerimden biri, tüm bu platformlarda bir kez çalışan bir şey geliştirmemi sağladı.
Geliştirme aşamasında neler çok işe yaradı?
Performansından çok memnunum. Sayfanın JS kullanılabilir olmadan oluşturulduğundan emin oluyorum. Aslında, bazı satır içi CSS ve SVG'ler içeren yalnızca 5k HTML ile ilk olarak oluşturulur. Ana komut dosyalarının ve CSS'nin tamamı arka planda yüklenir. Bu, sitenin boş bir önbellekle 3G'de bile 1,5 saniye içinde yüklendiği anlamına gelir ve bunların çoğu DNS ve SSL'dir.
Açılış ekranı gerçekten çok basit, bu yüzden bunu 5K'da yapmak zor olmadı. Birçok sitenin ilk oluşturma işlemi için JS'de beklemesi, hatta bazıları JS'nin oluşturma öncesinde başka isteklerde bulunmasını istemesi beni gerçekten rahatsız ediyor. Bu da 3G oluşturma süresini 10 saniyeye indiriyor. Bir mobil kullanıcı olarak buna katlanmayacağımı biliyorum.
Ana JS 15.000'dir, ancak arka planda ekstra bir aşama olarak yüklenen, SVG'yi ayrıştıran ve küçülten parçaları içermez. Bu harika bir şey çünkü etkileşim çok hızlı bir şekilde başlıyor ve kullanıcı ekstra yükü fark etmiyor. Kullanıcı, bu komut dosyası kullanıma sunulmadan önce bir SVG seçmeyi başarırsa bu komut dosyasının yüklenmesi, işleme süresinin bir parçası gibi görünür.
Ayrıca tüm işin çevrimdışı çalışmasını sağlamak için ServiceWorker'ı kullandım. Çevrimdışı çalışmak çok güzel bir özellik, ancak ben bunu çoğunlukla performans için yapıyorum. Kullanıcıyla hangi bağlantı olursa olsun, SVGOMG'ye yapılacak sonraki ziyaretler neredeyse anında oluşturulur. Mobil bağlantıdaki farklılıklar göz önüne alındığında, bu gerçekten çok değerlidir!
Uygulamanızı daha iyi bir hale getirecek API'niz olsaydı bu ne olurdu?
İlerideki JavaScript özelliklerinden yararlanmak için Babel'i kullandım. Bunlardan bir kısmının platformda yerel olarak çalışması çok güzel olurdu. Özellikle, eşzamansız/bekleyen, ok işlevleri, bağımsız değişken varsayılanları ve yapı bozma.
Çıkışın gzip ile sıkıştırılmış boyutunu öğrenmek üzere gzip işlemi uygulamak için bir kitaplık kullanmam gerekti. Bunun için kitaplık kullanmak, bu kod zaten HTTP öğeleri için tarayıcıda mevcut olduğundan pek sinir bozucu bir şey. İdeal olarak bir tür dönüşüm akışı olmalıdır. Böylece, her şeyi bellekte tutmadan çıktının boyutunu hesaplayabilirim.