JavaScript Geliştirme Altyapısı: Kapsamlı Bir Uygulama Rehberi

Web geliştirmenin hızlı dünyasında, ölçeklenebilir, sürdürülebilir ve yüksek performanslı uygulamalar oluşturmak için sağlam bir JavaScript geliştirme altyapısı hayati önem taşır. Bu rehber, temel araçları, en iyi pratikleri ve uygulama stratejilerini kapsayarak böyle bir altyapının nasıl kurulacağına dair eksiksiz bir yol haritası sunar. Verimli geliştirme iş akışlarını destekleyen, kod kalitesini sağlayan ve dağıtım sürecini kolaylaştıran standartlaştırılmış ve otomatikleştirilmiş bir ortam oluşturmaya odaklanacağız. Bu rehber, JavaScript geliştirme süreçlerini iyileştirmek isteyen her seviyeden geliştiriciye yöneliktir. Farklı küresel standartlara ve yapılandırmalara uygulanabilir örnekler vermeyi hedefleyeceğiz.

1. Proje Kurulumu ve Başlatma

1.1 Proje Yapısını Seçme

Proje yapısı, kodunuzun nasıl organize edileceğini belirler ve bu da sürdürülebilirliği ve ölçeklenebilirliği etkiler. Önerilen bir yapı aşağıda verilmiştir:

my-project/
├── src/
│   ├── components/
│   │   ├── Button.js
│   │   └── Input.js
│   ├── utils/
│   │   ├── api.js
│   │   └── helpers.js
│   ├── App.js
│   └── index.js
├── public/
│   └── index.html
├── tests/
│   ├── Button.test.js
│   └── Input.test.js
├── .eslintrc.js
├── .prettierrc.js
├── webpack.config.js
├── package.json
└── README.md

Açıklama:

• src/: Uygulamanızın tüm kaynak kodunu içerir.
• components/: Yeniden kullanılabilir kullanıcı arayüzü (UI) bileşenlerini barındırır.
• utils/: Yardımcı fonksiyonları ve modülleri içerir.
• public/: index.html gibi statik varlıkları tutar.
• tests/: Birim ve entegrasyon testlerini içerir.
• .eslintrc.js: ESLint için yapılandırma dosyası.
• .prettierrc.js: Prettier için yapılandırma dosyası.
• webpack.config.js: Webpack için yapılandırma dosyası.
• package.json: Proje üst verilerini ve bağımlılıkları içerir.
• README.md: Proje için dokümantasyon.

1.2 Yeni Bir Proje Başlatma

Projeniz için yeni bir dizin oluşturarak ve npm veya yarn kullanarak bir package.json dosyası başlatarak başlayın:

mkdir my-project
cd my-project
npm init -y
# veya
yarn init -y

Bu komut, temel proje bilgilerini içeren varsayılan bir package.json dosyası oluşturur. Daha sonra bu dosyayı projeniz hakkında daha fazla ayrıntı eklemek için değiştirebilirsiniz.

2. Temel Geliştirme Araçları

2.1 Paket Yöneticisi: npm veya Yarn

Bir paket yöneticisi, proje bağımlılıklarını yönetmek için esastır. npm (Node Package Manager) ve Yarn en popüler seçeneklerdir. npm, Node.js için varsayılan paket yöneticisi olsa da, Yarn daha hızlı kurulum süreleri ve deterministik bağımlılık çözümlemesi gibi çeşitli avantajlar sunar. Bir seçim yapmadan önce avantajları ve dezavantajları göz önünde bulundurun. Her ikisi de Linux, MacOS ve Windows gibi sistemlerde sorunsuz çalışır.

Bağımlılıkları Yükleme:

# npm
npm install react react-dom

# yarn
yarn add react react-dom

2.2 Görev Çalıştırıcı: npm Script'leri

package.json dosyasında tanımlanan npm script'leri, yaygın geliştirme görevlerini otomatikleştirmenize olanak tanır. İşte bazı tipik script'ler:

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production",
  "test": "jest",
  "lint": "eslint src/**/*.js",
  "format": "prettier --write src/**/*.js"
}

