Frontend Nx Çalışma Alanı: Ölçeklenebilir Uygulamalar için Monorepo Geliştirme

Günümüzün hızlı tempolu yazılım geliştirme ortamında, büyük ölçekli frontend uygulamaları oluşturmak ve sürdürmek zorlu olabilir. Bağımlılıkları yönetmek, kod tutarlılığını sağlamak ve derleme sürelerini optimize etmek, projeler büyüdükçe giderek karmaşık hale gelir. Monorepolar, birden fazla projeyi ve kütüphaneyi tek bir depoda birleştirerek güçlü bir çözüm sunar. Akıllı, genişletilebilir bir derleme sistemi olan Nx, gelişmiş araçlar ve özelliklerle monorepo geliştirmeyi geliştirir.

Bu kapsamlı kılavuz, temel kavramları, pratik örnekleri ve en iyi uygulamaları kapsayarak, frontend monorepo geliştirme için bir Nx çalışma alanı kullanmanın faydalarını araştırır.

Monorepo Nedir?

Monorepo, tüm projelerin ve bağımlılıklarının tek bir depoda depolandığı bir yazılım geliştirme stratejisidir. Bu yaklaşım, her projenin kendi deposuna sahip olduğu geleneksel çoklu depo yaklaşımıyla çelişir.

Bir Monoreponun Temel Özellikleri:

• Tek Doğruluk Kaynağı: Tüm kod tek bir yerde bulunur.
• Kod Paylaşımı ve Yeniden Kullanım: Projeler arasında kod paylaşımı ve yeniden kullanımı daha kolaydır.
• Basitleştirilmiş Bağımlılık Yönetimi: Projeler arasında bağımlılıkları yönetmek daha kolay hale gelir.
• Atomik Değişiklikler: Değişiklikler, tutarlılığı sağlayarak birden fazla projeyi kapsayabilir.
• Geliştirilmiş İşbirliği: Ekiplerin ilgili projelerde işbirliği yapması daha kolaydır.

Frontend Geliştirme için Neden Monorepo Kullanılmalı?

Monorepolar, özellikle büyük ve karmaşık projeler için frontend geliştirmeye önemli avantajlar sunar.

• Gelişmiş Kod Paylaşımı: Frontend projeleri genellikle ortak UI bileşenlerini, yardımcı işlevleri ve tasarım sistemlerini paylaşır. Bir monorepo, kod paylaşımını kolaylaştırır, kopyalamayı azaltır ve tutarlılığı teşvik eder. Örneğin, bir tasarım sistemi kütüphanesi, aynı çalışma alanı içindeki birden fazla React uygulaması arasında kolayca paylaşılabilir.
• Kolaylaştırılmış Bağımlılık Yönetimi: Birden fazla frontend projesi arasında bağımlılıkları yönetmek, özellikle sürekli gelişen JavaScript ekosistemi ile zorlu olabilir. Bir monorepo, bağımlılıkları merkezileştirerek ve sürümleri ve yükseltmeleri yönetmek için araçlar sağlayarak bağımlılık yönetimini basitleştirir.
• Geliştirilmiş Derleme Performansı: Nx, daha hızlı ve daha verimli derlemeler sağlayan gelişmiş derleme önbelleğe alma ve bağımlılık analizi sağlar. Bağımlılık grafiğini analiz ederek Nx, yalnızca bir değişiklikten etkilenen projeleri yeniden oluşturabilir, bu da derleme sürelerini önemli ölçüde azaltır. Bu, çok sayıda bileşen ve modül içeren büyük frontend uygulamaları için çok önemlidir.
• Basitleştirilmiş Yeniden Düzenleme: Bir monorepoda birden fazla proje arasında kodu yeniden düzenlemek daha kolaydır. Değişiklikler atomik olarak yapılabilir, bu da tutarlılığı sağlar ve hata yapma riskini azaltır. Örneğin, birden fazla uygulamada kullanılan bir bileşeni yeniden adlandırmak tek bir commit'te yapılabilir.
• Daha İyi İşbirliği: Bir monorepo, paylaşılan bir kod tabanı ve ortak bir geliştirme ortamı sağlayarak frontend geliştiricileri arasında daha iyi işbirliğini teşvik eder. Ekipler farklı projelere kolayca katkıda bulunabilir ve bilgi ve en iyi uygulamaları paylaşabilir.

