Ön Yüz Server Tools Eğitimi

Eğitim Hakkında

Paket yönetiminden modül paketlemeye, geliştirme sunucusundan üretim derlemesine araç zinciri

FSD Front-end Development: Server Tools Eğitimi, modern bir ön yüz projesinin arkasındaki derleme ve geliştirme araç zincirini uçtan uca öğretir. Katılımcılar Node.js çalışma zamanını, npm, yarn ve pnpm ile paket yönetimini, Webpack ve Vite ile modül paketlemeyi, Babel ve ESBuild ile dönüştürmeyi uygular. Geliştirme sunucusu, HMR, proxy, ortam değişkenleri ve üretim için kod bölme, tree shaking ve önbellekleme işlenir. Program CI entegrasyonu ve yayına alma ile tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; boş bir ön yüz projesi dört gün boyunca paket yönetimi, paketleyici, geliştirme sunucusu ve üretim derlemesiyle adım adım kurulur.

Seviye

Orta Seviye — Node.js, paket yönetimi, Webpack ve Vite ile modern ön yüz derleme araçları

Öğrenme Metodu

Boş bir ön yüz projesi dört gün boyunca canlı olarak kurulur; her modülde bir araç yapılandırılıp çalışır halde gözlemlenir.

Neden Bu Eğitim?

⚙️Araç hakimiyeti

Projenin arkasındaki derleme araçlarını anlar, hazır şablonlara bağımlı kalmadan yapılandırmayı kendiniz kurup değiştirebilirsiniz.

🚀Hızlı geliştirme

HMR, hızlı geliştirme sunucusu ve doğru yapılandırmayla geri bildirim döngüsünü kısaltıp günlük geliştirme hızınızı artırırsınız.

📦Optimum çıktı

Kod bölme, tree shaking ve önbellekleme ile üretim paketini küçültüp uygulamanın yüklenme performansını belirgin iyileştirirsiniz.

Anahtar Konular

webpack eğitimivite eğitiminode.js eğitiminpm paket yönetimiön yüz build araçlarımodül paketleyici kursufrontend tooling eğitimibabel eğitimijavascript derleme eğitimiweb geliştirme araçları

“Araç zincirini anlamak, hazır şablonun ötesine geçip projenin derleme kararlarını kendi elinize almaktır; asıl kontrol oradadır.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve kurulum

1

JavaScript bilgisi

Modül, import/export, fonksiyon ve asenkron kavramlarına hakimiyet, araçların ne yaptığını anlamak için gereklidir.

2

Komut satırı

Terminalde dizin gezme, komut çalıştırma ve script tetikleme becerisi derleme araçlarıyla çalışmayı kolaylaştırır.

3

Ön yüz deneyimi

HTML, CSS ve en az bir ön yüz kütüphanesiyle küçük bir proje geliştirmiş olmak araçların bağlamını anlamada faydalıdır.

4

Geliştirme ortamı

Node.js, bir kod editörü ve Git kurulu; terminalden npm komutlarını çalıştırabilir durumda bir bilgisayar gerekir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Node.js çalışma zamanını ve paket yöneticilerini tanır, bağımlılıkları sürüm kurallarıyla yönetir, script tanımlar ve kendi paketini oluşturur.

Modül 1

Node.js Çalışma Zamanı

Node.js olay döngüsü ve tek iş parçacığı modeli
CommonJS ve ESM modül sistemleri ayrımı
node ile script çalıştırma ve REPL kullanımı
process, env ve argv ile çalışma bağlamı
nvm ile Node sürümlerinin yönetimi
Yerleşik fs, path ve url modüllerine giriş

Modül 2

package.json ve npm

package.json alanları ve proje meta verisi
dependencies ve devDependencies ayrımı
npm install, ci ve node_modules çözümü
package-lock.json ile sürüm kilitleme
npm scripts ile görev tanımlama
npx ile yerel ikili dosyaları çalıştırma

Modül 3

Semantik Sürümleme

Major, minor ve patch sürüm anlamları
Caret ve tilde aralık belirteçlerinin etkisi
Breaking change ve geriye uyumluluk
npm outdated ve update ile güncelleme
npm audit ile güvenlik açığı taraması
Peer dependency çakışmalarının çözümü

Modül 4

Yarn ve pnpm Paket Yöneticileri

Yarn ve pnpm ile npm arasındaki farklar
pnpm içerik adresli depo ile disk tasarrufu
Workspace ile monorepo paket yönetimi
Lockfile farkları ve taşınabilirlik
Script çalıştırma ve komut eşleşmeleri
Paket yöneticisi seçiminde ölçütler