Açıklama:

• start: Webpack kullanarak geliştirme sunucusunu başlatır.
• build: Üretime hazır paketi oluşturur.
• test: Jest kullanarak birim testlerini çalıştırır.
• lint: ESLint kullanarak JavaScript dosyalarını denetler.
• format: Prettier kullanarak JavaScript dosyalarını biçimlendirir.

Script'leri Çalıştırma:

# npm
npm run start
npm run build
npm run test

# yarn
yarn start
yarn build
yarn test

2.3 Paketleyici (Bundler): Webpack

Webpack, JavaScript, CSS ve diğer varlıkları dağıtım için dönüştüren ve paketleyen güçlü bir modül paketleyicisidir. Modüler kod yazmanıza ve uygulamanızı üretim için optimize etmenize olanak tanır.

Kurulum:

npm install webpack webpack-cli webpack-dev-server --save-dev
# veya
yarn add webpack webpack-cli webpack-dev-server --dev

Yapılandırma (webpack.config.js):

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // node_modules klasöründeki kodu dönüştürmek istemiyoruz
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

Açıklama:

• entry: Uygulamanızın giriş noktası.
• output: Paketlenmiş kod için çıktı dizini ve dosya adı.
• devServer: Geliştirme sunucusu için yapılandırma.
• module.rules: Farklı dosya türlerinin nasıl işleneceğini tanımlar.

2.4 Dönüştürücü (Transpiler): Babel

Babel, modern JavaScript'i (ES6+) eski tarayıcılarda çalışabilen geriye dönük uyumlu koda dönüştüren bir JavaScript dönüştürücüsüdür. Babel, geliştiricilerin tarayıcı uyumluluğu konusunda endişelenmeden yeni JavaScript özelliklerini kullanmalarına olanak tanır.

Kurulum:

npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader --save-dev
# veya
yarn add @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader --dev

Yapılandırma (babel.config.js veya webpack.config.js içinde):

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react']
};

3. Kod Kalitesi ve Biçimlendirme

3.1 Kod Denetleyici (Linter): ESLint

ESLint, kodlama standartlarını zorunlu kılmaya ve kodunuzdaki potansiyel hataları belirlemeye yardımcı olan bir kod denetleme aracıdır. Proje genelinde tutarlılık sağlar ve kod kalitesini artırır. Kod yazarken anında geri bildirim almak için IDE'nizle entegre etmeyi düşünün. ESLint ayrıca belirli proje yönergelerini zorunlu kılmak için özel kural setlerini de destekler.

Kurulum:

npm install eslint eslint-plugin-react --save-dev
# veya
yarn add eslint eslint-plugin-react --dev

Yapılandırma (.eslintrc.js):

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react'
  ],
  rules: {
    'react/prop-types': 'off'
  }
};

3.2 Biçimlendirici: Prettier

Prettier, kodunuzu tutarlı bir stile uyması için otomatik olarak biçimlendiren, kendi kuralları olan bir kod biçimlendiricisidir. Kodlama stili hakkındaki tartışmaları ortadan kaldırır ve kod tabanınızın tek tip görünmesini sağlar. VSCode ve Sublime Text gibi birçok düzenleyici, dosya kaydedildiğinde Prettier biçimlendirmesini otomatikleştirmek için eklentiler sunar.

Kurulum:

npm install prettier --save-dev
# veya
yarn add prettier --dev

Yapılandırma (.prettierrc.js):

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  tabWidth: 2,
  useTabs: false,
  printWidth: 80,
  arrowParens: 'always'
};

3.3 ESLint ve Prettier'ı Entegre Etme

ESLint ve Prettier'ın sorunsuz bir şekilde birlikte çalışmasını sağlamak için aşağıdaki paketleri yükleyin:

npm install eslint-plugin-prettier eslint-config-prettier --save-dev
# veya
yarn add eslint-plugin-prettier eslint-config-prettier --dev

