Figma'nın TypeScript'e Yolculuğu: Özel Programlama Dilini Derleyip Ortadan Kaldırmak
- Figma, mobil renderlama mimarisinin kritik bir bölümünü Skew adlı özel bir programlama diliyle inşa etti
- Ek performans için bir playback motorunda geliştirilmiş bir dildi
- Geliştirme sürecini tek gün bile durdurmadan Skew'i otomatik olarak TypeScript'e nasıl taşımaya karar verdiklerini anlattı
Skew dilinin başlangıcı ve sınırları
- Skew, Figma'nın kuruluş yıllarında yardımcı bir projeyle başladı
- O dönemde hem web hem mobilde çalışan bir prototip görüntüleyiciye hızla ihtiyaç vardı
- Daha gelişmiş optimizasyonlar ve daha hızlı derleme süreleri mümkün kılan, tamamen derlenebilir bir JavaScript programlama dili haline geldi
- Zaman geçtikçe biriken Skew kodu, sınırlılıklarını açığa çıkardı
- Yeni geliştiricilerin uyum sağlaması zordu
- Geri kalan kod tabanı ile kolay entegre edilemiyordu
- Figma dışı geliştirme ekosistemi yetersizdi
- Genişleme zorluğu, başlangıçtaki avantajını geride bıraktı
TypeScript'e geçişi mümkün kılan etkenler
- Mobil tarayıcılarda WebAssembly desteğinin yayılması
- Skew motorunun kritik bileşenleri, C++ motorundaki karşılıklarıyla değiştirildi
- TypeScript'e geçişte bile performans kaybı oldukça azaldı
- Takımın büyümesiyle geliştirici deneyimine odaklanacak kaynak ayırımı mümkün oldu
Kod tabanı dönüştürme süreci
- Hedef: Tüm Skew kodunu TypeScript'e dönüştürmek
- Manuel yeniden yazım yerine otomatik göçüm seçildi
- Geliştirme hızının düşmesini ve kullanıcı tarafında runtime hata ile performans düşüşünü engellemek
- 3 aşamalı rollout süreci
- Skew yazımı, Skew derleme
- Orijinal derleme süreci korunarak transpiler geliştirildi ve TS kodu GitHub'a işlendi
- Skew yazımı, TypeScript derleme
- TypeScript kod tabanından doğrudan production trafiği rollout'a çıkarıldı
- Geliştiriciler hâlâ Skew yazarak devam ederken, transpiler Skew'i TS'ye dönüştürüyordu
- TypeScript yazımı, TypeScript derleme
- Geliştirme için TS kod tabanını kaynağın tek gerçekliği yapma ihtiyacı doğdu
- Otomatik üretim hattı durdurulup Skew kodu kod tabanından çıkarıldı
- Skew yazımı, Skew derleme
Transpiler çalışmalarına dair notlar
- Derleyici iki parçadan oluşur: frontend ve backend
- Frontend: Giriş kodunu ayrıştırıp anlamlandırır; tip denetimi ve sözdizimi kontrolü yapar
- IR (Intermediate Representation / Orta Temsil) üretimi: Orijinal kodun semantiği ve mantığına tam anlamıyla uygun yakalama sağlar
- Backend: IR farklı dillere dönüştürür
- Transpiler, insanın okuyabileceği kod üreten özel bir derleyici türüdür
Geçiş sürecinde karşılaşılan sorunlar
- Dizi destructuring performans sorunları
- JavaScript dizi destructuring kullanılmadığında performans artışı %25'e kadar çıkabiliyor
- Skew'in "devirtualization" optimizasyonu
- Rollout sürecinde, devirtualization kod tabanı davranışını bozmaması için ek adımlar eklendi
- TypeScript'te başlatma sırası önemlidir
- Transpiler, bu sıralamaya saygı duyan kod üretmek zorundadır
Geliştirici deneyimi için Source Map kullanım örneği
- Geliştirici üretkenliğini artırmak, geçişi kolaylaştırmak ve hata ayıklama deneyimini sorunsuz yapmak için odak noktası
- Derlenmiş kod ve kaynak kodu eşleştirmek için source map kullanımı
- Tarayıcı yalnızca JavaScript'i anlayabilir
- Source map ile tarayıcı, derlenmiş JavaScript paketinde kaynağın hangi satırında duracağına karar verebilir
- 3 aşamalı source map oluşturma süreci
- TypeScript → JavaScript için source map oluşturma
- Her Skew kaynağı için Skew → TypeScript source map oluşturma
- Source map'leri bir araya getirerek Skew → JavaScript eşlemesi üretme
Koşullu derleme örneği
- Skew, üst düzey "if" ile koşullu derlemeye izin verir
- Derleme süresi sabitleriyle koşul belirlenir
- Aynı kod tabanı için farklı build hedeflerini tanımlama imkânı
- TypeScript'te koşullu derleme özelliği yok
- Paketleme adımında bunu yapacak şekilde değiştirildi
- esbuild'in "defines" ve dead code elimination özellikleri kullanıldı
- Yan etki olarak paket boyutu bir miktar arttı
TypeScript Çağı'nda Prototipleme Geliştirme
- Skew kodunun TypeScript'e geçişiyle Figma'nın ana kod tabanı güncellendi
- İç ve dış kod ile çok daha kolay bütünleşebilir bir yol açıldı
- Geliştiriciler daha verimli çalışmaya başladı
- O dönemde TypeScript uygun görünmüyordu ama bugün kesinlikle uygun
- TypeScript'e geçişin tüm avantajlarını almak için takip eden çalışmalar sürüyor
- Kalan kod tabanı ile entegrasyon
- Paket yönetiminin çok daha kolay hale gelmesi
- TypeScript ekosisteminin yeni özelliklerini doğrudan kullanma
GN⁺'nin Görüşü
-
Figma, özel bir programlama dili olan Skew'den TypeScript'e geçişi çok sistematik ve adım adım gerçekleştirdi. Geliştirme kesintisi olmadan otomatik göç uygulaması gerçekten etkileyici. Şirketin büyümesiyle oluşan teknik borcu çözme ve ekosistem değişikliklerine uyum sağlama açısından güçlü bir örnek.
-
Performans odaklı özel bir dilden genel amaçlı bir dile geçişte, WebAssembly gibi teknolojik çevrenin değişmesi kritik rol oynadı. Teknoloji seçiminin yalnızca anlık ihtiyaçla değil, tekniğin gelişim hızı ve yönüyle de uyumlu olması gerektiğini gösteriyor.
-
Geliştirici deneyimini merkeze alan source map kullanımı, koşullu derleme süreci gibi uygulama açısından doğrudan faydalı detaylar paylaşılıyor. Mevcut legacy ile uyumu koruyarak kademeli geçişin başarılı şekilde yapılması dikkat çekici.
-
Bu ölçekli bir kod tabanında böyle bir dönüşüm için otomatik kod dönüştürücü geliştirmek şart görünüyor. Skew derleyicisini temel alarak oluşturulan transpiler'ın kilit rolü açık. Bu süreç, derleyici teorisi ve iç uygulanışı uzmanlığı gerektiriyor.
-
Programlama dili göçü basit bir kod dönüşümünden çok daha fazlasını beraberinde getiriyor. Geliştirme kültürüne ve ekosisteme olumlu etkiler yaratabilir. Dikkatli bir planlama ile, organizasyon kapasitesi varsa yapılmaya değer bir hamledir.
1 yorum
Hacker News yorumu
Andrew Chan, bir proje katılımcısına göre Figma neredeyse 10 yıldır farklı yerlerde TypeScript kullanıyordu ve zamanın çoğunda Skew'den çok daha fazla TypeScript vardı. Skew ise mobil motor, prototipleme oynatıcı ve yansıtma özellikleri gibi bazı ürün alanlarında kullanılmıştı.
Figma'nın JavaScript için özel bir dil geliştirmiş olması şaşırtıcıydı; hatta bunun TypeScript'ten daha hızlı olması daha da şaşırtıcıydı. Sonrasında ise daha yavaş TypeScript'e geçiş yaptı.
Eski Figma CTO'su Evan Wallace'a göre, Skew, daha katı bir tip sistemi sayesinde mümkün olan daha iyi optimizasyonlarla TypeScript'ten 1,5~2 kat daha hızlıydı.
Dizi yapılandırma ataması sırasında JavaScript'in, diziden doğrudan indeks almak yerine bir iteratör oluşturarak diziyi yinelemesini gördüm ilginç. JS neden diziyi doğrudan indekslemiyor merak ediyorum.
Skew'in yalnızca callback'lerden oluşuyor gibi göründüğü anlaşılıyor. async/await gibi modern JavaScript özellikleri ve daha esnek bir tip sistemi de gündeme geliyor.
Figma, yetki gibi güvenlik sorunlarını çözmek için özel bir TypeScript DSL + derleyici yazdı.
Büyük şirketlerin her birinin kendine ait dahili araçları, dilleri ve Kubernetes'leri olmasına rağmen bunları paylaşmamaları üzücü. Skew açık kaynak olsaydı daha iyi bir TypeScript olabilir miydi.
Figma'nın WebAssembly'yi kullanma motivasyonunun ne olduğunu merak ediyorum.
Alınacak ders: Kendi dilinizi yazmayın.
TypeScript karşıtlarının argümanları ilginç. TypeScript, neredeyse her kod satırını iyileştiren ve neredeyse hiç dezavantajı olmayan bir araç. Onlar yeni bir şeyi öğrenmekten korkuyorlar, zamandan kaçınmak istiyorlar ya da faydasını yanlış anlıyorlar gibi görünüyor. TypeScript karşıtlarıyla aynı fikirdeyseniz nedenini daha derinlemesine düşünmelisiniz; aksi takdirde büyük kayıplara katlanmak zorunda kalırsınız.