Puppeteer'ı TypeScript'e Taşıma

Jack Franklin

DevTools ekibi olarak TypeScript'i çok seviyoruz. Hatta DevTools'taki yeni kodlar TypeScript ile yazılmakta ve kod tabanının tamamının TypeScript tarafından tür kontrolüne geçirildiği büyük bir taşıma işleminin ortasındayız. Bu taşıma işlemi hakkında daha fazla bilgiyi Chrome Dev Summit 2020'deki konuşmamızda bulabilirsiniz. Bu nedenle, Puppeteer'ın kod tabanını da TypeScript'e taşımayı düşünmek mantıklıydı.

Taşıma işlemini planlama

Taşıma işlemini planlarken küçük adımlarla ilerlemek istedik. Bu sayede taşıma işleminin ek yükü azalır (herhangi bir zamanda kodun yalnızca küçük bir kısmı üzerinde çalışırsınız) ve risk de azalır. Adımlardan birinde sorun yaşarsanız kolayca geri alabilirsiniz. Puppeteer'ın çok sayıda kullanıcısı var. Bozuk bir sürüm birçok kullanıcı için soruna neden olur. Bu nedenle, değişiklikleri kırma riskini minimum düzeyde tutmamız son derece önemliydi.

Ayrıca Puppeteer'ın tüm işlevlerini kapsayan sağlam bir birim testi grubuna sahip olması da şanslı olduğumuz bir durumdu. Bu sayede, taşıma işlemi sırasında kodu bozmadığımızdan ve API'mizde değişiklik yapmadığımızdan emin olabilirdik. Taşıma işleminin amacı, Puppeteer kullanıcılarının taşıma işlemini gerçekleştirdiğimizden haberdar bile olmadan tamamlamaktı ve testler bu stratejinin önemli bir parçasıydı. Test kapsamımız yeterli olmasaydı taşıma işlemine devam etmeden önce bu özelliği eklerdik.

Kod değişikliğini test etmeden 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 kaçırabilir ve birçok durumda testlerde hem uygulayıcıyı hem de inceleyeni geride bırakan bir sorun yakalanabilir.

Başlangıçta zaman ayırdığımız konulardan biri sürekli entegrasyon (CI) kurulumumuzla ilgiliydi. Çekme isteklerine karşı CI çalıştırmalarının güvenilir olmadığını ve genellikle başarısız olduğunu fark ettik. Bu durum o kadar sık meydana geldi ki, hatanın Puppeteer'da değil, CI'de tek seferlik bir sorun olduğunu varsayarak CI'mizi yoksaymaya ve yine de çekme isteklerini birleştirme alışkanlığı edinmiştik.

Genel bakım ve düzenli testlerdeki bazı hataları düzeltmek için özel olarak ayrılmış bir sürenin ardından, CI'yi dinlememizi ve bir hatanın gerçek bir sorunu gösterdiğini anlamamızı sağlayan çok daha tutarlı bir şekilde geçecek bir duruma getirdik. Bu çalışma çok ilgi çekici değil ve sonu gelmeyen CI çalıştırmalarını izlemek can sıkıcı. Ancak taşıma işleminin gönderdiği çekme isteklerinin sayısı göz önüne alındığında, test paketimizin güvenilir bir şekilde çalışması çok önemliydi.

Bir dosya seçip indirme

Bu noktada, taşıma işlemimiz hazırdı ve arkamızı kollayacak testlerle dolu güçlü bir CI sunucumuz vardı. Herhangi bir dosyayı seçmek yerine, taşımak için küçük bir dosya seçtik. Bu alıştırma, gerçekleştirmek üzere olduğunuz planlı süreci doğrulamanıza olanak tanıdığı için faydalıdır. Bu dosya üzerinde işe yararsa yaklaşımınız geçerlidir. Aksi takdirde, yeniden planlama yapabilirsiniz.