.eslintrc.js dosyasını güncelleyin:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react'
  ],
  rules: {
    'react/prop-types': 'off'
  }
};

4. Test Etme

4.1 Birim Testi: Jest

Jest, birim testleri, entegrasyon testleri ve uçtan uca testler yazmak için eksiksiz bir çözüm sunan popüler bir JavaScript test çerçevesidir. Mocking (taklit etme), kod kapsamı ve anlık görüntü (snapshot) testi gibi özellikler içerir.

Kurulum:

npm install jest --save-dev
# veya
yarn add jest --dev

Yapılandırma (jest.config.js):

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['/src/setupTests.js'],
  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy',
  },
  transform: {
        '^.+\\.(js|jsx|ts|tsx)$': '/node_modules/babel-jest'
    },
};

Örnek Test:

// src/components/Button.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  it('renders the button with the correct text', () => {
    render(Click Me);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });
});

4.2 Uçtan Uca Test: Cypress

Cypress, uygulamanızla kullanıcı etkileşimlerini simüle eden kapsamlı testler yazmanıza olanak tanıyan bir uçtan uca test çerçevesidir. Görsel bir arayüz ve güçlü hata ayıklama araçları sunar. Cypress, özellikle karmaşık kullanıcı akışlarını ve etkileşimlerini test etmek için kullanışlıdır.

Kurulum:

npm install cypress --save-dev
# veya
yarn add cypress --dev

Örnek Test:

// cypress/integration/example.spec.js
describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io');
    cy.contains('type').click();
    cy.url().should('include', '/commands/actions');
    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com');
  });
});

5. Sürekli Entegrasyon ve Sürekli Teslimat (CI/CD)

5.1 Bir CI/CD İş Akışı Kurma

CI/CD, uygulamanızı oluşturma, test etme ve dağıtma sürecini otomatikleştirerek hızlı ve güvenilir sürümler sağlar. Popüler CI/CD platformları arasında GitHub Actions, Jenkins, CircleCI ve GitLab CI bulunur. Adımlar normalde kod denetleme, testleri çalıştırma ve üretime hazır varlıkları oluşturmayı içerir.

GitHub Actions kullanarak örnek (.github/workflows/main.yml):

name: CI/CD

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

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run tests
        run: npm run test

      - name: Build
        run: npm run build

5.2 Dağıtım Stratejileri

Dağıtım stratejileri barındırma ortamınıza bağlıdır. Seçenekler şunları içerir:

• Statik Site Barındırma: Statik varlıkları Netlify, Vercel veya AWS S3 gibi platformlara dağıtma.
• Sunucu Tarafı Oluşturma (SSR): Heroku, AWS EC2 veya Google Cloud Platform gibi platformlara dağıtma.
• Konteynerleştirme: Docker ve Kubernetes gibi konteyner orkestrasyon araçlarını kullanma.

6. Performans Optimizasyonu

6.1 Kod Bölme (Code Splitting)

Kod bölme, uygulamanızı daha küçük parçalara ayırmayı içerir, bu da tarayıcının yalnızca mevcut görünüm için gereken kodu indirmesine olanak tanır. Bu, başlangıç yükleme süresini azaltır ve performansı artırır. Webpack, dinamik import'lar kullanarak kod bölmeyi destekler:

import('./components/MyComponent')
  .then(module => {
    const MyComponent = module.default;
    // Use MyComponent
  })
  .catch(error => {
    console.error('Failed to load component', error);
  });

6.2 Tembel Yükleme (Lazy Loading)

Tembel yükleme, kritik olmayan kaynakların ihtiyaç duyulana kadar yüklenmesini erteler. Bu, başlangıç yükleme süresini azaltır ve algılanan performansı artırır. Resimler ve bileşenler, Intersection Observer gibi teknikler kullanılarak tembel yüklenebilir.

6.3 Ağaç Sarsma (Tree Shaking)

