American Express bağlamında web bileşenleri

American Express'in rehber bölümü, kart ürünlerini ve finans konularını editoryal sayfalarda açıklar. Bu sayfalara, metinden fazlasını yapabilen araçlar yerleştirilecekti: karşılaştırmak, hesaplamak, ürünleri anlaşılır biçimde göstermek. Sayfaların kendisi, yapıları ve işletimi bizim sorumluluğumuzda değildi.

Bu projenin temel koşulu da buradan çıkar. Bir bileşen, kendisine ait olmayan bir belgede, genişliğini bilmediği cihazlarda çalışır. Bu nedenle her bileşen kendi işaretlemesini (markup), görünümünü ve verisini beraberinde getirir. Hedef sayfadan yine de beklediği şeyler (örneğin belirli bir kütüphane) sessizce varsayılmak yerine açıkça ön koşul olarak belirtilmiştir.

Batunet burada bir proje zincirine dahil olarak teknik uygulamadan ve bakımdan sorumluydu; Batunet, American Express'in sözleşme tarafı değildi. İçerikler, koşullar ve marka varlıkları bizden gelmedi.

Sabit sıralı bir karşılaştırma, sağlayıcının sorusunu yanıtlar. Burada ağırlıklandırma okuyucudadır: Birden fazla kriter için her birinin kendisi için ne kadar önemli olduğunu üç kademede ayarlar. Bundan her kart için ağırlık ve özellik değerinden oluşan bir puan çıkar. İki kriter, yalnızca büyüklük ölçekleriyle sonucu tek başlarına belirlemesinler diye sabit bir dengeleme katsayısı taşır.

Puanın kendisi kimseye bir şey söylemez. Bu nedenle en üst sıradaki karta göre bir yüzde değeri gösterilir. Hiçbir ağırlık verilmemişse rastgele bir sıra yerine sabit bir başlangıç sırası devreye girer. Bir filtre, uygun kartları uygun olmayanlardan ayırır ama uygun olmayanları gizlemez; bunlar sonuç listesinin altında ayrı olarak gösterilir.

Geniş ekranlarda kartlar yan yana durur ve bir detay görünümü açar. Dar ekranlarda liste bir karusele dönüşür ve başvuru bağlantısı o anda ortada duran kartı izler.

2025'te ikinci bir araç eklendi: serbestçe seçilen iki kartın ücretlerden seyahat ve sigorta avantajlarına kadar on bir kategoride doğrudan karşılaştırması.

Resmî enflasyon oranı ortalama bir haneyi tanımlar. Az araç kullanan ve çok ısınan biri farklı bir oran yaşar; rakam yanlış olduğu için değil, başkasının alışveriş sepetine göre ağırlıklandırıldığı için.

Bu nedenle enflasyon hesaplayıcı resmî endeks serilerini, genel endeksi ve on dokuz harcama kategorisini alır ve bunları kişinin kendi girdiği harcamalara göre ağırlıklandırır. Her ay için ağırlıklı ortalama olarak kişisel bir endeks değeri oluşur; yıllık oran, on iki ay önceki değerle karşılaştırmadan çıkar. Bir grafik kişisel ve resmî seyri yan yana, istenirse ayrıca tek bir kategoriyi gösterir.

Asıl emek formülün etrafındadır. Tutarlar, insanların para hakkında düşündüğü şekilde girilir: euro olarak, kuruş olmadan. Hesaplayıcı her kategori için, belirtilen toplam harcamaya göre standart bir ağırlıklandırmadan türetilen bir referans değer gösterir. Atanmamış harcamalar ayrı bir kalan kategorisine aktarılır ve sonuç her girişte yeniden hesaplanır. Kategoriler toplam harcamayı aşarsa hesaplayıcı, var olamayacak bir rakam yerine bir uyarı gösterir.

Diğer yapı taşları hesap yapmaz. Bir karşılaştırma tablosu birden fazla kartı satır satır karşılaştırır ve dar ekranlarda küçültülmüş bir sürüm yerine kendine özgü bir yapı alır. Mobil bir ürün gezinmesi ekranın kenarında açılır. Alt kenara sabitlenmiş bir çubuk, tıklamayla, arka plana dokunarak veya Escape tuşuyla yeniden kapanan ve dar ekranlarda karusel olarak çalışan detay görünümlü bir genel bakış açar.

Birinci kuşağın kampanya modülleri üç varyantta statik HTML ve CSS'ten oluşuyordu: liste, kompakt menü ve kart ızgarası. Teknik olarak bu yapı taşları sadedir. Maliyetleri başka bir yerde ortaya çıktı: Aynı ürün bilgileri, her biri kendi deposunda ve kendi geçmişiyle birden fazla modülde yer alıyordu.

Yanıt yeni bir bileşen değil, bir alt katmandı: Ürün bilgilerinin ve bileşen içeriklerinin kaynak kod yerine veri olarak tutulduğu, Symfony 7.1 tabanlı bir uygulama.

Model küçük tutuldu. Bir ürün kaydı her yerde gereken bilgileri taşır: ad, görsel, bağlantılar. Her bileşen için adlandırılmış alan değerleri vardır. Bir bileşen türünün hangi alanları bildiği, en son yaklaşık yirmi tür için bildirimsel bir yapılandırmada tanımlıdır. Böylece yeni bir tür bir yapılandırma meselesi olarak kalır, model değişikliğine dönüşmez.

Alan değerleri ürün bilgilerine referans verebilir; oluşturma sırasında bu referanslar ürün kaydındaki değerlerle değiştirilir. Bu nedenle değişen bir bilgi, her dosyada tek tek güncellenmek yerine onu kullanan her bileşende etkili olur.

Dağıtım sunucu tarafında oluşturularak yapılır: Bir bileşenin şablonu, verileriyle birlikte hedef sayfanın eklediği JavaScript'e dönüşür. Bundan önce, aynı bileşeni farklı ekran genişliklerinde gösteren bir önizleme yer alır. Bakım, girişli ve rol kısıtlamalı bir editör arayüzünde yapılır.

Geçiş aşamalar hâlinde gerçekleşti. İçerikler önce CSV dosyalarıyla içe aktarıldı, daha sonra editör arayüzlü bir veri modelinde yönetilmeye başlandı. Kredi kartı karşılaştırması da dahil olmak üzere mevcut yapı taşları uygulamaya taşındı; hesaplama mantıkları korundu, veriler o zamandan beri sunucudan geliyor.

Çalışma, başlangıcı ve kabulü olan bir proje olarak değil, sürekli bir geliştirme olarak ilerledi. Sürüm geçmişi 7 Aralık 2022'den 17 Mart 2026'ya kadar uzanıyor ve iki kuşak gösteriyor: önce bağımsız yerleştirme bileşenleri, ardından mevcut bileşenlerin taşındığı merkezi bir uygulama.

Geriye bakıldığında ilginç olan tek tek yapı taşları değil, geçiştir. Bir avuç modül için ayrı bir yönetim uygulaması abartılı olurdu: Bir şey kazandırmadan önce işletim, bakım ve öğrenme maliyeti getirir. Aynı ürün bilgilerini taşıyan ve sürekli değişen birden fazla bileşen olduğunda ise hesap tersine döner.

Taşıma, birkaç ay boyunca bileşen bileşen, adım adım yapıldı. Bu, yapı taşları zaten önceden ayrı olduğu için mümkündü. Örneğin karşılaştırmanın hesaplama mantığı taşıma sırasında değişmedi; değişen, verinin kaynağıydı.