Nx'i Tanıtıyoruz: Akıllı, Genişletilebilir Derleme Sistemi

Nx, gelişmiş araçlar ve özelliklerle monorepo geliştirmeyi geliştiren güçlü bir derleme sistemidir. Standartlaştırılmış bir geliştirme deneyimi sağlar, derleme performansını iyileştirir ve bağımlılık yönetimini basitleştirir.

Nx'in Temel Özellikleri:

• Akıllı Derleme Sistemi: Nx, projelerinizin bağımlılık grafiğini analiz eder ve yalnızca etkilenen projeleri yeniden oluşturarak derleme sürelerini önemli ölçüde azaltır.
• Kod Üretimi: Nx, yeni projeler, bileşenler ve modüller oluşturmak için kod oluşturma araçları sağlayarak geliştirmeyi hızlandırır ve tutarlılığı sağlar.
• Entegre Araçlar: Nx, sorunsuz bir geliştirme deneyimi sağlayarak React, Angular ve Vue.js gibi popüler frontend çerçeveleriyle entegre olur.
• Eklenti Ekosistemi: Nx, ek araçlar ve entegrasyonlarla işlevselliğini genişleten zengin bir eklenti ekosistemine sahiptir.
• Artımlı Derlemeler: Nx'in artımlı derleme sistemi yalnızca değişenleri yeniden oluşturur, bu da geliştirme geri bildirim döngüsünü önemli ölçüde hızlandırır.
• Hesaplama Önbelleğe Alma: Nx, derlemeler ve testler gibi pahalı hesaplamaların sonuçlarını önbelleğe alarak performansı daha da artırır.
• Dağıtılmış Görev Yürütme: Çok büyük monorepolar için Nx, derlemeleri ve testleri paralelleştirmek için görevleri birden fazla makineye dağıtabilir.

Frontend Geliştirme için Bir Nx Çalışma Alanı Kurma

Bir Nx çalışma alanı kurmak basittir. Yeni bir çalışma alanı oluşturmak ve proje ve kütüphaneler eklemek için Nx CLI'yi kullanabilirsiniz.

Ön koşullar:

• Node.js (sürüm 16 veya üstü)
• npm veya yarn

Adımlar:

1. Nx CLI'yi yükleyin:

               npm install -g create-nx-workspace
               
   
                 
                   Copy
                 
               
             

2. Yeni bir Nx çalışma alanı oluşturun:

               npx create-nx-workspace my-frontend-workspace
               
   
                 
                   Copy
                 
               
             

   Bir ön ayar seçmeniz istenecektir. Tercih ettiğiniz frontend çerçevesiyle eşleşen bir ön ayar seçin (örneğin, React, Angular, Vue.js).

3. Yeni bir uygulama ekleyin:

               nx generate @nx/react:application my-app
               
   
                 
                   Copy
                 
               
             

   Bu komut, çalışma alanı içinde "my-app" adlı yeni bir React uygulaması oluşturur.

4. Yeni bir kütüphane ekleyin:

               nx generate @nx/react:library my-library
               
   
                 
                   Copy
                 
               
             

   Bu komut, çalışma alanı içinde "my-library" adlı yeni bir React kütüphanesi oluşturur. Kütüphaneler, uygulamalar arasında kod paylaşmak için kullanılır.

Nx Çalışma Alanınızı Düzenleme

İyi düzenlenmiş bir Nx çalışma alanı, sürdürülebilirlik ve ölçeklenebilirlik için çok önemlidir. Çalışma alanınızı yapılandırırken aşağıdaki yönergeleri göz önünde bulundurun:

• Uygulamalar: Uygulamalar, frontend projelerinizin giriş noktalarıdır. Kullanıcıya dönük arayüzleri temsil ederler. Örnekler arasında bir web uygulaması, bir mobil uygulama veya bir masaüstü uygulaması bulunur.
• Kütüphaneler: Kütüphaneler, birden fazla uygulama arasında paylaşılabilecek yeniden kullanılabilir kod içerir. İşlevselliklerine göre farklı türlere ayrılırlar.
• Özellik Kütüphaneleri: Özellik kütüphaneleri, belirli bir özellik için iş mantığını ve UI bileşenlerini içerir. Çekirdek ve UI kütüphanelerine bağlıdırlar.
• UI Kütüphaneleri: UI kütüphaneleri, birden fazla özellik ve uygulama arasında kullanılabilecek yeniden kullanılabilir UI bileşenlerini içerir.
• Çekirdek Kütüphaneler: Çekirdek kütüphaneler, çalışma alanı boyunca kullanılan yardımcı işlevleri, veri modellerini ve diğer ortak kodları içerir.
• Paylaşılan Kütüphaneler: Paylaşılan kütüphaneler, frontend çerçevesinden (React, Angular, Vue.js) bağımsız olarak birden fazla uygulama ve kütüphane tarafından kullanılabilen çerçeveden bağımsız kod içerir. Bu, kodun yeniden kullanımını teşvik eder ve kopyalamayı azaltır.

Örnek Dizin Yapısı:

my-frontend-workspace/
├── apps/
│   ├── my-app/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.tsx
│   │   │   │   └── app.module.css
│   │   │   └── main.tsx
│   │   └── project.json
│   └── my-other-app/
│       └── ...
├── libs/
│   ├── feature-my-feature/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── feature-my-feature.tsx
│   │   └── project.json
│   ├── ui/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── button/
│   │   │           └── button.tsx
│   │   └── project.json
│   ├── core/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── api.ts
│   │   └── project.json
│   └── shared/
│       ├── src/
│       │   └── lib/
│   │       └── date-formatter.ts
│   └── project.json
├── tools/
│   └── generators/
├── nx.json
├── package.json
└── tsconfig.base.json

Nx Kütüphaneleri ile Kod Paylaşımı ve Yeniden Kullanım

Nx kütüphaneleri, bir monorepoda kod paylaşımı ve yeniden kullanımın anahtarıdır. Kodunuzu iyi tanımlanmış kütüphaneler halinde düzenleyerek, bileşenleri, hizmetleri ve yardımcı programları birden fazla uygulama arasında kolayca paylaşabilirsiniz.

Örnek: Bir UI Bileşenini Paylaşma

Birden fazla React uygulaması arasında paylaşmak istediğiniz bir düğme bileşeniniz olduğunu varsayalım. "ui" adlı bir UI kütüphanesi oluşturabilir ve düğme bileşenini bu kütüphaneye yerleştirebilirsiniz.

1. Bir UI kütüphanesi oluşturun:

               nx generate @nx/react:library ui
               
   
                 
                   Copy
                 
               
             

2. Bir düğme bileşeni oluşturun:

               nx generate @nx/react:component button --project=ui
               
   
                 
                   Copy
                 
               
             

3. Düğme bileşenini uygulayın:

               // libs/ui/src/lib/button/button.tsx
   import styles from './button.module.css';
   
   interface ButtonProps {
    text: string;
    onClick: () => void;
   }
   
   export function Button({ text, onClick }: ButtonProps) {
    return (
    
    {text}
    
    );
   }
   
   export default Button;
               
   
                 
                   Copy
                 
               
             

4. Düğme bileşenini kütüphaneden dışa aktarın:

               // libs/ui/src/index.ts
   export * from './lib/button/button';
               
   
                 
                   Copy
                 
               
             

5. Düğme bileşenini bir uygulamada kullanın:

               // apps/my-app/src/app/app.tsx
   import { Button } from '@my-frontend-workspace/ui';
   
   function App() {
    return (
    
   
    
   Welcome to My App
     alert('Clicked!')} />
    
    );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

Kütüphaneleri kullanarak, UI bileşenlerinizin tüm uygulamalarda tutarlı olmasını sağlayabilirsiniz. UI kütüphanesindeki düğme bileşenini güncellediğinizde, bileşeni kullanan tüm uygulamalar otomatik olarak güncellenecektir.

Nx Çalışma Alanlarında Bağımlılık Yönetimi

Nx, projeler ve kütüphaneler arasındaki bağımlılıkları yönetmek için güçlü araçlar sağlar. Bağımlılıkları her proje veya kütüphanenin `project.json` dosyasında açıkça tanımlayabilirsiniz.

Örnek: Bir Bağımlılığı Bildirme

