Javascript Modulleri: CJS, AMD, UMD & ESM

Uygulamaya modülerlik katmanın hata ayıklama, kodun okunabilirliği ve organizasyonu gibi birçok artıları vardır. Modülerlik ile kod kolaylıkla kontrol edilebilir küçük parçalara bölünür.

Modüllere genel açıdan bakılırsa, modüller mümkün olduğunca:

• Bağımsız olmalıdır: Diğer yapılara bağımlılığı olabildiğince az olmalıdır.
• Spesifik olmalıdır: Modül belirli bir görev veya görevleri yerine getirmelidir.
• Tekrar kullanılabilir olmalıdır: Modüller kolaylıkla uygulamalara entegre edilebilmelidir.

Javascript geliştikçe isim alanları ve bağımlılıkları yönetmek gittikçe zorlaşmıştır. Bunun neticesinde ise farklı modül sistemleri ortaya çıkmıştır. Bu modül sistemlerinin kendi aralarında önemli farkları vardır ve kullanım alanları değişmektedir. Bu modüllere geçmeden önce bazı terimlerden bahsetmekte fayda var.

Tree Shaking

Javascript dosyalarının boyutları büyüdükçe çalıştırılması zorlanır ve bu uygulamayı yavaşlatır. Tree shaking bu soruna çözüm bulmaya çalışarak büyük Javascript dosyalarında kullanılmayan yapıları ve kod parçalarını (ölü kod) uygulamadan siler. (Bkz. Dead Code Elimination) Tree shaking’te tree kavramı uygulama ve uygulamanın bağımlılıklarının ağaç yapısı oluşturmasından gelmektedir.

Tree shaking, işleminin uygulanması için kullanılan modül sistemi ve paketleyicinin(bundler) algoritmayı desteklemesi gerekir. Ayrıca uygulamada gereksiz modül ekleme (import) işlemlerinden kaçınılmalıdır. Örneğin:

import * as SomeLibrary from "some-library"; /* YANLIŞ */
import {libraryFn1, libraryFn2} from "some-library"; /* Sadece gerekli olanlar. */

Transpiling

Transpiling işlemi kaynak kod →kaynak kod dönüşümü yapmaktadır. Bu herhangi bir dilde yazılmış kaynak kodu alarak onu eski sistemlerde de çalışabilir hale getirmek adına dil yapısını düzenleyerek yeniden kaynak kod çıktısı vermesi anlamına gelmektedir. Örnek olarak Javascript’te transpiling işlemi yapan sıklıkla duyduğumuz kütüphane Babel’i verebiliriz. Babel yüksek sürüm ES standartıyla yazılmış javascript kodunu birçok tarayıcıda çalışacak şekilde derler. (Örneğin ES6 → ES2012)

Circular Dependency (Döngüsel Bağımlılık)

Döngüsel bağımlılık iki modülün birbirlerinin fonksiyonelliğine ihtiyaç duyması, bağlı olmasıdır. Döngüsel bağımlılıklar uygulamada istenmeyen sonuçlara sebep olur. Döngüsel bağımlılıklar domino etkisi oluşturabilmektedir. Modüldeki küçük bir değişiklik programın bütününü etkileyebilir.

Webpack

Webpack bir Javascript paketleyicisidir(bundler). Genelde tek sayfalı uygulamalarda(SPA) kullanılır. Kod bölme, asenkron yükleme tree shaking gibi yöntemleri destekler.

RollupJS

Rollup, Webpack gibi Javascript paketleyicisidir. Genelde kütüphanelerde kullanılır. ES6 vizyonuna göre formatlama işlemi yapar. Asenkron modül yüklemelerini desteklemez ancak tree shaking algoritmasını destekler. RollupJS’in Webpack ile performansı neredeyse aynıdır ancak konfigurasyonu daha hafiftir. RollupJS’nin kullanımı için: RollupJS ile Kütüphane Geliştirme.

Javascript Modül Sistemleri

Javascript’te birçok modül sistemi vardır. Bunlar kullanım alanları, kendi içinde özellikleri, asenkron / senkron yapılarıyla birbirinden ayrılmaktadır. En popüler olanları ise AMD,UMD,ES Harmony, CJS modül sistemleridir.

CommonJS(CJS)

• NodeJS tarafından standart olarak kullanılırlar.
• Modülleri senkron olarak eklemektedir.
• Tarayıcıda çalışmazlar çalışması için dönüştürülmeleri(transpiling & bundling) gerekir.
• Tree-shaking algoritmasını desteklemezler.
• Kötü döngüsel bağımlılık yönetimi vardır. (Circular Dependency Management)

AMD Modülleri (Asynchronous Module Definition)

• Asenkron modül tanımlama anlamına gelir.
• Modülleri asenkron olarak yükler.
• Frontend / Tarayıcıda kullanım için tasarlanmıştır.
• “require” ile import edilirler.
• Tree-shaking algoritmasını desteklemezler.

UMD Modülleri (Universal Module Definition)

• Evrensel modül tanımlama anlamına gelir.
• Tarayıcıda ve arka tarafta(backend) çalışır.
• Webpack ve Rollup gibi paketleyicilerde herhangi bir hatada geri dönüş modülü olarak kullanılır.
• AMD ve CJS’den farklı olarak birden fazla modül sistemlerini konfigure eden bir tasarımı vardır.
• Tree-shaking algoritmasını desteklemezler.

ES Modülleri (EcmaScript Harmony)

• Javascript için teklife sunulmuş standart modül sistemidir.
• Modern birçok tarayıcıda çalışır.
• Çalışma zamanında statik olarak eklenebilirler.
• CJS gibi basit söz dizimi yapısı vardır ve AMD’nin asenkronluğunu almıştır.(Tam asenkron değildir. Bkz: ES Harmony)
• Statik modül yapısından dolayı Tree-shaking algoritmasını destekler.

SONUÇ

• ESM basit söz dizimi ve asenkron yapısı ile önde gelen modül yapısıdır. Ancak eski tarayıcılarda çalışmayabilir.
• UMD her platformda çalışır ve ES modüllerinin çalışmadığı yerlerde tercih edilir.
• AMD’nin asenkron yapısı vardır ve tarayıcılar için iyidir.
• Kütüphane geliştirirken her modül türünde çıktılar vermeliyiz çünkü hangi tarayıcada veya paketleyicide çalışacağını bilemeyiz.
• Genelde paketleyiciler package.json dosyası içerisinde ES modül çıktısı için “module” kısmına UMD modül çıktısı için “main” kısmına bakarlar.
• Kütüphanenin ES modüllerini paylaşmak performans açısından iyidir.
• Kütüphaneler paylaşılmadan önce Tree-shaking algoritması göz önünde bulundurulmalıdır.