Geliştirici Günlüğü -

Genelde frontend’ciler ve backend’ciler arasında bir kavga vardır. Frontend’ciler “backendciler veri göndermiyor ki nasıl çalışalım?” derken, backend’ciler de “Frontend istek yapmadan biz nasıl veri gönderelim ki” diye savunur (backendciler işte :p).
Ama günün sonunda yapılacak iş (teoride) bellidir, “ben xxx.php’ye abc isteği yaparsam bana ccc dönmeli” gibi bir kontrat vardır. Teoride hem backend tarafı, hem de frontend tarafı bu kontrat çerçevesinde işlerini gerçekleyebilmelidir. Ama backend hazır olmadan, frontend nasıl çalışacak? veya tam tersi?
Eğer siz de Fatih hoca gibi “backend görmek istemiyorum, frontend görmek istiyorum” diyorsanız bu yazı, “backend hazır olmadan frontend nasıl çalışacak” kısmına, jQuery spesific bir methodla çözüm sunacak.

jQuery, XHR isteklerini tarayıcı bağımsız abstract etmesinin yanında, bu istekleri “mock”lamamıza da imkan veriyor.

Backend ile şöyle bir kontratımızın olduğunu düşün

• getUserName.php adresine “id” ile yapılan GET isteklerinde, kullanıcının adı ve web sayfası JSON olarak geri döner
• Eğer veri bulunamazsa da JSON olarak bir “error” döner

Bu işi gerçekleyen frontend kodu şu şekilde olacak

$(".sendXhr").click(function (e) {
    e.preventDefault();
    var id = $(this).data("id");

    $.get("getUserName.php", {id : id}, function (response) {
        if (response.user && response.webSite) {
            alert("User : " + response.user + ",  WebSite : " + response.webSite);
        }
        else {
            alert('Error!!! ' + response.error);
        }
    },'json');
});

Bu kod; bir öğenin tıklanmasında, id verisi ile getUserName.php’ye bir istek yapiyor ve istek başarılı dönerse ekrana bilgileri yaziyor, başarısız dönerse de hatayı ekrana basiyor.
Peki ama getUserName.php için henüz ortada bir kod yoksa, bu akışı Backend kodundan bağımsız olarak nasıl test edeceğiz? İşte burada, bu istekleri mocklayarak devam edebiliriz.

Bunun için geliştirdiğim JavaScript sınıfına github üzerindeki “ggmock” depomuzdan ulaşabilirsiniz.

Basitçe bu sınıfı, projenize aşağıdaki gibi dahil ettikten sonra, yapılan istek türüne uygun mock methodlarını yazabilirsiniz.

<script type="text/javascript" src="GGMock.js"></script>

<script type="text/javascript">
    /**
    * Burasi mock icin kullandigimiz sinif
    * bu kod blogunu kaldirdigimizda her sey normalmis gibi devam edecektir
    */

    //jquery mock sinifindan bir object construct ediyoruz, bundan sonra her sey bu obje ile yapilacak
    var ggMock = new GGMock();

    //cevabin donme suresini de degistirebilirsiniz
    //ggMock.setDelay(5000);

    ggMock.start();

    //kodun herhangi bir yerinde mocklamayi iptal edip, gercek istekler yapmasini saglayabilirsiniz
    //ggMock.stop();

    //veri tipi JSON olan istekleri mockladigimiz yer
    //onText ve onXML methodlarini da override edebilirsiniz
    ggMock.onJSON = function (requestOptions) {
        var url = requestOptions.url;
        var params = requestOptions.data;

        if (url == "getUserName.php?id=12") {
            return {user : "Osman Yuksel", webSite : "gelistiricigunlugu.com"};
        }
        else {
            return {error : "unknown request"};
        }
    };
</script>

Burada, JSON istekleri için yapılan response’ları mocklamış olduk ve “12″ id’li kullanıcı için dönmesi gereken verileri “mock”ladık. Artık backend hazır olmasa bile biz frontend kodumuzu “çalışır” vaziyette teslim edebilir, böylelikle backend bağımsız kod geliştirip süreci hızlandırabiliriz.

Örnek kod ve mock sınıfına https://github.com/ggunlugu/ggmock/ adresinden ulaşabilirsiniz.