Özet
SVGOMG: SVGO için güzel, materyal, duyarlı bir ön uç.
Neleri beğendik?
Kendi çalışanımız Jake Archibald tarafından geliştirilen SVGOMG, web teknolojileri kullanılarak yazılmış tamamen duyarlı ve yetenekli bir aracın neredeyse mükemmel bir örneğidir. Güzel bir Materyal Tasarım görünümüne sahip olan ServiceWorker, uygulamanın hızlı yüklenmesini ve çevrimdışı kullanılabilmesini, geçişlerin de mobil cihazlarda sorunsuz olmasını sağlar.
Olası İyileştirmeler
Tek eleştirimiz, ana kullanıcı arayüzü eksik olduğu için ilk kullanıcı deneyiminin kafa karıştırıcı olması. Bunun dışında, iyi iş çıkardınız.
Jake Archibald ile soru-cevap
Neden web?
Tembellik. Tamamen tembellik. Windows yerel uygulamaları geliştirme konusunda uzman değilim, OSX yerel uygulamaları konusunda uzman değilim ve iOS, Android, Windows Phone veya Linux için yerel uygulamalar oluşturma konusunda uzman değilim. Ancak web'de çalışabiliyorum ve bu beceri seti sayesinde tüm bu platformlarda tek seferde çalışacak bir şey oluşturabildim.
Geliştirme sırasında neleri beğendiniz?
Performansından gerçekten memnunum. Sayfanın JS kullanılabilir olmadan önce oluşturulmasını sağlarım. Aslında, bazı satır içi CSS ve SVG ile yalnızca 5 bin HTML'de ilk oluşturmaya ulaşır. Ana komut dosyalarının ve CSS'lerin tümü arka planda yüklenir. Bu, sitenin boş bir önbelleğe sahipken 3G'de bile 1,5 saniyede yüklendiği anlamına gelir.Bunun büyük kısmı DNS ve SSL'den kaynaklanır.
Açılış ekranı çok basit olduğu için 5K'da oluşturmak zor olmadı. Birçok sitenin ilk oluşturma işlemi için JS'yi beklemesi ve bazılarının JS'nin oluşturmadan önce başka istekler göndermesini gerektirmesi beni gerçekten rahatsız ediyor. Bu durum, 3G oluşturma süresini 10 saniyeye yaklaştırır. Mobil kullanıcı olarak buna tahammül edemeyeceğimi biliyorum.
Ana JS 15 KB'dır ancak SVG'yi ayrıştırıp küçülten ve arka planda ek bir aşama olarak yüklenen bölümleri içermez. Etkileşimli içerikler çok hızlı bir şekilde yayınlandığı ve kullanıcı ek yükleme işlemini fark etmediği için bu yöntem mükemmeldir. Kullanıcı, komut dosyası kullanıma sunulmadan önce bir SVG seçerse bu komut dosyasının yüklenmesi, işlem süresinin bir parçası olarak görünür.
Ayrıca, tümünün çevrimdışı çalışmasını sağlamak için ServiceWorker'ı da kullandım. Çevrimdışı çalışma özelliği oldukça kullanışlı olsa da ben bunu çoğunlukla performans için kullanıyorum. SVGOMG'a yapılan sonraki ziyaretler, kullanıcının bağlantısı ne olursa olsun neredeyse anında oluşturulur. Mobil bağlantıdaki farklılıklar göz önüne alındığında bu gerçekten değerli bir bilgidir.
Uygulamanızı iyileştirmek için kullanabileceğiniz bir API olsaydı bu API ne olurdu?
Gelecekteki JavaScript özelliklerinden yararlanabilmek için Babel'i kullandım. Bunların bir kısmının platformda yerel olarak çalıştırılması çok iyi olur. Özellikle, async/await, ok işlevleri, bağımsız değişken varsayılanları ve yapı bozma.
Sıkıştırılmış boyutunu bulmak için çıkışı gzip'le sıkıştırmak üzere bir kitaplık kullanmam gerekiyordu. Bu kod zaten HTTP işlemleri için tarayıcıda bulunduğundan, bunun için bir kitaplık kullanmak biraz can sıkıcı. Bunun için bir API yok. İdeal olarak, tümünü bellekte tutmak zorunda kalmadan çıktının boyutunu hesaplayabilmem için bir tür dönüştürme akışı olmalıdır.