İstemci kitaplığı olmayan üçüncü taraf bir API'ye bağlanırken bulduğum her seferinde, etrafında çok sayıda standart şablon oluşturmam gerekiyor:
Kodlama kısmına geçmeden önce hangi dili kullanacağımızı tartışalım. Veri modellerini tanımlama konusundaki düşüncemi hatırlıyor musunuz? API istemcileri için, bir kullanıcıya döndürülecek veriler hakkında daha fazla bilgi vermek çok önemlidir, böylece dokümantasyon ve IDE arasında sürekli olarak bağlam değiştirmek zorunda kalmayız. Kod yazarken hatalardan ve yazım hatalarından kaçınmanıza da yardımcı olur. Sonunda hepimizin testleri var, değil mi? Tüm bunları akılda tutarak, şu anda en iyi seçenek TypeScript kullanmaktır.
Şimdi kütüphanemizin nerede çalıştırılacağını düşünelim. Temel olarak, bir tarayıcı veya bir Node.js sunucusu olabilir. Neden her ikisinde de çalışan bir kütüphane geliştirmiyorsunuz? Ayrıca, kodun önce sunucuda ve sonra istemcide yürütüldüğü sunucu tarafı oluşturma ile birlikte kullanımını kolaylaştıracaktır.
Herhangi bir kütüphane için iki önemli fark, boyutu ve eski ve modern istemcileri olan kullanıcıları desteklemesidir. Öncelikle, boyutumuzun olabildiğince küçük olmasını istiyoruz - bir API istemcisi projeye fazla ağırlık vermemelidir. İkinci olarak, kütüphane, modern sürümü destekleyemeyenler için CommonJS paketini sunarak iyi bir tarayıcı desteğine sahip olmalı ve aynı zamanda daha yeni sürümlere sahip istemciler için modern bir paket sunmalıdır.
Bir web projesi için varsayılan seçim Webpack'tir , ancak kitaplığımız oldukça küçük ve basittir, bu nedenle kolay kurulum için Rollup ile birlikte temel paketleyici olarak seçtim
microbundle.
npm i -D microbundle
{ "source": "src/foo.js", // Your source file (same as 1st arg to microbundle) "main": "dist/foo.js", // Output path for CommonJS/Node "module": "dist/foo.module.js", // Output path for JS Modules "unpkg": "dist/foo.umd.js", // Optional, for unpkg.com "scripts": { "build": "microbundle", // Uses "source" and "main" as input and output paths by default "dev": "microbundle watch" } }
Çok sayıda API uç noktasını desteklemek istediğimizden, API genişlediğinde kodumuzun iyi ölçeklenmesini istiyoruz. Bunu yapmanın en iyi yollarından biri, klasörleri kaynak adlarıyla hizalamaktır. İçin Dev.to API , bu şekilde görünecektir:
/src /articles index.ts // Everything that's related to articles ... /comments index.ts ... /users ... index.ts // Imports and joins all resources together
Hem tarayıcıda hem de Node.js'de çalışan bir kitaplık yapmak istedik. İsteklerimizi de nasıl evrensel hale getirebiliriz?
fetchtarayıcıda mevcut ancak
httpmodülü kullanmanız gereken Node.js'de yok .
isomorphic-unfetch ,
fetchişlevi her yerde kullanmamıza ve tarayıcı ile Node.js sürümleri arasında otomatik olarak geçiş yapmamıza yardımcı olacaktır .
Şimdi bir kimlik doğrulama başlığını
requestsaran
fetchve ekleyen işleve bir göz atalım :
PromiseMüşterilerin istekleri birbirine zincirleyebilmesi veya sonuçları beklemesi için her zaman geri dönüyoruz.
API istemcisindeki kodun çoğu, üçüncü taraf uç noktaları ile entegre edilmiştir. Testi kolaylaştırmak için, bir HTTP sunucusunu sizin için uygun bir şekilde taklit eden Nock kitaplığını kullanabiliriz :
Yukarıdaki örnekte, taklidi kurduk, sonra istekte bulunduk ve son olarak taklitin yürütüldüğünü kontrol ettik.
Küçük, ölçeklenebilir, kutudan çıkar çıkmaz TypeScript'i destekleyen ve bir tarayıcıda ve Node.js'de çalışan bir API istemcisi oluşturduk.
Son kodu görmek istiyorsanız, depoyu kontrol etmekten çekinmeyin . Ayrıntıları sormaktan veya bir iyileştirme önermekten çekinmeyin.
Teknoloji dünyasında, işletmeler sürekli olarak siber suçluların şeytani faaliyetlerinin tuzağına düşme riski altındadır. Endişe verici derecede sık hale gelen böyle bir taktik, kimlik bilgilerini doldurmaktır.
Gündem: Giriş: TL; Ama okuyabilirim: A / B testi, CloudFront ve Lamba @ edge hakkında zaten bilginiz varsa, AWS Lambda @ edge ile doğrudan A / B testine gidin. A / B testi nedir? A / B testi, kullanıcıların bir web sitesinin iki farklı versiyonunun katılımını karşılaştırmaya odaklanan bir UX araştırma metodolojisidir.
Bugün AppStore'daki birçok uygulama, tablo görünümünü kaydırırken içeriği tablo görünümü başlığındaki ölçekleme gibi davranışlara sahiptir. Bu tür davranışlara nasıl ulaşabileceğimizin en basit yaklaşımını size göstereceğim.
İlk blogumda söz verdiğim gibi 'DOM Nedir?' burada 'DOM işleme' üzerine bir blog var. Bu blogda DOM'a daha fazla dalacağız ve DOM işlemenin ne olduğunu ve nasıl yapıldığını öğreneceğiz.
Node.js'de akışların nasıl çalıştığını hiç merak ettiniz mi? Sahiptim.