Bu sayfa, Cloud Translation API ile çevrilmiştir.

KV Storage: Web'in İlk Yerleşik Modülü

Philip Walton

Tarayıcı tedarikçileri ve web performansı uzmanları, son on yılda localStorage'in yavaş olduğunu ve web geliştiricilerinin bu hizmeti artık kullanmaması gerektiğini söylüyor.

Adil olmak gerekirse, bu söylenenler yanlış değildir. localStorage, ana iş parçacığını engelleyen eşzamanlı bir API'dir ve bu API'ye her eriştiğinizde sayfanızın etkileşimli olmasını büyük olasılıkla engellersiniz.

Sorun, localStorage API'nin son derece cazip şekilde basit olması ve localStorage için eşzamansız alternatifin tek eşzamansız alternatifi, kullanım kolaylığı veya API'yi karşılama kolaylığıyla bilinen IndexedDB'dir.

Bu nedenle geliştiricilere, kullanımı zor bir şey ile performans açısından kötü bir şey arasında seçim yapma hakkı tanınır. Bununla birlikte, arka planda eşzamansız depolama API'leri kullanırken localStorage API'nin basitliğini sunan kitaplıklar vardır. Buna örnek olarak, uygulamanızdaki kitaplıklardan birinin dosya boyutu maliyeti vardır ve performans bütçenizi tüketebilir.

Peki ya dosya boyutu maliyetini ödemek zorunda kalmadan localStorage API'nin basitliğiyle eşzamansız depolama API'sinin performansını elde etmek mümkün olsaydı ne olurdu?

Çok yakında bu mümkün. Chrome, yerleşik modüller olarak bilinen yeni bir özellikle deneme yapıyor. Kullanıma sunmayı planladığımız ilk özellik, KV Storage adlı eşzamansız bir anahtar/değer depolama modülü.

Ancak KV Depolama modülünün ayrıntılarına girmeden önce, yerleşik modüllerle ne kastettiğimi açıklayalım.

Yerleşik modüller nedir?

Yerleşik modüller, normal JavaScript modülleri gibidir. Tek fark, tarayıcıyla birlikte gönderdikleri için indirilmeleri gerekmemeleridir.

Geleneksel web API'leri gibi, yerleşik modüllerin de bir standartlaştırma sürecinden geçmesi gerekir. Her bir modül, gönderilmeden önce tasarım incelemesi ve hem web geliştiricileri hem de diğer tarayıcı satıcılarından olumlu destek almayı gerektiren kendi spesifikasyonlarına sahiptir. (Chrome'da yerleşik modüller, tüm yeni API'leri uygulamak ve göndermek için kullandığımız lansman sürecini izler.)

Geleneksel web API'lerinin aksine yerleşik modüller küresel kapsamda sunulmaz. Yalnızca içe aktarma işlemleri aracılığıyla kullanılabilirler.

Yerleşik modüllerin tüm dünyada kullanıma sunulmamasının birçok avantajı vardır: Yeni bir JavaScript çalışma zamanı bağlamı (ör. yeni bir sekme, çalışan veya hizmet çalışanı) başlatmanın ek yüküne neden olmazlar ve gerçekten içe aktarılmadıkları sürece bellek veya CPU kullanmazlar. Ayrıca adlandırma kuralları, kodunuzda tanımlanan diğer değişkenlerle çakışma riski taşımaz.