Ağaç sarsma, derleme işlemi sırasında uygulamanızdan kullanılmayan kodu kaldıran bir tekniktir. Bu, paket boyutunu küçültür ve performansı artırır. Webpack, kodunuzdaki import ve export ifadelerini analiz ederek ağaç sarsmayı destekler.

6.4 Görüntü Optimizasyonu

Görüntüleri optimize etmek, kaliteden ödün vermeden dosya boyutunu azaltmak için onları sıkıştırmayı ve yeniden boyutlandırmayı içerir. ImageOptim ve TinyPNG gibi araçlar bu süreci otomatikleştirebilir. WebP gibi modern görüntü formatlarını kullanmak da sıkıştırmayı ve performansı artırabilir.

7. Sürüm Kontrolü: Git

Git, kod tabanınızdaki değişiklikleri izlemek ve diğer geliştiricilerle işbirliği yapmak için temel bir sürüm kontrol sistemidir. GitHub, GitLab veya Bitbucket gibi barındırılan bir Git deposu kullanmak, kodunuzu yönetmek için merkezi bir platform sağlar.

7.1 Bir Git Deposu Kurma

Proje dizininizde yeni bir Git deposu başlatın:

git init

Dosyalarınızı hazırlık alanına ekleyin ve değişiklikleri commit'leyin:

git add .
git commit -m "Initial commit"

GitHub, GitLab veya Bitbucket üzerinde yeni bir depo oluşturun ve yerel deponuzu uzak depoya gönderin:

git remote add origin [remote repository URL]
git push -u origin main

7.2 Dallanma (Branching) Stratejileri

Dallanma, ana kod tabanını etkilemeden yeni özellikler veya hata düzeltmeleri üzerinde izole bir şekilde çalışmanıza olanak tanır. Popüler dallanma stratejileri şunları içerir:

• Gitflow: Geliştirmenin farklı aşamalarını yönetmek için birden çok dal (ör. main, develop, feature, release, hotfix) kullanır.
• GitHub Flow: Tek bir main dalı kullanır ve her yeni özellik veya hata düzeltmesi için özellik dalları oluşturur.
• GitLab Flow: Farklı ortamlara dağıtımları yönetmek için ortam dallarını (ör. production, staging) içeren GitHub Flow'un bir uzantısıdır.

8. Dokümantasyon ve İşbirliği

8.1 Dokümantasyon Oluşturma

Otomatik dokümantasyon oluşturma araçları, kod yorumlarınızdan dokümantasyon çıkarabilir. JSDoc popüler bir seçenektir. Dokümantasyon oluşturmayı CI/CD iş akışınıza entegre etmek, dokümantasyonunuzun her zaman güncel olmasını sağlar.

8.2 İşbirliği Araçları

Slack, Microsoft Teams ve Jira gibi araçlar ekip üyeleri arasındaki iletişimi ve işbirliğini kolaylaştırır. Bu araçlar iletişimi düzenler, iş akışını iyileştirir ve genel üretkenliği artırır.

9. Güvenlik Hususları

9.1 Bağımlılık Güvenlik Açıkları

Proje bağımlılıklarınızı npm audit veya Yarn audit gibi araçlar kullanarak bilinen güvenlik açıkları için düzenli olarak tarayın. Güvenlik açıklarını hızla yamalamak için bağımlılık güncellemelerini otomatikleştirin.

9.2 Gizli Bilgi Yönetimi

API anahtarları, şifreler veya veritabanı kimlik bilgileri gibi hassas bilgileri asla Git deponuza commit'lemeyin. Hassas bilgileri güvenli bir şekilde saklamak ve yönetmek için ortam değişkenleri veya gizli bilgi yönetimi araçları kullanın. HashiCorp Vault gibi araçlar yardımcı olabilir.

9.3 Girdi Doğrulama ve Temizleme

Siteler arası betik çalıştırma (XSS) ve SQL enjeksiyonu gibi güvenlik açıklarını önlemek için kullanıcı girdilerini doğrulayın ve temizleyin. Girdi doğrulaması için validator.js ve HTML temizliği için DOMPurify gibi kütüphaneler kullanın.