Günün hedefiKatılımcı Webpack ile bir projeyi sıfırdan yapılandırır, loader ve plugin zincirini kurar, Babel ile dönüştürme yapar ve çıktı yapısını denetler.

Modül 1

Paketleme Temelleri

Modül paketleyicinin çözdüğü temel problem
Bağımlılık grafiği ve modül çözümlemesi
Entry ve output yapılandırmasının tanımı
Geliştirme ve üretim mod farkları
Bundle, chunk ve module kavramları
webpack.config.js yapısının kurulumu

Modül 2

Loader Zinciri ve Varlıklar

Loader ile JS dışı varlıkların işlenmesi
css-loader ve style-loader ile stil yükleme
Resim ve font için asset module kullanımı
Loader sırası ve zincirleme mantığı
Sass ve PostCSS loader entegrasyonu
Loader seçeneklerinin yapılandırılması

Modül 3

Plugin ve Babel Dönüşümü

HtmlWebpackPlugin ile HTML üretimi
DefinePlugin ile derleme zamanı sabitleri
MiniCssExtractPlugin ile stil ayrıştırma
babel-loader ile modern JS dönüşümü
preset-env ile hedef tarayıcı desteği
Polyfill ve browserslist yapılandırması

Modül 4

Geliştirme Sunucusu

webpack-dev-server ile yerel sunum
Hot Module Replacement ile anlık güncelleme
devServer proxy ile API yönlendirme
Source map ile hata ayıklama kolaylığı
Watch modu ile dosya değişikliği izleme
Port, host ve history fallback ayarları

Günün hedefiKatılımcı Vite ile hızlı bir geliştirme ortamı kurar, native ESM ve ESBuild avantajını kavrar, Rollup tabanlı üretim derlemesini ve eklenti sistemini uygular.

Modül 1

Vite Mimarisi ve Yaklaşımı

Geliştirmede native ESM ile hızlı başlangıç
Bundle yerine istek üzerine modül sunumu
ESBuild ile ön bağımlılık dönüşümü
Üretimde Rollup tabanlı paketleme
vite.config.js yapılandırma yapısı
Webpack ile Vite arasındaki temel farklar

Modül 2

Geliştirme Deneyimi

Anında başlayan geliştirme sunucusu
Hızlı HMR ile durum koruyan güncelleme
CSS ve preprocessor yerleşik desteği
Statik varlık ve public klasör yönetimi
import.meta.env ile ortam değişkenleri
TypeScript ve JSX için hazır destek

Modül 3

Vite Eklenti Sistemi

Vite eklenti API ve yaşam döngüsü kancaları
Çerçeve eklentileriyle React ve Vue desteği
Rollup eklentileriyle uyumluluk
resolve.alias ile yol takma adı tanımı
define ile genel sabitlerin enjeksiyonu
Legacy plugin ile eski tarayıcı desteği

Modül 4

ESBuild ve Rollup

ESBuild hızının derleme süresine etkisi
Rollup ile kütüphane paketleme senaryosu
Tek dosya ve çoklu çıktı formatları
ESM, CJS ve UMD çıktı formatı üretimi
external ile bağımlılıkların dışlanması
Üretim derlemesinin yapılandırılması

Günün hedefiKatılımcı üretim paketini kod bölme ve tree shaking ile optimize eder, önbellek ve hash stratejisi kurar, CI ile derlemeyi otomatize eder ve statik dağıtımı yapar.

Modül 1

Paket Optimizasyonu

Code splitting ile talep üzerine yükleme
Dynamic import ile tembel modül yükleme
Tree shaking ile kullanılmayan kod temizliği
Bundle analyzer ile paket boyutu analizi
Vendor ve runtime chunk ayrımı
Minify ve compression ile boyut düşürme

Modül 2

Önbellek Stratejisi

İçerik hash ile uzun süreli tarayıcı önbelleği
contenthash ile dosya adı değişim mantığı
Değişmeyen varlıklar için cache busting
Asset manifest ile varlık eşleme
Build önbelleği ile tekrar derleme hızı
CDN ile statik varlık dağıtımı

Modül 3

Ortam ve Yapılandırma

.env dosyaları ile ortam değişkeni yönetimi
Geliştirme, test ve üretim ortam ayrımı
Gizli değerlerin istemciye sızmasını önleme
Mode tabanlı yapılandırma seçimi
cross-env ile platformdan bağımsız script
Yapılandırma hatalarının erken yakalanması

Modül 4

CI ve Dağıtım Süreci

