20.000 Satırlık AngularJS Editörünü Yeniden Yazmanın Gerçek Zorluğu
Bir ekip, Fabric.js tabanlı harita editörünü yeniden yazarken en büyük sorunun eski kod değil, canvas CORS hatası ve yazdırma özelliği olduğunu keşfetti.
Bir workspace yönetim platformunun interaktif ofis harita editörü, AngularJS döneminden kalma tek bir dosyada 2.270 satıra, arkasındaki harita motoru ise 230'dan fazla dosyaya yayılan yaklaşık 20.000 satır TypeScript koduna dönüşmüştü. Sorun sadece kod miktarı değildi; sonsuz render döngüsü gibi mimari kusurlar yüzünden her yeni özellik giderek daha maliyetli hale geliyordu. Ekip, riskli bir 'büyük patlama' geçişi yerine mevcut görüntüleyicinin yanına yeni bir yönetim modülü inşa etmeyi seçti; Fabric.js korunurken sorumluluklar Viewport, Object Registry ve Changes Tracker gibi net bileşenlere ayrıldı, nesneleri taşımak yerine kamerayı hareket ettirme yaklaşımı benimsendi.
Beklenmedik biçimde en zor mühendislik problemi Angular'ın kendisi değil, basit bir yazdırma butonu oldu. window.print() düşük çözünürlük ve arayüz sızıntısı yarattı; canvas.toDataURL() ise S3'te barındırılan zemin planı görselinin CORS yapılandırması yüzünden 'tainted canvas' güvenlik hatasına takıldı. Çözüm, arka plan görselini ve Fabric nesnelerini ayrı katmanlar olarak dışa aktarıp yazdırma sırasında birleştirmek oldu. Ardından piksel tabanlı arka plan ile yüzde tabanlı nesne konumlandırması arasındaki tutarsızlık nedeniyle nesnelerin kaydığı fark edildi; çözüm, tüm konumlandırmayı yüzdeye çevirmek kadar basitti.
Göç sonunda kod satırı sayısı azalmadı, hatta taslak desteği, güvenli yayınlama ve çoklu çalışma alanı modu gibi yeni yetenekler eklendi. Asıl kazanım, yeni özellik eklemenin artık riskli hissettirmemesiyken; ekip için gerçek ders, en büyük karmaşıklığın framework'lerin kendisinde değil, tarayıcı render davranışı, CORS ve koordinat sistemleri gibi teknolojiler arasındaki boşluklarda yaşandığı oldu.