Yerleşik bir modülü içe aktarmak için std: ön ekini ve ardından yerleşik modül tanımlayıcısını kullanırsınız. Örneğin, desteklenen tarayıcılarda KV Storage modülünü aşağıdaki kodla içe aktarabilirsiniz (Desteklenmeyen tarayıcılarda KV Storage polyfill'in nasıl kullanılacağı için aşağıya bakın):

import storage, {StorageArea} from 'std:kv-storage';

KV Depolama modülü

KV Storage modülü, basitliği açısından localStorage API'ye benzer ancak API şekli aslında JavaScript Map'e daha yakındır. getItem(), setItem() ve removeItem() yerine get(), set() ve delete() var. Ayrıca, localStorage tarafından kullanılamayan keys(), values() ve entries() gibi başka harita benzeri yöntemler de içerir ve Map gibi anahtarların dize olması gerekmez. Yapılandırılmış-serileştirilebilir türde olabilirler.

Map'den farklı olarak, tüm KV Depolama yöntemleri ya vaatler ya da eş zamansız yinelemeler döndürür (çünkü bu modülün ana amacı, localStorage ile karşılaştırıldığında eş zamanlı olmamasıdır). API'nin tamamını ayrıntılı olarak görmek için spesifikasyona bakabilirsiniz.

Yukarıdaki kod örneğinde fark etmiş olabileceğiniz gibi, KV Storage modülünde bir varsayılan dışa aktarma storage ve bir adet adlandırılmış dışa aktarma StorageArea bulunur.

storage, StorageArea sınıfının 'default' adlı bir örneğidir ve geliştiricilerin uygulama kodlarında en sık bu adı kullanır. StorageArea sınıfı, ek izolasyonun gerekli olduğu durumlar (ör. verileri depolayan ve varsayılan storage örneği aracılığıyla depolanan verilerle çakışmaları önlemek isteyen üçüncü taraf kitaplığı) için sunulur. StorageArea verileri, kv-storage:${name} adıyla bir IndexedDB veritabanında depolanır. Burada ad, StorageArea örneğinin adıdır.

Kodunuzda KV Depolama modülünün nasıl kullanılacağına dair bir örnek aşağıda verilmiştir:

import storage from 'std:kv-storage';

const main = async () => {
  const oldPreferences = await storage.get('preferences');

  document.querySelector('form').addEventListener('submit', async () => {
    const newPreferences = Object.assign({}, oldPreferences, {
      // Updated preferences go here...
    });

    await storage.set('preferences', newPreferences);
  });
};

main();

Not: Deneysel web platformu özellikleri işaretini açtıysanız KV Storage modülü şu anda Chrome 74'te kullanılabilmektedir: (chrome://flags/#enable-experimental-web-platform-features).

Tarayıcı yerleşik modülü desteklemiyorsa ne olur?

Tarayıcılarda yerel JavaScript modüllerinin kullanımı hakkında bilginiz varsa URL dışındaki şeyleri içe aktarmanın (en azından şimdiye kadar) hata oluşacağını biliyorsunuzdur. Ayrıca std:kv-storage geçerli bir URL değil.

Böylece şu soru akla gelir: Kodumuzda kullanabilmek için tüm tarayıcıların yerleşik modülleri desteklemesini beklememiz gerekir mi? Neyse ki yanıt hayır!

Yerleşik modülleri, haritaları içe aktarma adlı başka bir özellik sayesinde, bir tarayıcı bile desteklediği anda kullanabilirsiniz. Bunu, deneme aşamasında olduğumuz başka bir özellik sayesinde yapabilirsiniz.

Haritaları içe aktar

Haritaları içe aktarma, temelde geliştiricilerin tanımlayıcıları bir veya daha fazla alternatif tanımlayıcıya takma ad olarak içe aktarabilmesini sağlayan bir mekanizmadır.

Bu, tarayıcının belirli bir içe aktarma tanımlayıcısını uygulamanızın tamamında çözme şeklini (çalışma zamanında) değiştirmenize olanak tanıdığından etkilidir.

Yerleşik modüller söz konusu olduğunda bu, uygulama kodunuzda modülün çoklu dolgusuna referans vermenize olanak tanır ancak yerleşik modülü destekleyen bir tarayıcı bunun yerine bu sürümü yükleyebilir.

KV Storage modülüyle çalışmasını sağlamak için bir içe aktarma haritasını şu şekilde tanımlarsınız:

<!-- The import map is inlined into your page -->
<script type="importmap">
{
  "imports": {
    "/path/to/kv-storage-polyfill.mjs": [
      "std:kv-storage",
      "/path/to/kv-storage-polyfill.mjs"
    ]
  }
}
</script>

<!-- Then any module scripts with import statements use the above map -->
<script type="module">
  import storage from '/path/to/kv-storage-polyfill.mjs';

  // Use `storage` ...
</script>

Yukarıdaki kodda dikkat edilmesi gereken nokta, /path/to/kv-storage-polyfill.mjs URL'sinin iki farklı kaynakla eşlenmesidir: std:kv-storage ve ardından tekrar orijinal URL (/path/to/kv-storage-polyfill.mjs).

Dolayısıyla, tarayıcı bu URL'ye (/path/to/kv-storage-polyfill.mjs) referans veren bir içe aktarma ifadesiyle karşılaştığında, önce std:kv-storage dosyasını yüklemeye çalışır. Yükleymezse /path/to/kv-storage-polyfill.mjs yüklemeye devam eder.

Buradaki sihir, içe aktarma ifadesine iletilen URL, çoklu dolgunun URL'si olduğundan, tarayıcının bu tekniğin çalışması için haritaları içe aktarma veya yerleşik modülleri desteklemesine gerek olmamasıdır. Çoklu dolgu aslında yedek değil varsayılandır. Yerleşik modül, progresif bir geliştirmedir.

Modülleri hiç desteklemeyen tarayıcılar ne olacak?

Yerleşik modülleri koşullu olarak yüklemek üzere içe aktarma eşlemelerini kullanmak için aslında import ifadelerini kullanmanız gerekir.Bu, aynı zamanda modül komut dosyalarını (ör. <script type="module">) kullanmanız gerektiği anlamına gelir.

Şu anda tarayıcıların% 80'inden fazlası modülleri desteklemektedir. Desteklemeyen tarayıcılarda, eski bir paketi sunmak için modül/nomodule tekniğini kullanabilirsiniz. Modülleri desteklemeyen tarayıcıların kesinlikle yerleşik modülleri desteklemeyeceğini bildiğinizden nomodule derlemenizi oluştururken tüm çoklu dolguları eklemeniz gerekeceğini unutmayın.

KV Storage demosu

Eski tarayıcıları desteklemeye devam ederken yerleşik modüllerin kullanılabileceğini göstermek için, yukarıda açıklanan tüm teknikleri içeren ve günümüzde tüm tarayıcılarda çalışan bir demo hazırladım:

Modülleri, haritaları içe aktarmayı ve yerleşik modülü destekleyen tarayıcılar gereksiz kod yüklemez.
Modülleri ve haritaları içe aktarmayı destekleyen ancak yerleşik modülü desteklemeyen tarayıcılar, KV Storage çoklu dolgusunu (tarayıcının modül yükleyicisi aracılığıyla) yükler.
Modülleri destekleyen ancak haritaları içe aktarmayı desteklemeyen tarayıcılar, KV Storage çoklu dolgusunu da yükler (tarayıcının modül yükleyicisi aracılığıyla).
Modülleri hiç desteklemeyen tarayıcılar, eski paketlerinde KV Storage çoklu dolgusunu alır (<script nomodule> aracılığıyla yüklenir).

Demo, Glitch'te barındırıldığı için kaynağı görüntüleyebilirsiniz. Ayrıca, BENİOKU konumunda uygulamayla ilgili ayrıntılı bir açıklama da bulabilirsiniz. Nasıl oluşturulduğunu merak ediyorsanız hemen göz atabilirsiniz.

Yerel yerleşik modülün nasıl çalıştığını gerçekten görmek için demoyu Chrome 74 veya sonraki sürümlerde deneysel web platformu özellikleri bayrağı (chrome://flags/#enable-experimental-web-platform-features) açık olacak şekilde yüklemeniz gerekir.

Geliştirici Araçları'ndaki kaynak panelde çoklu doldurma komut dosyasını görmeyeceğiniz için yerleşik modülün yüklendiğini doğrulayabilirsiniz. Bunun yerine yerleşik modül sürümünü görürsünüz (faydalı bir gerçek: modülün kaynak kodunu inceleyebilir ve hatta kesme noktaları ekleyebilirsiniz!):

Chrome Geliştirici Araçları'ndaki KV Depolama modülü kaynağı

Lütfen görüşlerinizi bizimle paylaşın

Bu tanıtımın size yerleşik modüllerle nelerin mümkün olabileceğine dair bir fikir vermiş olması gerekir. Umarım heyecanlısınızdır! Geliştiricilerin KV Storage modülünü (ve burada açıklanan tüm yeni özellikleri) deneyip bize geri bildirimde bulunmalarını çok isteriz.

Bu makalede belirtilen özelliklerin her biri için bize geri bildirim gönderebileceğiniz GitHub bağlantıları:

Sitenizde şu anda localStorage kullanılıyorsa tüm ihtiyaçlarınızı karşılayıp karşılamadığını görmek için KV Storage API'ye geçmeyi denemelisiniz. Ayrıca KV Storage kaynak denemesine kaydolursanız bu özellikleri hemen dağıtabilirsiniz. Tüm kullanıcılarınız daha iyi depolama performansından faydalanır ve Chrome 74 ve üzeri sürümlerin kullanıcılarının ek indirme maliyeti ödemesine gerek kalmaz.