CI boru hattında install ve build adımları
Lint ve test aşamalarının otomasyonu
Derleme çıktısının artefakt olarak saklanması
Statik hosting ve SPA yönlendirme kuralı
Önizleme (preview) dağıtımı iş akışı
Sürüm etiketi ve geri alma stratejisi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Node.js ortamı

Node.js çalışma zamanını, modül sistemlerini ve process ortamını anlar, script ve araçları güvenle çalıştırabilirsiniz.

✅

Paket yönetimi

npm, yarn ve pnpm ile bağımlılıkları yönetir, semantik sürümleme ve lockfile mantığını doğru uygularsınız.

✅

Webpack kurulumu

Entry, output, loader ve plugin zinciriyle Webpack projesini sıfırdan yapılandırıp çıktıyı denetleyebilirsiniz.

✅

Babel dönüşümü

Babel ve preset-env ile modern JavaScript'i hedef tarayıcılara uyarlar, polyfill ve browserslist yönetirsiniz.

✅

Vite ve ESBuild

Vite ile hızlı geliştirme ortamı kurar, native ESM ve ESBuild avantajını üretim derlemesiyle birleştirirsiniz.

✅

Paket optimizasyonu

Kod bölme, tree shaking ve analiz araçlarıyla üretim paketini küçültüp yükleme performansını iyileştirirsiniz.

✅

Önbellek ve ortam

İçerik hash önbelleği ve ortam değişkeni yönetimiyle güvenli ve verimli bir üretim yapılandırması kurarsınız.

✅

CI ve yayın

Derleme, lint ve testi CI boru hattında otomatize eder, statik dağıtım ve geri alma stratejisini uygularsınız.

Kimler İçin Uygundur?

JavaScript ve HTML/CSS ile ön yüz geliştirmiş
projelerindeki derleme
araç yapılandırmasını anlamak ve kontrol etmek isteyen geliştiriciler ile araç zincirini kuran ve bakımını üstlenen ekip üyeleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

JavaScript ve HTML/CSS ile ön yüz geliştirmiş, projelerindeki derleme ve araç yapılandırmasını anlamak ve kontrol etmek isteyen geliştiriciler için uygundur. Hazır şablonlara bağımlı kalmadan Webpack ve Vite yapılandırmasını kendi eliyle kurmak isteyen herkese hitap eder.

Webpack mi Vite mi öğretiliyor?

Her ikisi de işlenir. Webpack üzerinden loader, plugin ve yapılandırma mantığı derinlemesine kurulur; Vite üzerinden native ESM, ESBuild ve Rollup tabanlı modern yaklaşım gösterilir. Amaç tek bir araca bağlı kalmak değil, ikisinin çözdüğü problemi anlayıp projenize uygun aracı seçebilmektir.

Eğitim için hangi ön bilgi gerekir?

JavaScript modül, import/export ve asenkron kavramlarına temel hakimiyet ile terminalde komut çalıştırma deneyimi beklenir. En az bir ön yüz kütüphanesiyle küçük bir proje geliştirmiş olmak araçların bağlamını anlamayı kolaylaştırır; derin build bilgisi gerekmez.

Eğitimin süresi ve formatı nedir?

Eğitim dört gün sürer ve her gün dört modülden oluşur. Boş bir ön yüz projesi dört gün boyunca paket yönetimi, paketleyici, geliştirme sunucusu ve üretim derlemesiyle adım adım kurulur. Yüz yüze veya online yapılabilir ve içerik kurumun kullandığı araç yığınına göre uyarlanabilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve eğitim boyunca kurulan derleme araç zincirini belgeler; kurumsal gruplara mevcut projelerin yapılandırması üzerinden uygulamalı değerlendirmeyle genişletilebilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

FSD FRONT-END DEVELOPMENT: SERVER TOOLS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Node.js Çalışma Zamanı

package.json ve npm

Semantik Sürümleme

Yarn ve pnpm Paket Yöneticileri

Paketleme Temelleri

Loader Zinciri ve Varlıklar

Plugin ve Babel Dönüşümü

Geliştirme Sunucusu

Vite Mimarisi ve Yaklaşımı

Geliştirme Deneyimi

Vite Eklenti Sistemi

ESBuild ve Rollup

Paket Optimizasyonu

Önbellek Stratejisi

Ortam ve Yapılandırma

CI ve Dağıtım Süreci

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Front-end Apps: Data Persistence Eğitimi

Front-end Apps: JAX-RS Web Services Eğitimi

Front-end Apps: POJO, EJB, & EJB Lite Eğitimi

Front-end Apps: Presentation with JSF Eğitimi

Front-end Apps: RESTful Services & Clients Eğitimi

Front-end Apps: Servlets & JavaServer Pages Eğitimi