Puppeteer'ı TypeScript'e Taşıma

Cem Doğru
Jack Franklin

Geliştirici Araçları ekibinde TypeScript'i severek kullanıyoruz. O kadar ki DevTools'daki yeni kod bu kodla yazılmaya başlanıyor ve tüm kod tabanının TypeScript tarafından tür denetimi yapılmasına yönelik büyük bir taşıma sürecinin ortasındayız. Chrome Geliştirici Zirvesi 2020'deki konuşmamızda bu geçişle ilgili daha fazla bilgi edinebilirsiniz. Dolayısıyla, Puppeteer'ın kod tabanını TypeScript'e taşımak son derece mantıklıydı.

Taşımayı planlama

Nasıl geçiş yapacağımızı planlarken küçük adımlarla ilerleme kaydedebilmek istedik. Bu, taşımanın ek yükünü azaltır ve aynı zamanda herhangi bir zamanda kodun yalnızca küçük bir bölümü üzerinde çalışmanızı sağlar. Ayrıca, riski de azaltır. Adımlardan birinde herhangi bir sorun olursa işlemi kolayca geri alabilirsiniz. Puppeteer'ın çok sayıda kullanıcısı vardır ve bozuk bir sürüm birçok kullanıcı için sorun yaratabilir. Bu nedenle, değişiklikleri kırma riskini en aza indirmek bizim için çok önemliydi.

Ayrıca Puppeteer'ın tüm işlevlerini kapsayan sağlam bir birim testleri setine sahip olduğu için de şanslıydık. Bu durum, taşıma işlemi sırasında kodu kırmadığımızdan ve aynı zamanda API'mizde değişiklikler de yapmadığımızdan emin olabileceğimiz anlamına geliyordu. Taşımanın amacı, hiçbir Puppeteer kullanıcı tarafından taşınmadığımızın farkında bile olmadan bu işlemi tamamlamaktı ve testler bu stratejinin hayati bir parçasıydı. İyi bir test kapsamımız olmasaydı taşıma işlemine devam etmeden önce bunu eklerdik.

Testler olmadan kod değişikliği yapmak risklidir, ancak dosyaların veya kod tabanının tamamına dokunduğunuz değişiklikler özellikle risklidir. Mekanik değişiklikler yaparken bir adım kolayca gözden kaçabilir ve bazı durumlarda testler hem uygulayıcıyı hem de incelemeyi yapan kişiyi aşan bir sorun yakalar.

En baştan zaman ayırmamız gereken şeylerden biri Sürekli Entegrasyon (CI) kurulumumuzdu. Çekme isteklerine yönelik CI çalıştırmalarının güvenilir olmadığını ve çoğu zaman başarısız olduğunu fark ettik. Bu o kadar sık oldu ki, hatanın Puppeteer'daki bir sorun değil, CI'daki tek seferlik bir sorun olduğunu varsayarak CI'mızı yoksayıp çekme isteklerini yine de birleştirme alışkanlığı edindik.

Bir miktar genel bakımdan ve bazı düzenli test hatalarını düzeltmeye ayırdığımız zamanın ardından cihazı çok daha tutarlı bir şekilde geçer duruma getirdik. Böylece CI'yı dinledik ve bir hatanın gerçek bir soruna işaret ettiğini anladık. Bu çalışma göz kamaştırıcı değildir ve sonsuz CI çalıştırmalarını izlemek sinir bozucudur. Ancak taşımanın yol açtığı pull isteklerinin sayısı göz önünde bulundurulduğunda test paketimizin güvenilir bir şekilde çalışması hayati önem taşıyordu.

Bir dosya seçin ve yerleştirin

Bu noktada taşıma işlemimiz hazırdı ve arkamızı kollayacak testlerle dolu sağlam bir CI sunucusu vardı. Rastgele dosyalarla ilgilenmek yerine, bilerek taşınmak üzere küçük bir dosya seçtik. Bu, gerçekleştirmek üzere olduğunuz planlanmış süreci doğrulamanıza olanak sağladığı için yararlı bir alıştırmadır. Bu dosya üzerinde çalışıyorsa yaklaşımınız geçerlidir; işe yaramazsa çizim tahtasına geri dönebilirsiniz.

Ayrıca, dosya bazında ilerlemek (ve normal Puppeteer sürümleriyle, böylece tüm değişiklikler aynı AİOY sürümünde gönderilmemiştir) riski düşük tutmuştur. Kod tabanındaki en basit dosyalardan biri olduğu için ilk dosya olarak DeviceDescriptors.js dosyasını seçtik. Tüm bu hazırlık çalışmalarını yapıp bu kadar küçük bir değişikliği başarmak biraz zor gelebilir. Ancak amaç hemen büyük değişiklikler yapmak değil, dikkatli bir şekilde ve düzenli olarak dosya dosya işleme devam etmektir. Yaklaşımı doğrulamak için harcadığınız süre, taşıma işleminin ilerleyen aşamalarında daha karmaşık dosyalara ulaştığınızda kesinlikle zamandan tasarruf etmenizi sağlar.

