Makale Özeti

Web geliştirmede yaşanan klasik sorunlardan biri CSS veya JS güncelleme durumlarında browser cache ine takılmadır sanırım. Her ne kadar büyük çapta projeler olsa bile css & js güncelleme durumlarında çoğu zaman versiyonlama gözden kaçabilmektedir.

Makale

Web geliştirmede yaşanan klasik sorunlardan biri CSS veya JS güncelleme durumlarında browser cache ine takılmadır sanırım. Her ne kadar büyük çapta projeler olsa bile css & js güncelleme durumlarında çoğu zaman versiyonlama gözden kaçabilmektedir.

Örnek bir senaryo üzerinden gidelim. Xyz.com adlı bir portalin web geliştiricilerinden birisi de siz olduğunuzu düşünün. Zaman zaman tasarımı değiştirmek & güzelleştirmek adına sitenizde kullanılan css dosyalarının güncellenmesi gerektiğini kabul edelim. Yine böyle bir güncelleme zamanı, arayüz geliştirici arkadaşınız, sitenizde kullandığınız main.css dosyasını güncelliyor ve source kontrol mekanizmasına (TFS, SVN, Git vs.) gönderiyor. Siz de dosyanın en güncel halini alıp canlı serverlara atıyorsunuz. Ama bir bakıyorsunuz ki beklenen değişiklik siteye yansımamış. Ürün yöneticisi arkadaşlarınız size sitede hala güncelleme yapılmadığına dair şikayetlerle gelmeye başlıyorlar. Siz aslında sorunu ve çözümü biliyorsunuz. Gönderdiğiniz yeni css dosyasını versiyonlama yapmadan attığınız için browser kendi cacheinden eski css dosyasını okumaya devam ediyor, ve CTRL+F5 ile yeni css dosyasını alabileceğinizi de biliyorsunuz. Ancak tabi milyonlarca kullanıcıya ulaşan bir portalde, kullanıcılardan CTRL+F5 yapmasını beklemek çok da mantıklı olmaz.

Daha sonra bu tür şikayetleri engellemek adına sitede kullanılan css ve javascript dosyalarını versiyonlamaya karar veriyorsunuz. Yazılım geliştirme ekibiyle toplanıp bu konuda (versiyonlama konusuna) dikkat edilmesini ve her css & js güncellemesinden mutlaka versiyon güncellemesi yapılmasını da rica ediyorsunuz.İlk birkaç ay sorunsuz ilerlerken ekibinize yeni bir yazılımcı katılıyor ve bu yeni yazılımcı canlı serverlara güncelleme yapmak istiyor. Yeni yazılımcımız henüz çok genç, çok deneyimi de yok ama kendine güveniyor ve güncelleme dosyalarını bütün canlı serverlara gönderiyor. Yine şikayetler geliyor, css eski css mailleri yazılım ekibinin canını sıkıyor. Bunun üzerine yazılım ekibi toplanıp bu konuya kalıcı ve insan müdahalesini gerektirmeyen bir çözüm arıyor. İşte bu araştırma çabaları sonucu ASP.NET MVC 3 ile Extension metotlar kullanarak bu sorunu aşacaklarına hem fikir oluyorlar.

Yukarıda andığımız versiyonlamadan kısaca bahsedecek olursak, bir .aspx dosyaya veya MVC için bir .cshtml e css&js dosyalarını include ederken normalde(ben örneğimi MVC 3 Razor üzerinden göstereceğim )


olarak belirtiriz.

Genel olarak versiyonlamayı da şu şekilde yaparız

Yani css & js dosyalarımıza manuel olarak versiyon veririz. İlgili dosyanın her güncellenme durumunda da buradaki v=1.0.1 i olan versiyonu 1.0.2, 1.0.3... 2.0.0. gibi artırarak devam ederiz. Amacımız da bu versiyonlama işini otomatize edip artık versiyonlama derdinden kurtulmak.

Gelelim bu işi nasıl yapacağımıza ;

Visual Studio 2010 da bir ASP.NET MVC 3 projesi açıyorum Razor view ile. “Common” isminde bir klasör ekliyorum projeme ve bu klasöre de “HtmlExtensions” adında static bir class ekliyorum. Namespace olarak da System.Web.Mvc yazıyoruz. Class ımız da 2 adet static metod ekliyoruz.

Gördüğünüz gibi 2 adet Html Helper metod ekledik, Html Helper metotlar hakkında daha fazla bilgi almak için şu linklere gözatmanızı tavsiye ederim

Metodlarımızı inceleyecek olursak,

serverFilePath değişkenine dosyamızın full path ini alıyoruz, artık elimizde css & js dosyamızın tam adresi var, version değişkenine de bu dosyanın son güncellenme tarihini alıyoruz. Yani css & js dosyası en son ne zaman değiştiyse bunu kimseye birşey sormadan aldık. Son olarak da bize parametre olarak gelen dosyamızın versiyonlanmış halini geri döndürüyoruz. Buraya kadar bir sorun yok gibi ? Aslında var biraz. Saniyede 10.000 request aldığımızı düşünürsek, her gelen istekte gidip sitede kullanılan css & js dosyalarının son değiştirilme tarihini almaya kalkarsak, bir süre sonra serverlarımız bu yükü kaldıramayabilir. Çözüm ? Data cache ...

Şimdi HtmlExtensions sınıfımızı cachelenebilir hale getirmeye çalışalım. Kabaca bir dosyayı 5 dakika bile cache e alabilsek, bizi ciddi anlamda rahatlatır.

Data Cache olayını Microsoft Enterprise Library ile de halledebiliriz ya da kendi CacheManager sınıfımızı da hızlıca yazabiliriz. Enterprise Library Caching konusunda şuradan daha detaylı bilgi alabilirsiniz. http://msdn.microsoft.com/en-us/library/ee779142(v=PandP.50).aspx

Ben kendi basit ve CacheManager imizi kullanıyorum ve onun da kodları da şu şekilde.

CacheManager sınıfımızın kullandığı interface (arayüz)

Ve bu interface i implemente eden sınıfımız

CacheManager sınıfımız System.Runtime.Caching Namespace ine ihtiyaç duyacağından buraya da referans veriyoruz.

Extension metotlar kullandığımız sınıfımızın son hali ise şu şekilde oluyor :

Peki bu extension class ını projede nasıl kullanacağız ?

Şimdi de cs & js dosyalarımızı çağırdığımız view e gidiyoruz. Benim projemde Views/Shared/_Layout.cshtml de kullanıyorum.

Extension metodlarında ilk parametre, extensionu nereden kullanacağımı belirttiğinden @Html helperi vasıtasıyla metodlarımızı kullanabiliyoruz. İşlem tamam, artık browser css & js dosyalarımızı kendi cacheine alsa da dosyalar değiştiğinde otomatik olarak versiyonunu güncelleyecektir.

Siz de kendiniz deneyerek görebilirsiniz.