Frontend Monorepo: Lerna ve Nx Workspace Yönetimi

Frontend geliştirmenin sürekli gelişen dünyasında, büyük ve karmaşık projeleri yönetmek önemli bir zorluk olabilir. Geleneksel çoklu repo kurulumları, izolasyon sağlarken, kod tekrarına, bağımlılık yönetimi sorunlarına ve tutarsız araçlara yol açabilir. Monorepo mimarisi burada parlıyor. Monorepo, genellikle birbiriyle ilişkili, birlikte oluşturulan ve versiyonlanan birden fazla proje içeren tek bir depodur. Bu yaklaşım birçok avantaj sunar, ancak bir monorepo'yu etkili bir şekilde yönetmek özel araçlar gerektirir. Bu makale, iki popüler çözümü inceliyor: Lerna ve Nx.

Monorepo Nedir?

Monorepo, birçok proje için kod barındıran bir sürüm kontrol sistemi deposudur. Bu projeler birbiriyle ilişkili veya tamamen bağımsız olabilir. Önemli olan, aynı depoyu paylaşmalarıdır. Google, Facebook, Microsoft ve Uber gibi şirketler, devasa kod tabanlarını yönetmek için monorepoları başarıyla benimsemiştir. Google'ın Android, Chrome ve Gmail dahil neredeyse tüm kodunu tek bir depoda sakladığını düşünün.

Monorepo'nun Faydaları

• Kod Paylaşımı ve Yeniden Kullanım: Karmaşık paketleme ve yayınlama iş akışları olmadan projeler arasında kolayca kod paylaşın. Aynı depodaki birden fazla uygulamaya sorunsuz bir şekilde entegre edilebilen bir tasarım sistemi kitaplığı düşünün.
• Basitleştirilmiş Bağımlılık Yönetimi: Bağımlılıkları tek bir yerde yönetin, tüm projelerde tutarlılık sağlayın. Paylaşılan bir kitaplığın bağımlılığını güncellemek, ona bağlı tüm projeleri otomatik olarak günceller.
• Atomik Değişiklikler: Tutarlılık sağlamak ve test etmeyi kolaylaştırmak için birden fazla projeyi kapsayan değişiklikleri tek bir commit'te yapın. Örneğin, hem frontend'i hem de backend'i etkileyen bir yeniden düzenleme atomik olarak yapılabilir.
• Geliştirilmiş İşbirliği: Ekipler aynı depodaki farklı projeler üzerinde kolayca işbirliği yapabilir, bilgi paylaşımını ve çapraz fonksiyonel geliştirmeyi teşvik eder. Geliştiriciler, farklı ekiplerdeki kodu kolayca tarayabilir ve anlayabilir.
• Tutarlı Araçlar ve Uygulamalar: Tüm projelerde tutarlı kodlama standartları, linting kuralları ve derleme süreçleri uygulayın. Bu, kod kalitesini ve bakımı iyileştirir.
• Basitleştirilmiş Yeniden Düzenleme: Büyük ölçekli yeniden düzenleme projeleri, tüm ilgili kod aynı depoda olduğu için basitleştirilir. Otomatik yeniden düzenleme araçları tüm kod tabanında kullanılabilir.

Monorepo'nun Zorlukları

• Depo Boyutu: Monorepolar çok büyük hale gelebilir, potansiyel olarak klonlama ve indeksleme işlemlerini yavaşlatabilir. `git sparse-checkout` ve `partial clone` gibi araçlar bu sorunu hafifletmeye yardımcı olabilir.
• Derleme Süreleri: Özellikle büyük projeler için tüm monorepo'yu derlemek zaman alıcı olabilir. Lerna ve Nx gibi araçlar, bunu ele almak için optimize edilmiş derleme süreçleri sunar.
• Erişim Kontrolü: Monorepo'nun belirli bölümlerine erişimi kısıtlamak karmaşık olabilir. Erişim kontrol mekanizmalarının dikkatli bir şekilde planlanması ve uygulanması gerekir.
• Araç Karmaşıklığı: Bir monorepo'yu kurmak ve yönetmek özel araçlar ve bilgi gerektirir. Öğrenme eğrisi başlangıçta dik olabilir.

Lerna: Monorepo'da JavaScript Projelerini Yönetmek

Lerna, bir monorepo'da JavaScript projelerini yönetmek için popüler bir araçtır. Çoklu paket depolarını Git ve npm ile yönetme etrafındaki iş akışını optimize eder. Özellikle bağımlılık yönetimi için npm veya Yarn kullanan projeler için uygundur.