Kalıbı kanıtlayıp tekrarlayın

Neyse ki DeviceDescriptors.js üzerinde yapılan değişiklik kod tabanına başarıyla entegre edildi ve plan umduğumuz gibi işlemeye başladı. Bu noktada, adım adım ilerlemeye hazırsınız. Biz de tam olarak bunu yaptık. GitHub etiketi kullanmak, tüm çekme isteklerini gruplandırmanın gerçekten güzel bir yoludur. Biz de ilerlemeyi takip etmeyi faydalı buluyoruz.

Sitenizi taşıyın ve daha sonra iyileştirin

Her bir JavaScript dosyası için sürecimiz şöyleydi:

  1. .js olan dosyayı .ts olarak yeniden adlandırın.
  2. TypeScript derleyicisini çalıştırın.
  3. Sorunları düzeltin.
  4. Çekme isteğini oluşturun.

Bu başlangıçtaki çekme isteklerindeki işin çoğu, mevcut veri yapılarına ilişkin TypeScript arayüzlerinin ayıklanmasıydı. Daha önce açıkladığımız DeviceDescriptors.js'yi taşıyan ilk çekme isteğinde kullanılacak kod şu şekildedir:

module.exports = [
  { 
    name: 'Pixel 4',
    … // Other fields omitted to save space
  }, 
  …
]

Ve şu hale geldi:

interface Device {
  name: string,
  …
}

const devices: Device[] = [{name: 'Pixel 4', …}, …]

module.exports = devices;

Bu süreç kapsamında kod tabanının her satırını inceleyerek sorun olup olmadığını kontrol ettik. Yaklaşık birkaç yıldır mevcut olan ve zaman içinde büyüyen tüm kod tabanlarında olduğu gibi, kodları yeniden düzenleme ve durumu iyileştirmek için bazı fırsatlar mevcut. Özellikle TypeScript'e geçişle birlikte, kodun yeniden yapılandırılmasının derleyiciye daha fazla yönelmemizi ve daha iyi tür güvenliği elde etmemizi sağlayacağı yerler gördük.

Ancak tesadüfen bu değişiklikleri hemen yapmaktan kaçınmak oldukça önemlidir. Taşıma işleminin amacı, kod tabanını TypeScript'e aktarmaktır. Büyük bir taşıma işlemi sırasında her zaman, yazılımda ve kullanıcılarınızda kesintilere neden olma riskini göz önünde bulundurmalısınız. Başlangıçtaki değişiklikleri minimum düzeyde tutarak bu riski düşük tuttuk. Dosya birleştirilip TypeScript'e taşındıktan sonra, tür sisteminden yararlanmak için kodu iyileştirmek üzere ek değişiklikler yapabiliriz. Taşıma işlemleriniz için katı sınırlar belirlediğinizden emin olun ve bu sınırlar içinde kalmaya çalışın.

Tür tanımlarımızı test etmek için testleri taşıma

Kaynak kodun tamamı TypeScript'e taşındıktan sonra odağımızı testlere çevirebildik. Testlerimizin kapsamı genişti, ancak testlerin tümü JavaScript'te yazılmıştı. Bu da test etmedikleri bir şeyin tür tanımlarımız olduğu anlamına geliyordu. Üzerinde çalışmaya devam ettiğimiz projenin uzun vadeli hedeflerinden biri, Puppeteer ile kullanıma hazır yüksek kaliteli tür tanımları göndermek. Ancak kod tabanımızda tür tanımlarımızla ilgili herhangi bir kontrol yapmadık.

Testleri TypeScript'e taşıyarak (aynı süreci takip ederek, dosya bazında) TypeScript'le ilgili, aksi halde kullanıcıların bulması kolay bırakılabilecek sorunları tespit ettik. Artık testlerimiz yalnızca tüm işlevlerimizi kapsamakla kalmıyor, aynı zamanda TypeScriptmızın kalite kontrolü işlevini de yapıyor!

Puppeteer kod tabanı üzerinde çalışan mühendisler olarak TypeScript'ten bugüne kadar büyük fayda sağladık. Çok daha gelişmiş CI ortamımızla birleşince bu, Puppeteer üzerinde çalışırken daha üretken olmamızı ve TypeScript'in başka türlü bir npm sürümüne dönüştürülebilecek hataları yakalamamızı sağladı. Puppeteer'ı kullanan tüm geliştiricilerin de bu çalışmadan faydalanmasına olanak tanımak için yüksek kaliteli TypeScript tanımlarının gönderilmesinden heyecan duyuyoruz.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları ile Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz.

Chrome Geliştirici Araçları ekibiyle iletişime geçme

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

  • crbug.com adresinden bize öneri veya geri bildirim gönderin.
  • Geliştirici Araçları'nda Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.Daha fazla
  • @ChromeDevTools adresine tweet gönderin.
  • Geliştirici Araçları YouTube videoları bölümündeki yenilikler veya Geliştirici Araçları İpuçları YouTube videoları bölümlerimize yorum yapın.