Puppeteer'ı TypeScript'e Taşıma

Jack Franklin

Geliştirici Araçları ekibi olarak TypeScript'in büyük hayranıyız. Hatta Geliştirici Araçları'ndaki yeni kodlar TypeScript ile yazılıyor ve tüm kod tabanının TypeScript tarafından tür denetimi yapılacak şekilde büyük bir geçiş sürecindeyiz. 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şımak mantıklı bir karardı.

Taşıma işlemini planlama

Taşıma işlemini planlarken küçük adımlarla ilerleyebilmek istedik. Bu sayede, taşıma işleminin ek yükü düşük tutulur (her seferinde yalnızca kodun küçük bir bölümü üzerinde çalışırsınız) ve risk de düşük kalır. Adımlardan birinde sorun yaşarsanız kolayca geri dönebilirsiniz. Puppeteer'ın çok sayıda kullanıcısı var ve hatalı bir sürüm, bu kullanıcıların birçoğu için sorunlara neden olabilirdi. Bu nedenle, zarar veren değişiklik riskini minimumda tutmamız çok önemliydi.

Ayrıca, Puppeteer'ın tüm işlevlerini kapsayan sağlam bir birim testi grubuna sahip olması da bizim için bir avantaj oldu. Bu sayede, taşıma işlemi sırasında kodu bozmadığımızdan ve API'mizde değişiklik yapmadığımızdan emin olabildik. Taşıma işleminin amacı, Puppeteer kullanıcıları taşıma işlemini fark etmeden tamamlamaktı. Testler, bu stratejinin önemli bir parçasıydı. İyi bir test kapsamımız olmasaydı taşıma işlemine devam etmeden önce bunu eklerdik.

Testler olmadan herhangi bir kod değişikliği yapmak risklidir ancak özellikle dosyaların tamamına veya kod tabanının tamamına dokunduğunuz değişiklikler risklidir. Mekanik değişiklikler yapılırken bir adımı atlamak kolaydır ve testler, hem uygulayıcının hem de incelemecinin gözünden kaçan bir sorunu birden fazla kez yakalamıştır.

Başlangıçta zaman ayırdığımız bir konu da sürekli entegrasyon (CI) kurulumumuz oldu. Çekme isteklerine karşı yapılan CI çalıştırmalarının kararsız olduğunu ve genellikle başarısız olduğunu fark ettik. Bu durum o kadar sık yaşanıyordu ki hatanın Puppeteer'daki bir sorundan değil, CI'daki tek seferlik bir sorundan kaynaklandığını düşünerek CI'yı yoksayma ve pull isteklerini yine de birleştirme alışkanlığı edinmiştik.

Bazı genel bakımlardan ve düzenli testlerdeki tutarsızlıkları düzeltmek için harcanan zamandan sonra, testleri çok daha tutarlı bir şekilde geçebilecek duruma getirdik. Böylece CI'ı dinleyebiliyor ve bir hatanın gerçek bir sorunu gösterdiğini anlayabiliyoruz. Bu çalışma göz alıcı olmasa da sürekli CI çalıştırmalarını izlemek sinir bozucu olsa da taşıma işlemiyle gönderilen pull isteklerinin sayısı göz önüne alındığında test paketimizin güvenilir bir şekilde çalışması hayati önem taşıyordu.

Bir dosyayı seçip yerleştirme

Bu noktada, taşıma işlemimiz hazırdı ve arkamızı kollayacak testlerle dolu sağlam bir CI sunucumuz vardı. Rastgele bir dosyayı incelemek yerine, taşımak için küçük bir dosya seçtik. Bu alıştırma, planladığınız süreci doğrulamayı sağladığı için faydalıdır. Bu dosyada çalışıyorsa yaklaşımınız geçerlidir. Çalışmıyorsa planınızı yeniden gözden geçirebilirsiniz.

Ayrıca, dosya dosya ilerlemek (ve düzenli Puppeteer sürümleriyle tüm değişikliklerin aynı npm sürümünde yayınlanmaması) riski azalttı. 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şiklik yapmak biraz yetersiz gelebilir ancak amaç hemen büyük değişiklikler yapmak değil, dikkatli ve metodik bir şekilde dosya dosya ilerlemektir. Yaklaşımı doğrulamak için harcanan zaman, daha sonra taşıma sırasında daha karmaşık dosyalarla karşılaştığınızda kesinlikle zaman kazandırır.

Deseni kanıtlayın ve tekrarlayın

Neyse ki DeviceDescriptors.js değişikliği kod tabanına başarıyla eklendi ve plan, umduğumuz gibi işe yaradı. Bu noktada, işe koyulmaya ve devam etmeye 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. Bu yöntemin, ilerleme durumunu takip etmek için yararlı olduğunu gördük.

Taşıyın ve daha sonra iyileştirin

Her bir JavaScript dosyası için sürecimiz şu şekildeydi:

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

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

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

Ş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 sorunları tespit ettik. Birkaç yıldır kullanılan ve zaman içinde büyüyen her kod tabanında olduğu gibi, kodu yeniden düzenlemek ve durumu iyileştirmek için fırsatlar vardır. Özellikle TypeScript'e geçişle birlikte, kodda küçük bir yeniden yapılandırma yaparak derleyiciden daha fazla yararlanabileceğimiz ve daha iyi tür güvenliği elde edebileceğimiz yerler olduğunu gördük.

Beklenenin aksine, bu değişiklikleri hemen yapmamak gerçekten önemlidir. 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 bozulmalara neden olma riskini göz önünde bulundurmanız gerekir. İlk 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 kodda iyileştirme amaçlı değişiklikler 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

Tüm kaynak kodunu TypeScript'e taşıdıktan sonra testlerimize odaklanabildik. Testlerimiz geniş bir kapsama sahipti ancak hepsi JavaScript ile yazılmıştı. Bu nedenle, test etmedikleri şeylerden biri tür tanımlarımızdı. Projenin uzun vadeli hedeflerinden biri (üzerinde hâlâ çalışıyoruz) Puppeteer ile birlikte yüksek kaliteli tür tanımları sunmaktı ancak kod tabanımızda tür tanımlarımızla ilgili herhangi bir kontrol yoktu.

Testleri TypeScript'e taşıyarak (aynı işlemi uygulayarak, dosya dosya ilerleyerek) TypeScript'imizde, aksi takdirde kullanıcıların bulmasını bekleyeceğimiz sorunlar tespit ettik. Artık testlerimiz yalnızca tüm işlevlerimizi kapsamıyor, aynı zamanda TypeScript'imizin kalite kontrolünü de yapıyor.

Puppeteer kod tabanı üzerinde çalışan mühendisler olarak TypeScript'ten çok büyük fayda sağladık. Çok daha iyi hale getirdiğimiz CI ortamımızla birlikte, Puppeteer üzerinde çalışırken daha üretken olmamızı ve TypeScript'in, aksi takdirde npm sürümüne girecek olan hataları yakalamasını sağladı. Puppeteer kullanan tüm geliştiricilerin 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, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi, en yeni web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

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

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.