Lerna'nın Temel Özellikleri

• Sürüm Yönetimi: Lerna, son sürümden bu yana yapılan değişikliklere göre paketleri otomatik olarak versiyonlayabilir ve yayınlayabilir. Bir sonraki sürüm numarasını belirlemek için geleneksel commit'leri kullanır.
• Bağımlılık Yönetimi: Lerna, monorepo içindeki paketlerin birbirine bağımlı olmasını sağlayarak, paketler arası bağımlılıkları ele alır. Yerel bağımlılıklar oluşturmak için sembolik bağlantılar kullanır.
• Görev Yürütme: Lerna, derleme ve test süreçlerini hızlandırarak, birden fazla pakette paralel olarak komutlar yürütebilir. `package.json` içinde tanımlanan komut dosyalarını çalıştırmayı destekler.
• Değişiklik Tespiti: Lerna, son sürüme göre hangi paketlerin değiştiğini tespit edebilir ve hedeflenmiş derlemelere ve dağıtımlara olanak tanır.

Lerna Kullanım Örneği

Lerna'nın kullanımını basitleştirilmiş bir örnekle açıklayalım. `package-a` ve `package-b` olmak üzere iki paketi olan bir monorepo'muz olduğunu varsayalım. `package-b`, `package-a`'ya bağlıdır.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Lerna'yı Başlatın:

lerna init

Bu, `lerna.json` dosyasını oluşturur ve kök `package.json` dosyasını günceller. `lerna.json` dosyası, Lerna'nın davranışını yapılandırır.

2. Bağımlılıkları Yükleyin:

npm install
# veya
yarn install

Bu, her paketteki `package.json` dosyalarına göre monorepo'daki tüm paketler için bağımlılıkları yükler.

3. Paketler Arasında Bir Komut Çalıştırın:

lerna run test

Bu, `test` komut dosyasını tanımlayan tüm paketlerin `package.json` dosyalarında yürütür.

4. Paketleri Yayınlayın:

lerna publish

Bu komut, commit geçmişini analiz eder, hangi paketlerin değiştiğini belirler, geleneksel commit'lere göre sürümlerini artırır ve bunları npm'ye (veya seçtiğiniz kayıt defterine) yayınlar.

Lerna Yapılandırması

`lerna.json` dosyası, Lerna'nın yapılandırmasının kalbidir. Lerna'nın davranışını özelleştirmenize olanak tanır, örneğin:

• `packages`: Monorepo içindeki paketlerin konumunu belirtir. Genellikle `["packages/*"]` olarak ayarlanır.
• `version`: Sürümleme stratejisini belirtir. `independent` (her paketin kendi sürümü vardır) veya sabit bir sürüm olabilir.
• `command`: `publish` ve `run` gibi belirli Lerna komutları için seçenekleri yapılandırmanıza olanak tanır.

