nopa'yı nasıl yapıyoruz, 2. bölüm

İlk bölümde kaputun altına bakacağımı söylemiştim. İşte: nopa'nın neden sunucu tarafı yok, ağır iş bir tarayıcı sekmesine nasıl sığıyor, yaptıklarınız nerede duruyor — ve buradaki her kelimeyi bir dakikada kendiniz nasıl kontrol edersiniz.

Yüklenecek bir yer yok

Araç sitelerinin çoğu bir sunucunun önündeki bir sayfadır: dosyanız yukarı gider, sunucu işi yapar, sonuç geri gelir. nopa bunu tersine çevirir. Site statik dosyalardan oluşur — HTML, JavaScript, yazı tipleri — ve dosyanız koda değil, kod size gelir. İki PDF’yi birleştirdiğinizde birleştirme sekmenizde olur ve PDF oradan çıkmaz.

Hesap olmamasının nedeni de bu. Hesap, size ait bir şeyi bir sunucuda saklamak için vardır; bir şey saklayan sunucu yok — dolayısıyla giriş yapılacak bir yer de yok.

Ağır iş, bir sekmede

Tarayıcı ciddi bir makineye dönüştü ve her araç onun işe uyan parçasını kullanır:

  • PDF: pdf-lib dosyayı kurar ve yeniden yazar, PDF.js gördüğünüz sayfaları çizer. Bir PDF’yi sıkıştırın, ikisi de cihazınızda çalışır.
  • Fotoğraf ve ses: sinir ağları WebAssembly içinde ONNX Runtime üzerinde çalışır. Arka plan kaldırma ve sesi yazıya çevirme araçları modellerini bir kez indirip saklar; fotoğrafınız modele gider, asla tersi olmaz.
  • Taramalar: tesseract.js taranmış bir sayfanın metnini ayrı bir iş parçacığında okur. İlk seferde 4–5 MB’lık bir okuma modeli indirir; sonrasında zaten oradadır.
  • Word dosyaları: mammoth bir .docx’i okur, docx geri yazar; böylece Word düzenleyici size gönderilen sözleşmeyi açar ve gerçek bir Word dosyası olarak geri verir.
  • Oyunlar: jsnes koca bir NES’i JavaScript’te çalıştırır. NES sayfası, yazarlarının izin verdiği iki homebrew oyunla gelir ve kendi .nes dosyanızı yüklemeden oynatır.

Bedeli: kodun size gelmesi gerekir

Bunun bir de öbür yüzü var. Sunucu tarafındaki bir araç size hafif bir sayfa gönderir ve ağır işi göremediğiniz yerde yapar; biz ağır kısmı size göndermek zorundayız. Bu yüzden onu sayıyoruz: depomuzdaki bir betik her sayfayı gerçek bir tarayıcıda açar ve siz bir şeye basmadan önce indirilen JavaScript’i toplar. İlk çalıştırma, boş yere 1,4 MB çeken sayfalar buldu — rakamlarıyla tüm hikâye önceki bir yazıda.

O günden beri kural şu: bir motor, düğmesine basılınca yüklenir. PDF motoru bir PDF açtığınızda, okuma modeli bir taramanın okunmasını istediğinizde gelir. Bu hafta kural bir vakayı daha yakaladı: pano her açılışta, tek bir menü öğesi için 170 KB’lık bir PDF kitaplığı indiriyordu.

İşiniz nerede duruyor

Kaydettikleriniz — bir pano, bir görev listesi, bir belge, araçların ürettiği dosyalar — tarayıcının kendi veritabanı olan IndexedDB’ye, cihazınıza gider. Uygulamalar siz çalışırken kaydeder: sekmeyi kapatın, her şey bıraktığınız yerde olur.

Dürüst kısım: bu depolama bu tarayıcıya aittir. Sitenin verilerini silerseniz gider; telefonunuzu alırsanız orada değildir. Bu yüzden yedek bir tık uzaklıkta — tüm masaüstü tek dosya olarak, Ayarlar → Veriler’de — ve aynı ekranda tarayıcıdan, disk dolduğunda nopa’yı silmemesini isteyebilirsiniz.

İlk ziyaretten sonra çevrimdışı

Bir service worker uygulamanın bir kopyasını cihazınızda tutar; nopa’yı bir kez açtıktan sonra araçlar bağlantı olmadan da açılır. Her şey önceden saklanmaz: sinir ağı modelleri ve okuma modeli yalnızca bir araç ihtiyaç duyduğunda iner, çünkü bir telefon “ne olur ne olmaz” diye yüz megabaytlık model taşımamalı.

Kendiniz kontrol edin

Tarayıcınızın geliştirici araçlarını açın, Network sekmesine geçin ve herhangi bir aracı kullanın. İki tür istek göreceksiniz: nopa.space’ten gelen kendi kodumuz ve Yandex Metrica ve PostHog için ziyaret istatistikleri — hangi sayfanın açıldığı, hangi aracın kullanıldığı. Dosyanızın bir yere gittiğini görmeyeceksiniz, çünkü gitmez. Bir içerik engelleyici istatistikleri kapatır ve tüm araçlar aynı şekilde çalışır.

Bir keresinde burada biz de yanıldık. Ürün sayfalarımızdaki panel “tek bir POST yok” diyordu — istatistiksiz bir sürümde ölçülmüştü, oysa üretimde sayaç kendi POST’larını gönderiyor. Bir okur bunu on saniyede yakalardı; biz bu hafta yakaladık ve paneli tam olarak göreceğiniz şeyi söyleyecek şekilde yeniden yazdık.

Bu tasarımın yapamadıkları

Bir sunucu, bir sekmenin yapamadığı şeyleri yapar; bunu kendimiz söylemeyi yeğleriz:

  • Eşitleme yok. Telefonunuz ve dizüstünüz kendi kopyasını tutar; bir yedek dosyası onu taşır, canlı bir bağlantı yoktur.
  • Gerçek zamanlı ortak çalışma yok. Aynı panoyu düzenleyen iki kişinin arasında bir sunucu gerekir.
  • Bir yapay zekâ aracının ilk çalıştırması, modelinin inmesini bekler.
  • Bir telefon, bir veri merkezinden yavaştır. Çoğu iş bir an sürer; bir saatlik ses biraz zaman alır.

Sırada ne var

Cihazınızda bir şey bozulursa ya da bizde olmayan bir araca ihtiyacınız varsa hello@nopa.space adresine yazın — gerçek bir insan okuyor. Ya da katalogdan başlayın; nopa'nın neden var olduğunu anlatan ilk bölüm burada.