Her ne kadar biran önce ana kategorilerdeki makaleleri belirli bir seviyeye getirerek biran önce projelerimize başlamak istesem de, bunun öncesinde projelerde kullanacağımız birkaç yardımcı kütüphaneyi de öğrenmemiz gerekiyor. Bu sebeple, bloğa birkaç mini kategori ekliyorum. Bunlardan biri de Require.JS.

Her zamanki gibi, "Buna neden ihtiyacımız var ki??" sorusuna cevap vererek seriye başlayacağım. Bu noktada, lisede integrali yeni öğrenirken, "Bunu nerede kullanacağız ki?" sorusuna karşılık, "Bununla köprü yapıyorlar" cevabını veren matematik hocamı saygıyla anıyorum.

Sitede yayınlanan makaleler boyunca, yazdığımız JS kodlarını sınıf bazında ayrı dosyalara, hatta klasörlere ayırmak gerektiğini, büyük boyutlu projelerle ancak bu şekilde başa çıkılabileceğini söyledim, durdum (ve de söyleyip duracağım). İnşallah sen de beni dinledin. Peki elimize ne geçti? Bir sürü dosya. Haydi bir örnek üzerinden gidelim.





Diyelim ki aşağıdaki gibi "Code4.js" adına bir dosyamız var.

"use strict";

var write3 = function () {

    document.write("Veli");

};



Ayrıca aşağıdaki gibi "Code3.js" adına bir dosyamız daha var.

"use strict";

var write2 = function () {

    document.write("Ali");

};



Bu iki dosyadaki fonksiyonları kullanan aşağıdaki gibi "Code2.js" adına bir dosyamız daha var.

"use strict";

var write1 = function () {

    write2();

    write3();

};



Bir de bunu kullanan ve programımızın giriş kapısı olan aşağıdaki gibi "Code1.js" adına bir dosyamız var.

"use strict";

write1();



Niyetimiz gayet basit. Ekrana "AliVeli" yazdırmak istiyoruz. Ancak bu dosyalardaki fonksiyonların birbirlerine bağımlılıkları var. HTML belgemizin Head kısmına yazdığımız "script" ifadeleri yukarıdan aşağıya doğru yüklendiğine göre, bunları 4-3-2-1 şeklinde yazmamız gerekir. Aşağıdaki gibi bir kullanım ise hataya sebep olacaktır.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="code2.js"></script>
<script src="code1.js"></script>
<script src="code3.js"></script>
<script src="code4.js"></script>
</head>
<body>
</body>
</html>



Kendin denemek istersen buraya tıklayabilirsin. Developer Tools (F12) ile hatanın kaynağına bakarsan, aşağıdaki gibi bir görüntü ile karşılaşırsın.


Neden böyle bir şey oldu? Çünkü HTML'deki "script" tagları yukarıdan aşağıya doğru yüklendi ve programa giriş kapısı olan "code1.js" yüklendiği zaman işletilmeye başlandı ancak bu sırada "code3.js" ve "code4.js" henüz yüklenmemişti ve "write2" fonksiyonu dosyası "code3.js" içerisinde bulunuyordu.

Demek ki, kod bloklarımızın birbirleri ile olan bağımlılıklarını düşünerek ona göre "script" taglarımızı yerleştirmemiz gerekiyor. Eh, bu örnek için o kadar da zor olmasa gerek. Topu topu dört dosya ve her birinde de birer tane fonksiyon var. Ama büyük bir program dedik, değil mi? 89734023783296 adet dosyamızın olduğunu ve her birinde de onlarca fonksiyonumuzun ve çapraz bağımlılıklarının olduğunu düşünürsek, burada karar vermemiz gereken çok kritik bir soru gündeme gelir. Takacağımız huninin rengi mavi mi olmalı, yeşil mi??

Olaya bir de, uygulamamızı kullanan istemciler gözüyle bakalım. Eğer ki tüm kod bloklarını aşağıdaki gibi "code.js" adında tek bir dosyada toplasaydık,

"use strict";

var write3 = function () {

    document.write("Veli");

};

var write2 = function () {

    document.write("Ali");

};


var write1 = function () {

    write2();

    write3();

};

write1();

ve HTML belgemizi de aşağıdaki gibi hazırlasaydık,

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="code.js"></script>
</head>
<body>
</body>
</html>

bu durumda açılan sayfa şu şekilde olacaktı. Ama önemli olan sayfada ne gözüktüğü değil. Developer Tools (F12) ile Network grafiğine bak. Aşağıdaki gibi bir şema ile karşılaşacaksın.


Oysa kod bloklarını ayrı ayrı dosyalara koyduğumuzda sayfamız şu hale geliyor. Yine Developer Tools (F12) ile Network grafiğine bak. Aşağıdaki gibi bir şema ile karşılaşacaksın.


Dikkat edersen, tarayıcı her bir dosya için sunucudan ayrı ayrı talepte bulunuyor. Bu örnekte dosya sayımız az olduğu için çoğu dosyayı paralel yükleyebildi ve yükleme süresi sadece iki katına çıktı. Oysa 89734023783296 adet dosyamız olsa, sunucu bunların tamamını paralel karşılayamayacağı için kuyruğa sokacaktı ve bekleme süresi çok çok daha uzun olacaktı. Bir de, bu kadar dosyadan herhangi birinin transferi sırasında problem yaşandığını düşün. Çok fazla resim içeren sayfalarda, bazı resimlerin yüklenmediğine denk gelmişsindir. Ama o sonuçta resim, en fazla birkaç resim eksik görürsün. Ama burada programın bir parçasından bahsediyoruz ve bu yüklenmeden program düzgün çalışamaz. Geriye kullanıcılar için tek bir seçenek kalır, Refresh (ve elbette bir dahaki sefere hepsi yüklenir inşallah diye dua etmek). İşte bu noktada da, karar vermemiz gereken çok kritik bir soru daha gündeme gelir. Kullanıcılarımızın takacağı huninin rengi mavi mi olmalı, yeşil mi?? Üstelik bu sefer onların cinsiyetlerini de bilmiyoruz.

İşte, bu mini makale serisinin konusu olan Require.JS, bu sorunların tamamına çözüm getiren yaygın kullanıma sahip bir kütüphanedir. Bu kütüphane hakkında özet olarak diyebiliriz ki;
  • Kod bloklarının birbirleri arasındaki bağımlılıklarını yönetir.
  • Modüler program yazma işini kolaylaştırır.
  • İhtiyaç anında, bağımlılıklara göre asenkron olarak gerekli dosyaları yükler.
  • Biz geliştirme ortamında binlerce farklı dosya üzerinde çalışırken, sistemi canlıya alma anında, tek bir komutla tüm dosyaları tek bir dev dosya haline getirir.
  • Canlı ortam için oluşturulan bu tek dosyadan, geliştirme sırasında yazdığımız tüm Comment'leri ve kodların güzel gözükmesi için bıraktığımız indentleri/boşlukları kaldırarak toplam dosya boyutunu küçültür.


Geri
Bu ilk makaledir
İleri
Kullanmaya Başlıyoruz

Yorum Gönder

 
Top