Örnek `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Akıllı, Hızlı ve Genişletilebilir Yapı Sistemi

Nx, monorepo yönetiminde gelişmiş özellikler sağlayan güçlü bir yapı sistemidir. Derleme sürelerini ve geliştirici verimliliğini önemli ölçüde iyileştirmek için artımlı derlemelere, hesaplama önbelleğe alma ve görev düzenlemesine odaklanır. Lerna öncelikle paketleri yönetmeye odaklanırken, Nx, kod oluşturma, linting, test etme ve dağıtım dahil olmak üzere tüm monorepo iş akışını yönetmeye daha kapsamlı bir yaklaşım sunar.

Nx'in Temel Özellikleri

• Artımlı Derlemeler: Nx, projelerinizin bağımlılık grafiğini analiz eder ve son derlemeden bu yana değişen yalnızca projeleri yeniden derler. Bu, derleme sürelerini önemli ölçüde azaltır.
• Hesaplama Önbelleğe Alma: Nx, derlemeler ve testler gibi görevlerin sonuçlarını önbelleğe alır, böylece girdiler değişmediyse yeniden kullanılabilirler. Bu, geliştirme döngülerini daha da hızlandırır.
• Görev Düzenlemesi: Nx, karmaşık derleme boru hatları tanımlamanıza ve bunları verimli bir şekilde yürütmenize olanak tanıyan güçlü bir görev düzenleme sistemi sağlar.
• Kod Oluşturma: Nx, en iyi uygulamaları ve tutarlı standartları izleyerek, yeni projeler, bileşenler ve modüller oluşturmanıza yardımcı olabilecek kod oluşturma araçları sağlar.
• Eklenti Ekosistemi: Nx, React, Angular, Node.js, NestJS ve daha fazlası gibi çeşitli teknolojileri ve çerçeveleri destekleyen zengin bir eklenti ekosistemine sahiptir.
• Bağımlılık Grafiği Görselleştirme: Nx, monoreponuzun bağımlılık grafiğini görselleştirebilir, projeler arasındaki ilişkileri anlamanıza ve potansiyel sorunları belirlemenize yardımcı olur.
• Etkilenen Komutlar: Nx, belirli bir değişiklikten etkilenen yalnızca projelerde görevleri çalıştırmak için komutlar sağlar. Bu, çabalarınızı dikkat gerektiren alanlara odaklamanıza olanak tanır.

Nx Kullanım Örneği

Nx'in kullanımını basitleştirilmiş bir örnekle açıklayalım. Bir React uygulaması ve bir Node.js kitaplığı ile bir monorepo oluşturacağız.

1. Nx CLI'yı Genel Olarak Yükleyin:

npm install -g create-nx-workspace

2. Yeni Bir Nx Workspace Oluşturun:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Bu, bir React uygulamasıyla yeni bir Nx workspace oluşturur. `--preset=react` seçeneği, Nx'e workspace'i React'e özgü yapılandırmalarla başlatmasını söyler.

3. Bir Kitaplık Oluşturun:

nx generate @nrwl/node:library my-library

Bu, `my-library` adlı yeni bir Node.js kitaplığı oluşturur. Nx, kitaplığı ve bağımlılıklarını otomatik olarak yapılandırır.

4. Uygulamayı Derleyin:

nx build my-app

Bu, React uygulamasını derler. Nx, bağımlılık grafiğini analiz eder ve yalnızca gerekli dosyaları yeniden derler.

5. Testleri Çalıştırın:

nx test my-app

Bu, React uygulaması için birim testlerini çalıştırır. Nx, sonraki test çalıştırmalarını hızlandırmak için test sonuçlarını önbelleğe alır.

6. Bağımlılık Grafiğini Görüntüleyin:

nx graph

Bu, monoreponun bağımlılık grafiğini görselleştiren bir web arayüzü açar.

Nx Yapılandırması

Nx, workspace'in kök dizininde bulunan `nx.json` dosyası aracılığıyla yapılandırılır. Bu dosya, workspace'teki projeleri, bunların bağımlılıklarını ve bunlar üzerinde çalıştırılabilecek görevleri tanımlar.

`nx.json` dosyasındaki temel yapılandırma seçenekleri şunlardır:

• `projects`: Workspace'teki projeleri ve bunların kök dizinleri ve derleme hedefleri gibi yapılandırmalarını tanımlar.
• `tasksRunnerOptions`: Görevleri yürütmek ve sonuçlarını önbelleğe almakla sorumlu olan görev çalıştırıcısını yapılandırır.
• `affected`: Nx'in bir değişiklikten hangi projelerin etkilendiğini nasıl belirlediğini yapılandırır.

Örnek `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx: Hangisini Seçmeli?

Hem Lerna hem de Nx, frontend monorepos'u yönetmek için mükemmel araçlardır, ancak biraz farklı ihtiyaçlara hitap ederler. Projeniz için doğru olanı seçmenize yardımcı olacak bir karşılaştırma şudur:

Özellik	Lerna	Nx
Odak	Paket Yönetimi	Yapı Sistemi ve Görev Düzenlemesi
Artımlı Derlemeler	Sınırlı (harici araçlar gerektirir)	Yerleşik ve yüksek oranda optimize edilmiş
Hesaplama Önbelleğe Alma	Hayır	Evet
Kod Oluşturma	Hayır	Evet
Eklenti Ekosistemi	Sınırlı	Kapsamlı
Öğrenme Eğrisi	Daha Düşük	Daha Yüksek
Karmaşıklık	Daha Basit	Daha Karmaşık
Kullanım Durumları	Öncelikle npm paketlerini yönetmeye ve yayınlamaya odaklanan projeler.	Optimize edilmiş derleme süreleri, kod oluşturma ve kapsamlı bir yapı sistemi gerektiren büyük ve karmaşık projeler.

Şunu seçin Lerna eğer:

• Öncelikle npm paketlerini yönetmeniz ve yayınlamanız gerekiyorsa.
• Projeniz nispeten küçük ila orta boyuttaysa.
• Daha düşük bir öğrenme eğrisine sahip daha basit bir araç tercih ediyorsanız.
• Zaten npm ve Yarn'a aşinaysanız.

Şunu seçin Nx eğer:

• Optimize edilmiş derleme sürelerine ve artımlı derlemelere ihtiyacınız varsa.
• Kod oluşturma yetenekleri istiyorsanız.
• Görev düzenlemesiyle kapsamlı bir yapı sistemi gerektiriyorsanız.
• Projeniz büyük ve karmaşıksa.
• Daha güçlü bir aracı öğrenmeye zaman ayırmaya istekliyseniz.

Lerna'yı Nx ile birlikte kullanabilir misiniz?

Evet, Lerna ve Nx birlikte kullanılabilir. Bu kombinasyon, Nx'in optimize edilmiş yapı sisteminden ve görev düzenlemesinden yararlanırken Lerna'nın paket yönetimi yeteneklerinden yararlanmanıza olanak tanır. Nx, artımlı derlemeler ve Lerna tarafından yönetilen paketler için hesaplama önbelleğe alma sağlayarak Lerna için bir görev çalıştırıcı olarak yapılandırılabilir.

Frontend Monorepo Yönetimi İçin En İyi Uygulamalar

Lerna veya Nx'i seçmenize bakılmaksızın, frontend monorepo'yu başarıyla yönetmek için en iyi uygulamaları izlemek çok önemlidir:

• Net Proje Yapısı Oluşturun: Projelerinizi mantıksal ve tutarlı bir şekilde düzenleyin. Paketler ve kitaplıklar için net bir adlandırma kuralı kullanın.
• Tutarlı Kodlama Standartları Uygulayın: Tüm projelerde tutarlı kod stili sağlamak için linters ve formatlayıcılar kullanın. ESLint ve Prettier gibi araçlar iş akışınıza entegre edilebilir.
• Derleme ve Test Süreçlerini Otomatikleştiriin: Derleme, test ve dağıtım süreçlerini otomatikleştirmek için CI/CD boru hatları kullanın. Jenkins, CircleCI ve GitHub Actions gibi araçlar kullanılabilir.
• Kod İncelemeleri Uygulayın: Kod kalitesini ve bakımı sağlamak için kapsamlı kod incelemeleri yapın. Çekme istekleri ve kod inceleme araçları kullanın.
• Derleme Sürelerini ve Performansı İzleyin: Darboğazları ve iyileştirme alanlarını belirlemek için derleme sürelerini ve performans ölçümlerini izleyin. Nx, derleme performansını analiz etmek için araçlar sağlar.
• Monorepo Yapınızı ve Süreçlerinizi Belgeleyin: Monoreponuzun yapısını, kullanılan araçları ve teknolojileri ve geliştirme iş akışlarını açıklayan net bir dokümantasyon oluşturun.
• Geleneksel Commit'leri Benimseyin: Sürüm oluşturma ve yayın süreçlerini otomatikleştirmek için geleneksel commit'ler kullanın. Lerna, geleneksel commit'leri kutudan çıkarır.

Sonuç

Frontend monorepoları, kod paylaşımı, basitleştirilmiş bağımlılık yönetimi ve geliştirilmiş işbirliği dahil olmak üzere, büyük ve karmaşık projeleri yönetmek için önemli avantajlar sunar. Lerna ve Nx, bir frontend monorepo'yu etkili bir şekilde yönetmenize yardımcı olabilecek güçlü araçlardır. Lerna, npm paketlerini yönetmek için harika bir seçimdir, Nx ise artımlı derlemeler ve kod oluşturma gibi gelişmiş özelliklere sahip daha kapsamlı bir yapı sistemi sağlar. Projenizin ihtiyaçlarını dikkatlice değerlendirerek ve en iyi uygulamaları izleyerek, bir frontend monorepo'yu başarıyla benimseyebilir ve faydalarını elde edebilirsiniz.

Lerna ve Nx arasında seçim yaparken, ekibinizin deneyimi, projenin karmaşıklığı ve performans gereksinimleri gibi faktörleri göz önünde bulundurmayı unutmayın. Her iki aracı da deneyin ve özel ihtiyaçlarınıza en uygun olanı bulun.

Monorepo yolculuğunuzda iyi şanslar!