Ayrıca, dosya dosya gitmek (ve tüm değişikliklerin aynı npm sürümünde gönderilmemesi için düzenli Puppeteer sürümleriyle) riski azalttı. Kod tabanında 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şiklik yapmak biraz hayal kırıklığına uğratabilir. Ancak amaç, hemen büyük değişiklikler yapmak değil, dosya dosya dikkatli ve sistematik bir şekilde ilerlemektir. Yaklaşımı doğrulamak için harcanan zaman, daha karmaşık dosyalara ulaştığınız taşıma işleminin sonraki aşamalarında kesinlikle zaman kazandırır.

Deseni kanıtlayın ve tekrarlayın

Neyse ki DeviceDescriptors.js değişikliği başarıyla kod tabanına eklendi ve plan umduğumuz gibi çalıştı. Bu noktada, işe koyulmaya hazırsınız. Biz de tam olarak bunu yaptık. GitHub etiketi kullanmak, tüm pull isteklerini bir arada gruplandırmak için gerçekten güzel bir yol. Biz de ilerlemeyi izlemek için bu yöntemi faydalı bulduk.

Taşıyıp daha sonra iyileştirme

Her bir JavaScript dosyası için uyguladığımız işlem şu şekildeydi:

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

Bu ilk çekme isteklerindeki çalışmaların çoğu, mevcut veri yapıları için TypeScript arayüzlerini ayıklamaktı. Daha önce bahsettiğimiz DeviceDescriptors.js'yi taşıyan ilk çekme isteği durumunda, kod şu şekilde değişti:

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ürecin bir parçası olarak, kod tabanının her satırını inceleyerek sorunları kontrol ettik. Yaklaşık birkaç yıldır kullanılan ve zaman içinde büyüyen tüm kod tabanında olduğu gibi, kodları yeniden düzenlemeye ve durumu iyileştirmeye yönelik bazı fırsatlar vardır. Özellikle TypeScript'e geçişle birlikte, kodun biraz yeniden yapılandırılmasının derleyiciye daha fazla güvenmemizi ve daha iyi tür güvenliği elde etmemizi sağlayacağı yerleri gördük.

Bu değişiklikleri hemen yapmaya direnmek, mantıksız olarak çok önemlidir. Taşımanın amacı, kod tabanını TypeScript'e aktarmaktır ve büyük bir taşıma işlemi sırasında her zaman yazılımda ve kullanıcılarınız için kesintilere neden olma riskini göz önünde bulundurmalısınız. İlk değişiklikleri en aza indirerek bu riski düşük tuttuk. Dosya birleştirilip TypeScript'e taşındıktan sonra, kodda tür sisteminden yararlanacak şekilde iyileştirmeler yapmak için takip değişiklikleri yapabildik. Taşıma işleminiz için katı sınırlar belirlediğinizden ve bu sınırlar içinde kalmaya çalıştığınızdan emin olun.

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

Kaynak kodunun tamamı TypeScript'e taşındıktan sonra testlere odaklanabildik. Testlerimiz geniş kapsamlıydı ancak tümü JavaScript'te yazılmıştı. Bu, model tanımlarımızı test etmedikleri anlamına geliyordu. Projenin uzun vadeli hedeflerinden biri (hâlâ üzerinde çalıştığımız) Puppeteer ile birlikte yüksek kaliteli tür tanımlarını kullanıma sunmaktır. Ancak kod tabanımızda tür tanımlarımızla ilgili herhangi bir kontrolümüz yoktu.

Testleri TypeScript'e taşıyarak (aynı süreci uygulayarak, dosya dosya ilerleyerek) TypeScript'imizde, kullanıcıların bizim için bulmasını beklediğimiz sorunları tespit ettik. Artık testlerimiz yalnızca tüm işlevlerimizi kapsamıyor, TypeScript'imizin kalite kontrolü işlevi de görüyor.

Puppeteer kod tabanında çalışan mühendisler olarak TypeScript'ten çok büyük fayda sağladık. Çok daha iyileştirilmiş CI ortamımızla birlikte, Puppeteer üzerinde çalışırken daha üretken olmamızı ve TypeScript'in aksi takdirde npm sürümüne dahil edilecek hataları yakalamasını sağladı. Puppeteer'ı kullanan tüm geliştiricilerin de bu çalışmadan yararlanabilmesi için yüksek kaliteli TypeScript tanımlarını kullanıma sunmaktan heyecan duyuyoruz.

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

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

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.