10. İzleme ve Analitik

10.1 Uygulama Performans İzleme (APM)

New Relic, Datadog ve Sentry gibi APM araçları, uygulamanızın performansı hakkında gerçek zamanlı bilgiler sağlar ve potansiyel darboğazları belirler. Bu araçlar yanıt süresi, hata oranı ve kaynak kullanımı gibi metrikleri izler.

10.2 Analitik Araçları

Google Analytics, Mixpanel ve Amplitude gibi analitik araçları kullanıcı davranışını izler ve kullanıcıların uygulamanızla nasıl etkileşimde bulunduğuna dair bilgiler sağlar. Bu araçlar kullanıcı tercihlerini anlamanıza, iyileştirilecek alanları belirlemenize ve uygulamanızı daha iyi etkileşim için optimize etmenize yardımcı olabilir.

11. Yerelleştirme (l10n) ve Uluslararasılaştırma (i18n)

Küresel bir kitle için ürünler oluştururken, yerelleştirme (l10n) ve uluslararasılaştırmayı (i18n) göz önünde bulundurmak esastır. Bu, uygulamanızı birden çok dili, para birimini ve kültürel gelenekleri destekleyecek şekilde tasarlamayı içerir.

11.1 i18n'i Uygulama

Çevirileri yönetmek ve verileri kullanıcının yerel ayarına göre biçimlendirmek için i18next veya react-intl gibi kütüphaneler kullanın. Çevirileri ayrı dosyalarda saklayın ve kullanıcının dil tercihlerine göre dinamik olarak yükleyin.

11.2 Birden Fazla Para Birimini Destekleme

Fiyatları kullanıcının yerel para biriminde göstermek için bir para birimi biçimlendirme kütüphanesi kullanın. Birden fazla para birimini destekleyen bir ödeme ağ geçidiyle entegrasyonu düşünün.

11.3 Tarih ve Saat Biçimlerini Yönetme

Tarihleri ve saatleri kullanıcının yerel biçiminde göstermek için bir tarih ve saat biçimlendirme kütüphanesi kullanın. Kullanıcının konumundan bağımsız olarak saatlerin doğru gösterilmesini sağlamak için saat dilimi yönetimini kullanın. Moment.js ve date-fns yaygın seçeneklerdir, ancak daha küçük boyutu ve modüler tasarımı nedeniyle daha yeni projeler için genellikle date-fns önerilir.

12. Erişilebilirlik

Erişilebilirlik, uygulamanızın engelli kişiler tarafından kullanılabilir olmasını sağlar. Web erişilebilirlik standartlarına (WCAG) uyun ve görüntüler için alternatif metin, klavye ile gezinme ve ekran okuyucu desteği sağlayın. axe-core gibi test araçları erişilebilirlik sorunlarını belirlemenize yardımcı olabilir.

13. Sonuç

Sağlam bir JavaScript geliştirme altyapısı oluşturmak, dikkatli planlama ve uygun araçların seçimini gerektirir. Bu rehberde özetlenen stratejileri uygulayarak, projenizin uzun vadeli başarısını destekleyen verimli, güvenilir ve ölçeklenebilir bir geliştirme ortamı oluşturabilirsiniz. Bu, kod kalitesi, test etme, otomasyon, güvenlik ve performans optimizasyonunun dikkatli bir şekilde değerlendirilmesini içerir. Her projenin farklı ihtiyaçları vardır, bu yüzden altyapınızı her zaman bu ihtiyaçlara göre ayarlayın.

En iyi pratikleri benimseyerek ve geliştirme iş akışlarınızı sürekli iyileştirerek, JavaScript projelerinizin iyi yapılandırılmış, sürdürülebilir olmasını ve küresel bir kitleye olağanüstü kullanıcı deneyimleri sunmasını sağlayabilirsiniz. Altyapınızı sürekli olarak iyileştirmek ve geliştirmek için geliştirme süreci boyunca kullanıcı geri bildirim döngülerini entegre etmeyi düşünün.