Kitap 02 · Özet sayfa

Web Geliştirme

Tarayıcıda çalışan uygulamaların arkasındaki diller, protokoller ve render stratejileri.

01AJAXAsenkron JavaScript ve XML: AJAX (Asynchronous JavaScript and XML), JavaScript ile sunucudan arka planda veri alıp sayfayı yeniden yüklemeden yalnızca bir kısmını güncelleme tekniğidir.
AJAX veriyi arka planda yükler ve sayfanın bir kısmını günceller.
Terim 2005'ten gelir; XMLHttpRequest daha önce vardı.
Bugünkü istekler genellikle XML değil JSON taşır.
02Alan Adı: Alan adı (domain name), example.com gibi bir web sitesinin insanların okuyabileceği adresidir; DNS sistemi bunu siteyi barındıran sunucunun IP adresine çevirir.
Alan adı, DNS'in bir IP adresine çevirdiği okunabilir bir adrestir.
Sağdan sola okunur: TLD, kaydedilen ad, sonra alt alan adları.
Alan adları bir kayıt firması üzerinden kaydedilir ve yenilenmesi gerekir.
03Angular: Angular, Google'ın TypeScript tabanlı, eksiksiz web framework'üdür; bileşenler, yönlendirme, formlar, HTTP istemcisi ve bağımlılık enjeksiyonu yerleşik gelir.
Angular, Google'ın geliştirdiği eksiksiz bir TypeScript web framework'üdür.
Yönlendirme, formlar, bir HTTP istemcisi ve bağımlılık enjeksiyonu içerir.
Bileşenler şablonlu TypeScript sınıflarıdır; servisler ortak mantığı tutar.
04BundlerModül Paketleyici: Bundler, JavaScript modüllerini ve bağımlılıklarını tarayıcıların hızlıca indirip çalıştırabileceği birkaç optimize dosyada birleştiren bir derleme aracıdır.
Bundler, birçok modülü ve varlığı (asset) birkaç optimize dosyada birleştirir.
Bağımlılık grafiği oluşturmak için bir giriş noktasından import ifadelerini izler.
Tree shaking, minification ve code splitting paketleri küçültür ve daha hızlı yüklenir hale getirir.
05CMSİçerik Yönetim Sistemi: CMS (içerik yönetim sistemi), web sitesi içeriğini kod yazmadan bir editör üzerinden oluşturmayı, düzenlemeyi ve yayımlamayı sağlayan yazılımdır.
CMS, geliştirici olmayanların bir editör üzerinden içerik oluşturup yayımlamasını sağlar.
İçeriği, onu gösteren koddan ayırır.
WordPress, Drupal ve Joomla sayfaları da render eden geleneksel CMS'lerdir.
06Code Splitting: Code splitting, bir web uygulamasının JavaScript'ini istenince yüklenen küçük parçalara bölen tekniktir; böylece ilk sayfa yalnızca gereken kodu indirir.
Code splitting, tek büyük bir paketi istenince yüklenen küçük chunk'lara böler.
Dinamik import(), bundler'ın yeni bir chunk başlatacağı yeri işaretler.
Rota tabanlı bölme her sayfaya kendi kodunu verir; bileşen düzeyinde bölme ağır bileşenleri erteler.
07Cookie: Cookie, bir web sitesinin tarayıcıdan saklamasını ve sonraki isteklerle geri göndermesini istediği, çoğunlukla oturum açık tutmak için kullanılan küçük veridir.
Sunucular cookie'leri Set-Cookie yanıt başlığıyla ayarlar.
Tarayıcılar cookie'leri eşleşen isteklerde otomatik olarak geri gönderir.
Oturum cookie'leri genellikle kullanıcı verisini değil, yalnızca rastgele bir kimlik saklar.
08Core Web Vitals: Core Web Vitals, bir sayfanın gerçek kullanıcı deneyimini ölçen üç metriktir: yükleme hızı (LCP), yanıt verme (INP) ve görsel kararlılık (CLS).
Üç Core Web Vitals: LCP (yükleme), INP (yanıt verme) ve CLS (görsel kararlılık).
İyi puanlar: LCP 2,5 sn veya altı, INP 200 ms veya altı, CLS 0,1 veya altı.
Gerçek ziyaretlerin en az yüzde 75'i bu eşikleri karşıladığında sayfa geçer.
09CORSKaynaklar Arası Kaynak Paylaşımı: CORS, bir sunucunun JavaScript'ten istek yapan hangi diğer sitelerin yanıtlarını okuyabileceğini bildirmesini sağlayan tarayıcı güvenlik mekanizmasıdır.
Tarayıcılar, aynı kaynak politikası gereği varsayılan olarak kaynaklar arası okumaları engeller.
Sunucunun gönderdiği CORS başlıkları tarayıcıya hangi kaynaklara izin verildiğini söyler.
Preflight OPTIONS istekleri, bazı isteklerden önce izni denetler.
10CSRİstemci Tarafı Render: CSR, tarayıcının çoğunlukla boş bir HTML sayfası ile JavaScript indirip sayfa içeriğini kullanıcının cihazında oluşturduğu render yaklaşımıdır.
CSR, sayfayı tarayıcıda JavaScript ile oluşturur.
Sunucu asgari bir HTML kabuğu ve bir betik paketi gönderir.
İlk yüklemeden sonraki gezinme hızlıdır ve yalnızca veri gerektirir.
11CSSBasamaklı Stil Sayfaları: CSS, HTML içeriğinin ekranda renk, yazı tipi, boşluk, yerleşim ve animasyon gibi yönlerden nasıl görüneceğini belirleyen stil sayfası dilidir.
CSS, HTML'in görsel sunumunu kontrol eder.
Kural, bir seçici ile bir veya daha fazla özellik-değer çiftinden oluşur.
Basamak ve belirleyicilik, çakışma durumunda hangi kuralın kazanacağını belirler.
12CSS Grid: CSS Grid, öğeleri aynı anda satır ve sütunlar halinde düzenleyen, karmaşık sayfa yerleşimlerini kolayca kurmayı sağlayan iki boyutlu CSS yerleşim sistemidir.
display: grid bir öğeyi grid kapsayıcısı, doğrudan çocuklarını grid öğesi yapar.
Grid satırları ve sütunları aynı anda denetler; yani iki boyutludur.
fr birimi, repeat() ve minmax() esnek, duyarlı izler oluşturur.
13Debounce: Debounce, bir fonksiyonu art arda gelen olaylar belli bir süre durana dek ertelemektir; böylece arama kutusu her tuşta değil, yazma bitince istek gönderir.
Debounce, olaylar belirli bir süre durana kadar bekler, sonra bir kez çalışır.
Throttle, sürekli olaylar sırasında her aralıkta en fazla bir kez çalışır.
Yazarken arama, otomatik kaydetme ve doğrulama için debounce kullanın.
14DOMBelge Nesne Modeli: DOM, tarayıcının bir web sayfasını temsil eden ve JavaScript'in okuyup değiştirerek kullanıcının gördüğünü güncelleyebildiği bellek içi nesne ağacıdır.
DOM, bir sayfayı düğümlerden oluşan bir ağaç olarak temsil eder.
JavaScript sayfayı okumak ve değiştirmek için DOM API'lerini kullanır.
DOM'daki değişiklikler ekrana yansır.
15Duyarlı Tasarım: Duyarlı tasarım, web sayfalarının yerleşimini, görsellerini ve metnini telefondan büyük monitöre her ekran boyutuna otomatik uyduran yaklaşımdır.
Tek bir duyarlı site telefonlara, tabletlere ve masaüstlerine uyum sağlar.
Esnek yerleşimler, göreli birimler ve media query'ler temel araçlardır.
Mobil öncelikli olmak, önce küçük ekranlar için stil yazıp sonra geliştirmek demektir.
16ES ModülleriECMAScript Modules: ES modülleri, JavaScript'in yerleşik modül sistemidir: her dosya kendi kapsamını korur ve kodu diğer dosyalarla import ve export aracılığıyla paylaşır.
ES modülleri kodu export ve import ile paylaşır, geri kalan her şeyi saklı tutar.
Dilin standardının parçasıdır; tarayıcılarda ve Node.js'te çalışır.
Statik import'lar araçların bağımlılık grafiğini görmesini ve böylece tree shaking yapmasını sağlar.
17FlexboxCSS Esnek Kutu Yerleşimi: Flexbox, öğeleri tek bir satır ya da sütunda düzenleyen ve büyüme, küçülme, hizalama ile boş alanı paylaşma biçimlerini denetleyen bir CSS yerleşim modelidir.
display: flex bir öğeyi flex kapsayıcısı, çocuklarını flex öğesi yapar.
Flexbox öğeleri tek boyutta, satır veya sütun olarak yerleştirir.
justify-content öğeleri ana eksende, align-items çapraz eksende hizalar.
18Frontend: Frontend, bir uygulamanın kullanıcının önünde, çoğunlukla tarayıcıda çalışan; arayüzü çizen ve tıklamalara, yazılanlara karşılık veren kısmıdır.
Frontend, bir uygulamanın kullanıcıya dönük, çoğunlukla tarayıcıda çalışan kısmıdır.
Web'de HTML, CSS ve JavaScript ile kurulur.
Veriyi, API'ler aracılığıyla backend'i çağırarak alır ve değiştirir.
19HTMLHiper Metin İşaretleme Dili: HTML, başlık, paragraf, bağlantı, görsel ve form gibi öğelerle web sayfalarının yapısını ve içeriğini tanımlayan işaretleme dilidir.
HTML, web sayfası içeriğinin yapısını ve anlamını tanımlar.
İçerik etiketlerle işaretlenir ve etiketler nitelik taşıyabilir.
Tarayıcılar HTML'i, CSS ve JavaScript'in üzerinde çalıştığı DOM'a dönüştürür.
20HTTPHiper Metin Aktarım Protokolü: HTTP, tarayıcıların, uygulamaların ve sunucuların basit bir istek-yanıt döngüsüyle web sayfaları ve veri alışverişi yapmasını sağlayan protokoldür.
HTTP, bir dizi istek ve yanıt olarak çalışır.
GET ve POST gibi metotlar istenen eylemi tanımlar.
200 ve 404 gibi durum kodları sonucu özetler.
21HTTP Başlığı: HTTP başlığı, bir HTTP isteği ya da yanıtıyla gönderilen ad-değer satırıdır; içerik türü, önbellek kuralları ya da kimlik bilgileri gibi ayrıntıları taşır.
Başlıklar, bir HTTP isteğini ya da yanıtını tarif eden Name: value satırlarıdır.
İstekler onları kimlik bilgileri ve tercihler için, yanıtlar biçim ve işleme talimatları için kullanır.
En yaygınları arasında Content-Type, Authorization, Cache-Control ve Set-Cookie vardır.
22HTTP Durum Kodu: HTTP durum kodu, sunucunun her yanıtla gönderdiği ve isteğin başarılı mı, başarısız mı olduğunu ya da ek işlem mi gerektirdiğini bildiren üç haneli sayıdır.
Her HTTP yanıtı üç haneli bir durum kodu içerir.
İlk hane sınıfı verir: 1xx bilgi, 2xx başarı, 3xx yönlendirme, 4xx istemci hatası, 5xx sunucu hatası.
4xx hatası isteğin değişmesi gerektiği; 5xx hatası ise sunucunun başarısız olduğu anlamına gelir.
23Hydration: Hydration, tarayıcıdaki JavaScript'in sunucuda üretilmiş HTML'i devralıp olay yöneticilerini ve durumu bağlayarak sayfayı etkileşimli hale getirdiği adımdır.
Hydration, sunucuda üretilmiş veya statik HTML'i etkileşimli hale getirir.
Framework, olay yöneticilerini ve durumu mevcut HTML'e bağlar.
Hydration bitene kadar sayfa hazır görünüp yanıt vermeyebilir.
24iframeSatır İçi Çerçeve: iframe, başka bir web sayfasını mevcut sayfaya gömen ve sıkça videolar, haritalar, ödeme formları ve üçüncü taraf widget'lar için kullanılan HTML öğesidir.
Bir <iframe>, kendi DOM'u ve betikleri olan ayrı bir web sayfasını mevcut sayfanın içine gömer.
Aynı kaynak politikası, farklı kaynaklı iframe'leri yalıtır; bunlar üst sayfayla postMessage() ile konuşur.
sandbox ve allow nitelikleri gömülü bir sayfanın neler yapabileceğini sınırlar.
25JavaScript: JavaScript, web tarayıcılarında sayfaları etkileşimli hale getiren ve Node.js gibi çalışma ortamlarıyla sunucularda da çalışan programlama dilidir.
JavaScript, web sayfalarına etkileşim ve mantık katar.
Tüm büyük tarayıcılar onu eklenti gerektirmeden çalıştırır.
Yavaş işlemleri promise'ler ve async/await ile asenkron olarak yönetir.
26jQuery: jQuery, öğe seçmeyi, olay yönetimini, animasyonu ve AJAX isteklerini tüm tarayıcılarda çalışan kısa bir sözdizimiyle kolaylaştıran JavaScript kütüphanesidir.
jQuery, ilk olarak 2006'da yayımlanan bir JavaScript kütüphanesidir.
Tarayıcı farklarını kısa $ sözdizimiyle yumuşattı.
DOM seçimini, olayları, animasyonu ve AJAX'ı basitleştirdi.
27JSXJavaScript XML: JSX, kodun içine HTML benzeri işaretleme yazmayı sağlayan bir JavaScript sözdizimi uzantısıdır; çoğunlukla React ile arayüzün nasıl görüneceğini tarif eder.
JSX, JavaScript içinde HTML'e benzeyen işaretleme yazmayı sağlar.
2013'te React ile birlikte tanıtıldı.
Bir derleyici her etiketi bir fonksiyon çağrısına çevirir; TSX TypeScript biçimidir.
28Lazy LoadingTembel Yükleme: Lazy loading, görsel, video, betik gibi kaynakların yüklenmesini gerçekten gerekene, genellikle görünür alana kaydırılana kadar erteleyen tekniktir.
Lazy loading, bir kaynağın çekilmesini gerekene kadar erteler.
Görsellerde ve iframe'lerde loading="lazy", yerel tarayıcı lazy loading'ini etkinleştirir.
IntersectionObserver ve dinamik import() özel ve JavaScript durumlarını karşılar.
29Local Storage: Local storage, bir sitenin kullanıcının cihazında anahtar-değer çiftleriyle metin saklamasını sağlayan tarayıcı özelliğidir; veri tarayıcı kapansa da kalır.
Local storage, tarayıcıda her kaynak için ayrı olarak string anahtar-değer çiftleri saklar.
Veri, tarayıcı kapandıktan sonra da kod veya kullanıcı silene kadar kalır.
sessionStorage aynı API'ye sahiptir ama verisi sekme kapanınca silinir.
30Media Query: Media query, stilleri yalnızca cihaz ya da tarayıcı ekran genişliği, yönelim veya koyu renk şeması gibi koşullara uyduğunda uygulayan CSS kuralıdır.
Media query, cihaz veya görüntü alanı koşulları doğru olduğunda CSS uygular.
Genişlik tabanlı sorgular, duyarlı yerleşimler için kırılma noktalarını tanımlar.
prefers-color-scheme ve prefers-reduced-motion gibi tercih sorguları kullanıcı ayarlarına saygı gösterir.
31MinificationKod Küçültme: Minification, davranışı değiştirmeden boşlukları, yorumları ve uzun adları silerek kod dosyalarını küçülten işlemdir; böylece web sayfaları daha hızlı iner.
Minification, davranışı değiştirmeden boşlukları, yorumları ve uzun adları kaldırır.
JavaScript, CSS ve HTML için geçerlidir ve genellikle üretim derlemelerinde çalışır.
Source map'ler, hata ayıklama için küçültülmüş kodu özgün koda bağlar.
32Next.js: Next.js, React'e yönlendirme, sunucu tarafı render, statik üretim ve sunucu kodu ekleyen bir framework'tür; bütün bir web uygulaması tek projede geliştirilir.
Next.js, eksiksiz web uygulamaları için bir React framework'üdür.
app dizinindeki klasörler ve dosyalar yönlendirmeleri belirler.
Server Components sunucuda çalışır; istemci bileşenleri etkileşim ekler.
33npmNode Package Manager: npm, Node.js'in varsayılan paket yöneticisi ve dünyanın en büyük yazılım deposudur; bir projenin bağımlılıklarını indirir ve sürümlerini takip eder.
npm, Node.js'in paket yöneticisi ve en büyük JavaScript paket deposudur.
package.json bağımlılıkları ve betikleri listeler; package-lock.json tam sürümleri sabitler.
npm install node_modules'u doldurur; npm run betikleri çalıştırır; npx paket komutlarını çalıştırır.
34Polyfill: Polyfill, modern bir web özelliğini onu desteklemeyen eski tarayıcılara ekleyen koddur; böylece standart API her yerde özel durumlar olmadan kullanılabilir.
Polyfill, eksik bir web özelliğini tarayıcının zaten sahip olduğu özelliklerle uygular.
Önce özelliği algılar ve yalnızca yoksa doldurur.
Transpiler'lar yeni söz dizimini yeniden yazar; polyfill'ler çalışma zamanında eksik fonksiyon ve nesneleri ekler.
35Progressive EnhancementAşamalı Geliştirme: Progressive enhancement, herkes için çalışan temel bir sayfayla başlayıp tarayıcı desteklediğinde daha zengin özellikler ekleyen web tasarım stratejisidir.
Düz HTML'de çalışan içerik ve işlevsellikle başlayın.
Sunum için CSS'i, daha zengin etkileşim için JavaScript'i isteğe bağlı katmanlar olarak ekleyin.
Betikler başarısız olduğunda, yavaş yüklendiğinde veya engellendiğinde temel görevler çalışmaya devam eder.
36PWAAşamalı Web Uygulaması: PWA, modern web API'leriyle geliştirilen, bir cihaza kurulabilen, çevrimdışı çalışabilen ve tek kod tabanından yerel uygulama gibi davranan bir web sitesidir.
PWA, kurulabilen ve uygulama gibi kullanılabilen bir web sitesidir.
HTTPS, bir web app manifest ve bir service worker gerektirir.
Service worker'lar dosyaları önbelleğe alarak uygulamanın çevrimdışı çalışmasını sağlar.
37React: React, veri değişince otomatik güncellenen, yeniden kullanılabilir bileşenlerle kullanıcı arayüzü kurmaya yarayan açık kaynaklı JavaScript kütüphanesidir.
React, kullanıcı arayüzü geliştirmek için bir JavaScript kütüphanesidir.
Arayüzler, prop alan ve durum tutan yeniden kullanılabilir bileşenlerden oluşur.
JSX, JavaScript içinde HTML benzeri işaretleme yazmanızı sağlar.
38React Hook'ları: React hook'ları, useState ve useEffect gibi, fonksiyon bileşenlerinin state tutmasını, yan etki çalıştırmasını ve mantık paylaşmasını sağlayan fonksiyonlardır.
Hook'lar, fonksiyon bileşenlerine React'in özelliklerini veren ve adı use ile başlayan fonksiyonlardır.
useState state tutar; useEffect render'dan sonra yan etkileri çalıştırır.
Hook'ları yalnızca en üst düzeyde ve her render'da aynı sırayla çağırın.
39Sanal DOM: Sanal DOM, sayfanın öğe ağacının JavaScript belleğinde tutulan hafif bir kopyasıdır; arayüz kütüphaneleri onu karşılaştırarak gerçek DOM'u verimli günceller.
Sanal DOM, sayfanın öğe ağacının bellekteki JavaScript kopyasıdır.
Kütüphaneler yeni sanal ağacı eskisiyle karşılaştırır ve yalnızca değişeni günceller.
Asıl yararı, elle yazılmış DOM güncellemelerine göre ham hız değil, bildirimsel koddur.
40SEOArama Motoru Optimizasyonu: SEO, arama motorlarının bir sitenin sayfalarını bulup anlaması ve ilgili aramalarda sıralaması için içeriği ve teknik altyapıyı iyileştirme pratiğidir.
SEO, sayfaların arama motorlarınca keşfedilmesine, dizine eklenmesine ve sıralanmasına yardımcı olur.
Teknik SEO; taranabilir HTML, başlıklar, canonical URL'ler ve site haritalarını içerir.
SSR ve SSG, içeriği JavaScript olmadan tarayıcılara görünür kılar.
41Service Worker: Service worker, tarayıcının arka planda, sayfadan ayrı çalıştırdığı, ağ isteklerini yakalayıp çevrimdışı kullanımı ve push mesajlarını sağlayan betiktir.
Service worker, bir sitenin ağ isteklerini yakalayabilen arka plan betiğidir.
Çevrimdışı desteği, önbellek stratejilerini, push bildirimlerini ve arka planda eşzamanlamayı mümkün kılar.
DOM'a erişimi yoktur ve localhost dışında HTTPS gerektirir.
42SPATek Sayfalı Uygulama: SPA, tek bir HTML sayfası yükleyip içeriği JavaScript ile güncelleyen ve görünümler arası geçişte sayfayı yeniden yüklemeyen web uygulamasıdır.
SPA, tek bir HTML sayfası yükler ve onu JavaScript ile günceller.
Gezinme, tam sayfa yenilemesi olmadan tarayıcıda yönetilir.
Veri genellikle bir API'den JSON olarak gelir.
43SSGStatik Site Üretimi: SSG, bir sitenin sayfalarını derleme zamanında düz HTML dosyalarına dönüştüren tekniktir; sunucular ya da CDN'ler bunları ek iş yapmadan anında sunabilir.
SSG, sayfaları derleme zamanında bir kez HTML dosyalarına dönüştürür.
Her ziyaretçi, çoğunlukla bir CDN'den gelen aynı hazır dosyaları alır.
Statik sayfalar hızlıdır, barındırması ucuzdur ve ölçeklemesi kolaydır.
44SSRSunucu Tarafı Render: SSR, sunucunun her istekte bir sayfanın tam HTML'ini oluşturduğu ve böylece kullanıcıların ile arama motorlarının hazır içeriği hemen aldığı tekniktir.
SSR, her istek için HTML'i sunucuda üretir.
Kullanıcılar, özellikle yavaş cihazlarda, içeriği daha erken görür.
Tarayıcılar eksiksiz içerik alır; bu da SEO'ya yardımcı olur.
45State ManagementDurum Yönetimi: State management (durum yönetimi), bir uygulamanın çalışırken değişen verileri nasıl saklayıp güncellediği, paylaştığı ve arayüzü bunlarla senkron tuttuğudur.
Durum, değişen ve kullanıcıların gördüğünü etkileyen veridir.
Yerel durum tek bir bileşende kalır; paylaşılan durum context'e ya da bir store'a taşınır.
Redux, Zustand, Pinia ve NgRx yaygın store kütüphaneleridir.
46Svelte: Svelte, tarayıcıda büyük bir framework çalıştırmak yerine bileşenleri derleme sırasında küçük, verimli JavaScript'e derleyen bir ön yüz framework'üdür.
Svelte bileşenleri derleme sırasında verimli JavaScript'e derler.
DOM'u sanal DOM olmadan doğrudan günceller.
Svelte 5, reaktivite için $state ve $derived gibi rune'lar kullanır.
47Tailwind CSS: Tailwind CSS, utility-first bir CSS framework'üdür: özel stil dosyaları yerine öğeleri doğrudan HTML'de küçük, tek amaçlı sınıflarla biçimlendirirsiniz.
Tailwind CSS, öğeleri küçük ve tek amaçlı utility sınıflarıyla biçimlendirir.
md:, hover: ve dark: gibi ön ekler stilleri koşullu uygular.
Ortak bir tasarım ölçeği boşlukları, renkleri ve boyutları tutarlı tutar.
48Throttling: Throttling, bir fonksiyonu ne kadar sık çağrılırsa çağrılsın aralık başına en fazla bir kez çalıştırır; böylece kaydırma işleyicileri düzenli güncellenir.
Throttling, bir fonksiyonu ne sıklıkla çağrılırsa çağrılsın aralık başına en fazla bir kez çalıştırır.
Kaydırma, yeniden boyutlandırma ve sürükleme gibi sürekli eylemlere uyar.
Debouncing olayların durmasını bekler; throttling ise olaylar sürerken düzenli bir hız tutturur.
49Transpiler: Transpiler, kaynak kodu bir dilden ya da dil sürümünden benzer soyutlama düzeyindeki bir başkasına, örneğin TypeScript'ten JavaScript'e çeviren araçtır.
Transpiler, kaynak kodu benzer soyutlama düzeyindeki başka bir kaynak koda dönüştürür.
Yaygın işleri: TypeScript'ten JavaScript'e, modern JavaScript'ten eski JavaScript'e ve JSX'ten fonksiyon çağrılarına.
Kodu AST'ye ayrıştırır, ağacı dönüştürür ve yeni kodu yazdırır.
50Tree Shaking: Tree shaking, hangi ES modül dışa aktarımlarının gerçekten import edildiğine bakarak hiç kullanılmayan kodu son paketten çıkaran bir derleme optimizasyonudur.
Tree shaking, hiç import edilmeyen dışa aktarımları son paketten çıkarır.
ES modüllerinin statik import ve export söz dizimine bağlıdır.
Yan etkiler kaldırmayı engelleyebilir; package.json'daki "sideEffects": false bundler'lara yardımcı olur.
51TypeScript: TypeScript, JavaScript üzerine statik tipler ekleyerek birçok hatayı kod çalışmadan yakalayan ve düz JavaScript'e derlenen bir programlama dilidir.
TypeScript, isteğe bağlı statik tiplerle güçlendirilmiş JavaScript'tir.
Tip hataları kod çalışmadan önce bildirilir.
Tipler derleme sırasında kaldırılır ve geriye düz JavaScript kalır.
52UI BileşeniUser Interface Component: UI bileşeni, buton, form ya da kart gibi arayüzün yeniden kullanılabilen bir parçasıdır; işaretlemesini, stilini ve davranışını bir arada taşır.
UI bileşeni, arayüzün yeniden kullanılabilen ve kendi başına çalışan bir parçasıdır.
Props denen girdiler alır ve işaretlemesini, stillerini ve davranışını bunlardan üretir.
Sayfalar bileşenlerin iç içe yerleştirilmesiyle kurulur.
53URLTekdüzen Kaynak Bulucu: URL, web'deki bir kaynağın adresidir; şema, sunucu adı, yol ve sorgu dizesi gibi bölümlerden oluşur ve tarayıcıya kaynağın nereden, nasıl alınacağını söyler.
URL, bir kaynağın adresidir; nerede olduğunu ve nasıl alınacağını birleştirir.
Ana bölümleri şema, sunucu adı, isteğe bağlı port, yol, sorgu dizesi ve parçadır.
# sonrasındaki parça tarayıcıda kalır ve sunucuya gönderilmez.
54Vite: Vite, geliştirmede kodu tarayıcıya neredeyse anında sunan ve canlı ortam için optimize edilmiş dosyalar halinde paketleyen hızlı bir web derleme aracıdır.
Vite, web projeleri için hızlı bir geliştirme sunucusu ve derleme aracıdır.
Geliştirmede doğal ES modülleri sunar ve dosyaları istek üzerine dönüştürür.
Sıcak modül değişimi, değişen modülleri sayfayı tamamen yenilemeden günceller.
55VueVue.js: Vue, kolay öğrenilmesi ve reaktif verisiyle bilinen, bileşenlerden kullanıcı arayüzü kurmaya yarayan açık kaynaklı bir JavaScript framework'üdür.
Vue, kullanıcı arayüzü kurmak için aşamalı bir JavaScript framework'üdür.
Reaktif veri, sayfanın tam olarak onu kullanan kısımlarını günceller.
HTML tabanlı şablonlar v-if, v-for ve @click gibi direktifler kullanır.
56Web Erişilebilirliği: Web erişilebilirliği, ekran okuyucu, klavye, altyazı ya da yakınlaştırma kullananlar dahil herkesin kullanabildiği web siteleri geliştirme pratiğidir.
Erişilebilirlik, web sitelerini engelli kişilerin kullanımına açar.
WCAG ana standarttır ve AA düzeyi yaygın hedeftir.
Anlamsal HTML, klavye ve ekran okuyucu desteğini kendiliğinden sağlar.
57Web Tarayıcısı: Web tarayıcısı, sunuculardan web sayfalarını alıp HTML, CSS ve JavaScript'i ekranda gördüğünüz etkileşimli sayfalara dönüştüren uygulamadır.
Tarayıcı, sunuculardan web sayfaları ister ve bunları gösterir.
Render motoru HTML ve CSS'i DOM'a, yerleşime ve piksellere dönüştürür.
JavaScript motoru, sayfaları etkileşimli kılan betikleri çalıştırır.
58Web Worker: Web worker, JavaScript'i bir arka plan iş parçacığında çalıştıran tarayıcı özelliğidir; böylece ağır hesaplamalar çalışırken sayfanın arayüzü donmaz.
Web worker, JavaScript'i ana arayüz iş parçacığından ayrı bir arka plan iş parçacığında çalıştırır.
Sayfa ve worker yalnızca postMessage() ve message olayları aracılığıyla konuşur.
Worker'lar DOM'a dokunamaz ama fetch, zamanlayıcılar ve WebAssembly kullanabilir.
59WebAssembly: WebAssembly, web tarayıcılarında yerele yakın hızda çalışan ve C++, Rust, Go gibi dillerle hızlı web kodu yazılmasını sağlayan kompakt bir ikili kod biçimidir.
WebAssembly (Wasm), yerele yakın hızda çalışan ikili bir biçimdir.
C++, Rust ve Go gibi dillerdeki kod Wasm'a derlenebilir.
Güvenli bir sandbox içinde çalışır ve JavaScript ile birlikte kullanılır.
60Webpack: Webpack, uygulamanın import'larını izleyip JavaScript, CSS, görsel ve diğer dosyaları tarayıcıya uygun paketlerde birleştiren modül paketleyicisidir.
Webpack, bir uygulamanın modüllerini ve varlıklarını tarayıcı için dosyalarda paketler.
Bir giriş dosyasından her import'u izleyerek bir bağımlılık grafiği kurar.
Loader'lar JavaScript olmayan dosyaları ele alır; eklentiler derlemeyi genişletir.
61WebSocket: WebSocket, tarayıcı ile sunucu arasında tek bir bağlantıyı açık tutarak her iki tarafın istediği an birbirine anında mesaj göndermesini sağlayan protokoldür.
WebSocket, istemci ile sunucu arasında kalıcı, çift yönlü bir bağlantı sağlar.
WebSocket protokolüne yükseltilen bir HTTP isteği olarak başlar.
Her iki taraf da düşük ek yükle istediği zaman mesaj gönderebilir.

Kitaba dönİpucu: Bir kopyasını saklamak için yazdırma penceresinde “PDF olarak kaydet”i seçin.