Uygulamanızın "my-app" kütüphanesinin "core" kütüphanesine bağlı olduğunu varsayalım. Bu bağımlılığı "my-app"in `project.json` dosyasında bildirebilirsiniz.

            // apps/my-app/project.json
{
 "name": "my-app",
 "projectType": "application",
 ...
 "implicitDependencies": ["core"]
}
            

              
                Copy
              
            
          

Bağımlılıkları açıkça bildirerek Nx, çalışma alanınızın bağımlılık grafiğini analiz edebilir ve bir bağımlılık değiştiğinde yalnızca etkilenen projeleri yeniden oluşturabilir. Bu, derleme performansını önemli ölçüde artırır.

Nx ile Derleme Performansı Optimizasyonu

Nx'in akıllı derleme sistemi ve hesaplama önbelleğe alma yetenekleri, derleme performansını önemli ölçüde artırır. Nx çalışma alanınızda derleme performansını optimize etmek için bazı ipuçları şunlardır:

• Bağımlılık Grafiğini Analiz Edin: Çalışma alanınızın bağımlılık grafiğini görselleştirmek için `nx graph` komutunu kullanın. Olası darboğazları belirleyin ve bağımlılıkları azaltmak için proje yapınızı optimize edin.
• Hesaplama Önbelleğe Almayı Kullanın: Nx, derlemeler ve testler gibi pahalı hesaplamaların sonuçlarını önbelleğe alır. `nx.json` dosyanızda hesaplama önbelleğe almanın etkinleştirildiğinden emin olun.
• Görevleri Paralel Çalıştırın: Nx, birden fazla CPU çekirdeğini kullanmak için görevleri paralel olarak çalıştırabilir. Görevleri paralel çalıştırmak için `--parallel` bayrağını kullanın.
• Dağıtılmış Görev Yürütmeyi Kullanın: Çok büyük monorepolar için Nx, derlemeleri ve testleri paralelleştirmek için görevleri birden fazla makineye dağıtabilir.
• Kodunuzu Optimize Edin: Derleme sürelerini azaltmak için kodunuzu optimize edin. Kullanılmayan kodu kaldırın, görüntüleri optimize edin ve paketlerinizin boyutunu azaltmak için kod bölme kullanın.

Nx Çalışma Alanlarında Test

Nx, birim testleri, entegrasyon testleri ve uçtan uca testler çalıştırmak için entegre test araçları sağlar. Çalışma alanındaki tüm projeler veya belirli bir proje için testler çalıştırmak için `nx test` komutunu kullanabilirsiniz.

Örnek: Testleri Çalıştırma

            nx test my-app
            

              
                Copy
              
            
          

Bu komut, "my-app" uygulaması için tüm testleri çalıştırır.

Nx, Jest, Cypress ve Playwright gibi popüler test çerçevelerini destekler. Her projenin `project.json` dosyasında test ortamınızı yapılandırabilirsiniz.

Nx ile Sürekli Entegrasyon ve Sürekli Dağıtım (CI/CD)

Nx, GitHub Actions, GitLab CI ve Jenkins gibi popüler CI/CD sistemleriyle sorunsuz bir şekilde entegre olur. CI/CD hattınızdaki derlemeleri, testleri ve dağıtımları otomatikleştirmek için Nx'in komut satırı arayüzünü kullanabilirsiniz.

Örnek: GitHub Actions İş Akışı

İşte Nx çalışma alanınızı derleyen, test eden ve dağıtan bir GitHub Actions iş akışı örneği:

            # .github/workflows/ci.yml
name: CI

on:
 push:
 branches: [main]
 pull_request:
 branches: [main]

jobs:
 build:
 runs-on: ubuntu-latest

 steps:
 - uses: actions/checkout@v3
 with:
 fetch-depth: 0
 - uses: actions/setup-node@v3
 with:
 node-version: 16
 cache: 'npm'
 - run: npm ci
 - run: npx nx affected --target=lint --base=origin/main --head=HEAD
 - run: npx nx affected --target=test --base=origin/main --head=HEAD --watchAll=false
 - run: npx nx affected --target=build --base=origin/main --head=HEAD
            

              
                Copy
              
            
          

Bu iş akışı aşağıdaki görevleri çalıştırır:

• Linting: Etkilenen projelerde linter'ları çalıştırır.
• Testing: Etkilenen projelerde testleri çalıştırır.
• Building: Etkilenen projeleri oluşturur.

Nx, yalnızca bir değişiklikten etkilenen projelerde görevler çalıştırmanıza olanak tanıyan `affected` komutunu sağlar. Bu, CI/CD hattınızın yürütme süresini önemli ölçüde azaltır.

Frontend Nx Çalışma Alanı Geliştirme için En İyi Uygulamalar

Nx ile frontend uygulamaları geliştirmek için bazı en iyi uygulamalar şunlardır:

• Tutarlı Bir Kodlama Stili İzleyin: Çalışma alanınızda tutarlı bir kodlama stilini zorlamak için Prettier gibi bir kod biçimlendirici ve ESLint gibi bir linter kullanın.
• Birim Testleri Yazın: Kod kalitesini sağlamak ve gerilemeleri önlemek için tüm bileşenleriniz, hizmetleriniz ve yardımcı programlarınız için birim testleri yazın.
• Bir Tasarım Sistemi Kullanın: UI bileşenlerinizde tutarlılığı sağlamak için bir tasarım sistemi kullanın.
• Kodunuzu Belgeleyin: Diğer geliştiricilerin anlamasını ve sürdürmesini kolaylaştırmak için kodunuzu iyice belgeleyin.
• Sürüm Kontrolü Kullanın: Sürüm kontrolü için Git kullanın ve tutarlı bir dallanma stratejisi izleyin.
• İş Akışınızı Otomatikleştirin: Kodunuzun her zaman test edildiğinden ve otomatik olarak dağıtıldığından emin olmak için iş akışınızı CI/CD ile otomatikleştirin.
• Bağımlılıkları Güncel Tutun: En son özelliklerden ve güvenlik yamalarından yararlanmak için bağımlılıklarınızı düzenli olarak güncelleyin.
• Performansı İzleyin: Uygulamalarınızın performansını izleyin ve olası darboğazları belirleyin.

Gelişmiş Nx Kavramları

Nx'in temellerine alıştıktan sonra, geliştirme iş akışınızı daha da geliştirmek için bazı gelişmiş kavramları keşfedebilirsiniz:

• Özel Oluşturucular: Yeni projelerin, bileşenlerin ve modüllerin oluşturulmasını otomatikleştirmek için özel oluşturucular oluşturun. Bu, geliştirme süresini önemli ölçüde azaltabilir ve tutarlılığı sağlayabilir.
• Nx Eklentileri: Nx'in işlevselliğini özel araçlar ve entegrasyonlarla genişletmek için Nx eklentileri geliştirin.
• Modül Federasyonu: Uygulamanızın bağımsız bölümlerini ayrı ayrı oluşturmak ve dağıtmak için Modül Federasyonunu kullanın. Bu, daha hızlı dağıtımlar ve daha fazla esneklik sağlar.
• Nx Cloud: Gelişmiş derleme içgörüleri, dağıtılmış görev yürütme ve uzaktan önbelleğe alma elde etmek için Nx Cloud ile entegre olun.

Sonuç

Nx çalışma alanları, frontend monorepolarını yönetmek için güçlü ve verimli bir yol sağlar. Nx'in gelişmiş araçlarından ve özelliklerinden yararlanarak, kod paylaşımını, derleme performansını ve geliştirici işbirliğini geliştirebilir, bu da ölçeklenebilir ve sürdürülebilir frontend uygulamalarıyla sonuçlanır. Nx'i benimsemek, özellikle karmaşık ve büyük ölçekli projelerde çalışırken, geliştirme sürecinizi kolaylaştırabilir ve ekibiniz için önemli üretkenlik kazanımlarının kilidini açabilir. Frontend ortamı gelişmeye devam ederken, Nx ile monorepo geliştirmede uzmanlaşmak, frontend mühendisleri için giderek daha değerli bir beceri haline geliyor.

Bu kılavuz, frontend Nx çalışma alanı geliştirmesine kapsamlı bir genel bakış sağlamıştır. En iyi uygulamaları izleyerek ve gelişmiş kavramları keşfederek, Nx'in tüm potansiyelinin kilidini açabilir ve harika frontend uygulamaları oluşturabilirsiniz.