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 tabi tutulacağı 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 ve bozuk bir sürüm bu kullanıcıların çoğunda soruna neden olur. Bu nedenle, bozucu değişiklikler riskini en aza indirmemiz çok ö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 bunu 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ı atlamak kolaydır ve testler, hem uygulayıcı hem de inceleyenin gözünden kaçan bir sorunu birden fazla kez tespit etmiştir.

Başlangıçta zaman ayırdığımız konulardan biri sürekli entegrasyon (CI) kurulumumuzdu. CI'nin, çekme isteklerine karşı çalıştırılmasının kararsız olduğunu ve genellikle başarısız olduğunu fark ettik. Bu durum o kadar sık yaşandı ki, hatanın Puppeteer'da değil, CI'de tek seferlik bir sorun olduğunu varsayarak CI'mizi yok sayıp yine de çekme isteklerini birleştirme alışkanlığı edinmiştik.

Bazı genel bakım işlemlerinden ve düzenli testlerdeki bazı hataları düzeltmek için özel olarak ayrılmış zamandan sonra, CI'yi dinlememizi ve bir hatanın gerçek bir sorun olduğunu 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şınacak küçük bir dosya seçtik. Bu, gerçekleştirmek üzere olduğunuz planlı süreci doğrulamanıza olanak tanıdığı için faydalı bir alıştırmadır. Bu dosya üzerinde işe yararsa yaklaşımınız geçerlidir. Aksi takdirde, yeniden planlama yapabilirsiniz.

Ayrıca, dosyaları tek tek ele almak (ve tüm değişikliklerin aynı npm sürümünde yayınlanmaması için düzenli Puppeteer sürümlerini kullanmak) 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 ile ilgili değişiklik kod tabanına başarıyla 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 gruplandırmanın çok iyi bir yoludur ve ilerlemeyi takip etmek için faydalı olduğunu gördük.

Taşıyıp daha sonra iyileştirme

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

  1. Dosyayı .js yerine .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 sorun olup olmadığını kontrol ettik. Birkaç yıldır var olan ve zaman içinde büyüyen her kod tabanında olduğu gibi, kodu yeniden yapılandırıp durumu iyileştirme 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.

Sezgilere aykırı olarak, bu değişiklikleri hemen yapmamaya dikkat etmeniz gerekir. Taşıma işleminin amacı, kod tabanını TypeScript'e geçirmektir. Büyük bir taşıma işlemi sırasında her zaman yazılımda ve kullanıcılarınızda kesinti yaşanma 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 kodun tamamını TypeScript'e taşıdıktan sonra testlerimize odaklandık. Testlerimiz geniş kapsamlıydı ancak tümü JavaScript'te yazılmıştı. Bu, tür tanımlarımızın test edilmediği 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 faydalar 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

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile 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.