Chrome 63'teki yenilikler

• Chrome 63, JavaScript modüllerini dinamik olarak içe aktarmanıza olanak tanır.
• En sevdiğim görüşme kodlama sorusu, eş zamansız yinelemeler ve oluşturucular ile mükemmel bir iş haline geldi.
• CSS overscroll-behavior özelliğiyle tarayıcının varsayılan taşma kaydırma davranışını geçersiz kılabilirsiniz.
• Ayrıca, kullanıcılardan izin isteklerini isteme şeklini değiştirdik.

Ve çok daha fazlası da var!

Adım Pete LePage. Şimdi Chrome 63'teki geliştiricilere yönelik yenilikleri görelim!

Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.

Dinamik modülleri içe aktarma

JavaScript modüllerinin içe aktarılması çok kullanışlıdır, ancak statiktir, çalışma zamanı koşullarına dayalı olarak modülleri içe aktaramazsınız.

Neyse ki bu durum, yeni dinamik içe aktarma söz dizimi ile Chrome 63'te değişiyor. Çalışma zamanında modüllere ve komut dosyalarına kodları dinamik olarak yüklemenizi sağlar. Bir komut dosyasını yalnızca gerekli olduğunda geç yüklemek için kullanılabilir ve uygulamanızın performansını artırır.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Kullanıcı, sayfanıza ilk geldiğinde uygulamanızın tamamını yüklemek yerine, oturum açmak için gereken kaynaklardan yararlanabilirsiniz. İlk yükünüz küçük ve hızlı çığlık atıyor. Ardından, kullanıcı oturum açtığında geri kalanını yükleyin. Artık hazırsınız.

Eş zamansız yineleyiciler ve oluşturucular

async işlevleriyle herhangi bir yineleme yapan kod yazmak zor olabilir. Aslına bakarsanız en sevdiğim görüşme kodlama sorusu bu.

Artık async generator functions ve eşzamansız yineleme protokolü sayesinde, akışlı veri kaynaklarının tüketilmesi veya uygulanması daha kolay hâle geliyor ve kodlama sorum çok daha kolay hale geliyor.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Eş zamansız yineleyiciler, for-of döngülerinde ve eşzamansız yineleyici fabrikaları aracılığıyla kendi özel eşzamansız yineleyicilerinizi oluşturmak için kullanılabilir.

Fazla kaydırma davranışı

Kaydırma, sayfayla etkileşim kurmanın en temel yollarından biridir ancak bazı kalıplarla başa çıkmak zor olabilir. Örneğin, tarayıcıların yenilemek için çekme özelliği; sayfanın üst kısmından aşağı doğru kaydırma yapıldığında sert bir şekilde yeniden yükleme yapılır.

Bazı durumlarda, bu davranışı geçersiz kılıp kendi deneyiminizi sunmak isteyebilirsiniz. Twitter'ın progresif web uygulaması bunu yapar. Sayfayı aşağı çektiğinizde tüm sayfayı yeniden yüklemek yerine yeni tweet'leri mevcut görünüme ekler.

Chrome 63 artık CSS overscroll-behavior özelliğini desteklediğinden tarayıcının varsayılan taşma kaydırma davranışını geçersiz kılmayı kolaylaştırıyor.

Bu özelliği kullanarak şunları yapabilirsiniz:

• Kaydırma zincirini iptal et
• Yenilemek için çekme işlemini devre dışı bırakma veya özelleştirme
• iOS'te lastik bant efektlerini devre dışı bırakma
• Kaydırarak gezinme seçenekleri ekleme
• Ve daha fazlası...

En iyi tarafı ise overscroll-behavior, sayfanızın performansını olumsuz etkilemez.

İzin kullanıcı arayüzü değişiklikleri

Web push bildirimlerini seviyorum ama bağlam olmadan sayfa yüklemede izin isteyen sitelerin sayısı beni gerçekten rahatsız ediyor ve yalnız değilim.

Tüm izin isteklerinin% 90'ı yok sayılır veya geçici olarak engellenir.

Chrome 59'da, kullanıcının isteği üç kez reddetmesi durumunda bir izni geçici olarak engelleyerek bu sorunu çözmeye başladık. Android için Chrome artık m63'te izin isteği kalıcı iletişim kutuları yapacak.

Bunun yalnızca push bildirimleri için değil, tüm izin istekleri için yapıldığını unutmayın. Uygun zamanda ve bağlam içinde izin istediğinizde kullanıcıların izin verme olasılığının iki buçuk kat daha yüksek olduğunu tespit ettik!

Diğer ölçütler

Bunlar, Chrome 63'te geliştiriciler için yapılan değişikliklerden sadece birkaçı. Elbette bunlar dışında çok daha fazlası var.

• finally artık Promise örneklerinde kullanılabilir ve bir Promise isteği karşılandıktan veya reddedildikten sonra çağrılır.
• Yeni Device Memory JavaScript API, kullanıcının cihazındaki toplam RAM miktarı hakkında ipuçları vererek performans kısıtlamalarını anlamanıza yardımcı olur. Deneyiminizi çalışma zamanında uyarlayarak alt uç cihazlardaki karmaşıklığı azaltabilir ve kullanıcılara daha az sorun yaşayarak daha iyi bir deneyim sunabilirsiniz.
• Intl.PluralRules API, belirli bir sayı ve dil için hangi çoğul biçimin geçerli olduğunu belirterek belirli bir dilin çoğullaşmasını anlayan uygulamalar derlemenize olanak tanır. Sıralı sayılarda da yardımcı olabilir.

YouTube kanalımıza abone olmayı unutmayın. Yeni bir video yayınladığımızda e-posta bildirimi alacaksınız.

Ben Pete LePage. Chrome 64 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.