RequireJs Nedir? (RequireJs ile Modüler JavaScript Programlama)

Merhaba Arkadaşlar,

Günümüzde artık web projelerinde, tek sayfalık yapılarla karşılaşmaya başladık. Örneğin, e-postalarınızı kontrol etmek amacıyla girdiğiniz, Outlook, GMail benzeri sitelerde, sayfa yenilenmeden, tüm işlemlerinizi rahatlıkla yapabilmektesiniz. Yazılım dünyası jargonunda bu, Single Page Application diye isimlendirilmektedir.

Klasik çok sayfalı yapılar geliştiren arkadaşlar bilirler ki, her sayfaya 1-2 adet javascript dosyası eklenir (Jquery vs. hariç), işlemler bu dosyalar üzerinde işletilirdi. Ancak bütün bir siteyi tek sayfada çalışır hale getirmek gerçekten zor bir süreç. Bu noktada tüm script dosyalarını tek tek html sayfasına eklemek, kod karışıklığına ve zahmete sebebiyet verecektir. Bununla birlikte, script dosyaları arasındaki bağımlılıkları sağlamak ta hiç kolay olmayacaktır.

Bu ve benzeri problemleri gidermek adına, RequireJs adında bir JavaScript frameworku yazılmış, bu framework sayesinde script dosyaları arasındaki bağımlılıkları kontrol edebilmemiz sağlanmıştır.

RequireJs'nin faydalarını daha iyi anlayabilmek için RequireJs kullanmadan bir örnek yapalım;

Boş bir web projesi oluşturalım (Visual Studio, Dreamweaver, Netbeans vs. farketmez),
Projemizin ana dizinine,
- index.html dosyası,
- app klasörü ekleyelim.
Eklemiş olduğumuz app klasörünün içerisine ise,
- okul.js,
- ogrenci.js,
- servis.js JavaScript dosyalarımızı ekleyelim.
Projemizin dizin yapısı aşağıdaki gibi olacaktır.

Dizin yapısı

Not : Üstü çizili olan dosyalar, gerek duyulmayan Visual Studio'nun oluşturduğu dosyalardır.

servis.js dosyanın içeriğini aşağıdaki gibi yazalım;

function Servis() {
    this.Yazdir = function (okul) {
        document.write(okul);
    }
}

okul.js dosyasının içeriğini aşağıdaki gibi dolduralım;

function Okul() {
    this.Yazdir = function (ogrenci) {
        document.write(ogrenci);
    }
}

ogrenci.js dosyasının içeriğini aşağıdaki gibi dolduralım;

var okul = new Okul();
var servis = new Servis();
okul.Yazdir("11-a öğrencisi");
servis.Yazdir("vasfi rıza zobunun servisi");

Javascript dosyalarımızdan, servis ve okul dosyaları yalnızca metod çağırıldığında ekrana parametre olarak gelen değerleri basıyorlar. ogrenci dosyası ise yüklendiği an, okul ve servis sınıfından birer nesne üreterek, içerisinde tanımlı olan, metodları çağırıyor.
Son olarak index.html dosyamızın içeriğini aşağıdaki gibi dolduralım ve ana sayfayı çağıralım;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="app/ogrenci.js"></script>
    <script src="app/servis.js"></script>
    <script src="app/okul.js"></script>
</head>
<body>

</body>
</html>

Sayfaya metinler yazılmadı. Hemen Chrome Developer Tools'u açalım ve inceleyelim.

Hata bilgisi

Görüldüğü üzere Okul henüz oluşturulmadığından hata verdi. index.html sayfasında script dosyalarının sırasını şöyle değiştirip tekrar deneyelim;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="app/servis.js"></script>
    <script src="app/okul.js"></script>
    <script src="app/ogrenci.js"></script>
</head>
<body>

</body>
</html>

Sayfa görünümü

Bu sefer sayfamız geldi. Ancak, gerçek bir projede 3 dosyadan çok daha fazla dosyalar, metodlar ve bağımlılıklar olacaktır. Ayrıca, sayfaya eklediğimiz her script dosyası, sunucudan dosya talebine sebep olacaktır ki, bu performansı düşürecektir. Bu noktada, tüm işlemleri tek script dosyasında yapmak düşünülebilir. Ancak inanın bana iş tamamen içinden çıkılmaz bir hal alacaktır.

RequireJs tüm bu sorunları çözmek için hazırlanmış bir yapıdır ve işini gerçekten iyi yapıyor.

Şimdi aynı örneği, RequireJs yardımıyla hazırlayılım;

Projemizin ana dizinine, libs adında klasör ekleyelim.
http://www.requirejs.org/docs/download.html adresine girelim ve * required.js* dosyamızı indirelim. Burada minified ya da with comments olan versiyonlarını indirebilirsiniz. Test ortamında farketmez, ancak üretim ortamında minified versiyon kullanın.
İndirdiğimiz, require.js dosyamızı libs klasörünün içerisine atalım.
Ana dizine, main adında bir javascript dosyası ekleyelim ve içeriğini aşağıdaki gibi dolduralım;

requirejs.config({
    "baseUrl": "app",
});

requirejs(["ogrenci"]);

index.html dosyamızın içeriğini aşağıdaki gibi güncelleyelim;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="libs/require.js" data-main="main"></script>
</head>
<body>
</body>
</html>

app/okul.js dosyasının içeriğini aşağıdaki gibi değiştirelim;

requirejs.config({
"baseUrl": "app",
});

requirejs(["ogrenci"]);

app/servis.js dosyasının içeriğini aşağıdaki gibi değiştirelim;

define(function () {
    return {
        Yazdir: function (parameters) {
        document.write(parameters);
    }
}
});

app/ogrenci.js dosyasının içeriğini aşağıdaki gibi değiştirelim;

define(["okul", "servis"], function (ok, ser) {
    ok.Yazdir("11-a öğrencisi");
    ser.Yazdir("vasfi rıza zobunun servisi");
});

Proje dosyalarımızın görünümü aşağıdaki gibi olacaktır;

Proje yapısı

Projemizi çalıştırdığımızda, aşağıdaki görüntüyü alacağız.

Çıktı

Özetle tüm yapıyı birbirine entegre ettik ve bağımlılıkları birbirine bağladık.

index.html sayfasında tek bir script dosyası çağırdık. Diğer tüm dosyalar gerektiğinde asenkron olarak yüklenecektir.

Sistemin nasıl çalıştığı ve detayları bir sonraki dersimizde inceleyeceğiz.

Hepinize kolaylıklar diliyorum.