Frontend alanında kendini geliştirmek isteyenler. Html, css, javascript derken bir çok teknolojiyi de yanında duyup anlam karmaşası yaşayanlar için yazımızın devamında bunların hepsini biliyor olacaksınız.

Frontend alanı web dünyasının zevkli ve zamanla profesyonellik isteyen alanlarından birisidir. Büyük ve insan ihtiyaçlarının çok olması ile birlikte bu alanda birçok teknoloji de bulunmaktadır. Basit web projelerinden zor seviyelere girmek için zamanla üstüne kata kata öğrenmeniz gereken frontend teknolojileri için kaydırın.

Frontend Alanında Kullanılan Teknolojiler

Temel Web Teknolojileri

• HTML (HyperText Markup Language) : Html ile bir websitesinin iskeletini kolaylıkla kodlayabilirsiniz. İçine aldığı css ve js kütüphaneleri ile daha da gösterişli ve kullanışlı web tasarımları yapmamıza yardımcı olur. Veriyi işleyemez tek başına Javascript ile beraber çalışması gerekir. tagler kullanır <p>, <h1>,<img> gibi. Kolay bir dildir.
• CSS (Cascading Style Sheets) : Html ile oluşturulmuş web sitenin iskeletini renklendirir, biçimlendirir, animasyonlar yapılır. Html uzantılı dosyanın içine dahili olarak <style> etikketi ile harici olarak da .css dosyası aracılığıyla uygulanır. Media queries özelliği ile responsive tasarım olanağı sağlar. css dosyaları html içine gömülmediği için önbelleğe alınabilir buda sayfanızın hızlı yüklenmesini sağlar.
• JavaScript (JS) : Etkileşim ile ilgili olayların yapıldığı dildir. Formun doğrulanması, tuşların yada butonların istenilen işleri yapması ile ilgili olayları temsil eder. Html dosyanın içine <script src=”denemescript.js></script> olarak dahil edilir. DOM (Document Object Model) ile çalışabilir. AJAX, Fetch API teknolojileri ile sitede asenkron işlemlem yapılabilinir. ES6+ ile daha temiz javascript kodları yazmak kolaylaştı, html ve css göre daha zordur. Birden fazla framework’ü vardır ve npm (node package manager) ile hazır paketlerini de kullanabilirsiniz.

JavaScript Framework’leri ve Kütüphaneleri

• React.js : Meta tarafından, sitelerin UI tarafı için özellikle tek sayfa uygulamalarında (SPA) kullanılması amacıyla geliştirilmiştir. Genellile Redux ile ya da Context API ile kullanılır. Kullanımı yaygındır.
• Vue.js : Basit ve esnek frameworktür. Küçük projelerde ve SPA larda kullanıma uygundur. HTML’e çok benzeyen özel bir sözdizimiyle template syntax kullanılır. Reaktif Veri Sistemi ile değişen veri otomatik olarak sayfanın görünümüne yansır. Vuex ile tüm verileri merkezi bir yerden kontrol edebilirsiniz. Vue Router ile de sayfalar arası geçişi tarayıcı dostu hale getirebilirsiniz.
• Angular : Google tarafından TypeScript tabanlı framework’tür. Kurumsal ve büyük projelerde/SPA lar geliştirmede tercih edilir. Mvc mimarisine benzer modüler mimarisi vardır.
• Svelte : Hızlı ve hafif uygulamalar oluşturma da tercih edilir daha çok. Sanal DOM olmadığı için kod derlendiği gibi optimize edilir.
• Preact : React’a çok benzer ama onun daha küçük halidir. dosya boyutu düşük olduğu projelerde tercih edilir. Performansı etkiler. Mobil dostu ve hızlıdır. Gömülü sistemlerde özellikle tercih edilir.
• Solid.js : Söz dizimi React’a benzer fakat performansı en üst seviyede tutmayı amaçlayan framework’tür. Gerçek Dom ile çalışır, Fine-grained reactivity ile tüm sayfa değilde sadece etkilenen alanlar güncellenir.
• Electron.js : Github tarafından geliştirilmiştir. temel web teknolojisi ile web geliştirmede kullanılır. Chromium ve Node.js ile beraber kullanılır. Uygulamaları daha ağırdır fakat çok yönlü olabilir.

Diğer teknolojileri ise Next.js React tabanlıdır ve SEO için kullanışlıdır. Nuxt.js ise Vue tabanlıdır aynı şekilde SEO dostudur. Astro performans odaklıdır ihtiyaç duyulan js’i yükler. Qwik de sadece ihtiyaç duyulan kodu yükler. Lit ise hafif bir frameworktür.

CSS Framework’leri ve Araçları

• Bootstrap : Mobil uyumlu, hızlı web siteleri oluşturmada kullanılır. Hazır butonları, formları, menüleri ve javascript bileşenleri ile daha kolay tasarımlar oluşturmamızı sağlar. Kurumsal sitelerde ve panellerde sıkça kullanılır.
• Tailwind CSS : Html üzerinden stil sağlar. Performans önceliğidir ve css’i minimum seviyede tutar. Utility-first (yardımcı sınıf odaklı) yaklaşımı ile html kodu üzerinden hızlı bir şekilde stil vermemizi sağlar. React ile entegrasonu yaygın şekilde olur.
• Sass/SCSS : CSS in daha fonksiyonel olmasını sağlar. Özellikle büyük projelerde stil lerin css kodların tekrarını en aza indirir.
• Less : CSS’in daha gelişmiş ve dinamik bir sürümüdür. CSS in ön işlemcisi olarak çalışır. Kod tekrarını azaltır ve derlendiğinde .css dosyasına dönüşür.
• CSS-in-JS (Styled Components, Emotion) : JS dosyalarının içine Css yazmamızı sağlar.

Durum Yönetim Araçları

• Redux : Özellikle React ile beraber kullanılır. Tüm verileri bir merkezde toplar. Componentler arası veri aktarımını kolaylaştırır. Karmaşık veri akışını kontrol altına alır. Gelişmiş debug araçları mevcuttur.
• Context API (React) : React’ın durum yönetim aracıdır. Küçük projeler için uygundur.
• MobX : Reaktif programlama yaklaşımıyla çalışan güçlü bir state yönetim kütüphanesidir. Değişiklikleri izleyip sadece değişen yerleri renderlar.
• Zustand : API yapısı basittir ve Redux’un alternatifi diye geçer. TypeScript ile oldukça uyumlu çalışır.
• Pinia (Vue) : Vuex’in yerine geçmek üzere geliştirilmiştir. Vue Composition API ile tam uyumlu. Modüler yapı sayesinde her store ayrı yönetilebilir.

Frontend Build Araçları

• Webpack : Diğer üçüne göre en yaygın olan modül toplayıcısıdır. Uygulamanızda kullandığınız tüm js, css ve diğer dosyaları tek bir paket haline getirir. Karmaşık ve büyük projelerde bile kolaylıkla kullanılır.
• Vite : Modern tarayıcıların ES modül desteğini kullanır ve daha hızlı geliştirme deneyimi sunabilir. Vue ve React için uygundur.
• Parcel : Hızlı başlar, basit projelerde kurulum kolaylığı sağlar. Büyük projelerde performans zaman zaman düşebilir. TypeScript, JSX, Sass gibi dosya türlerini otomatik tanır. Küçük-orta ölçekli projeler için uygundur.

Test Araçları

• Jest : JS ‘in test frameworküdür. React ile daha çok kullanılır. Meta geliştirmiştir. nit test ve snapshot test için kullanılır. UI etkileşim testleri için yeterli değildir o işi de Cypress gibi araçlara bırakır.
• Testing Library (React/Vue Testing Library) : Jest ile birlikte kullanılır. Kullanıcı odaklı bileşen testleri yapmamızı sağlar yani Gerçek kullanıcı davranışlarını taklit eder.
• Cypress : Tam bir test otomasyon çözümüdür. Gerçek tarayıcı üzerinde end-to-end (E2E) testler yapmanı sağlar. Testler gerçek tarayıcıda çalışır. Ekran görüntüsü, video alma gibi araçlarla gelişmiş hata tespiti vardır. GUI ile test akışını adım adım izleme imkanı sağlar. Fakat backend testleri için kullanılamaz. API testlerini sınırlı çerçevede yapar.
• Vitest : Vite tabanlı ve hızlı test çözümü sunar.

Form ve Validation Kütüphaneleri

• Formik (React) : Form yönetimini kolaylaştırır.
• React Hook Form : Performans odaklı form yönetimi.
• Yup : Form validation şemaları oluşturmak için.
• Final Form : Framework-agnostic bir form kütüphanesi.

UI Component Kütüphaneleri

• Material UI (MUI) : Google’ın Material Design’ını uygular.
• Ant Design : Enterprise seviyesi UI component’leri sunar.

Static Site Generators (SSG)

• Next.js : React tabanlı, SSR ve SSG desteği sunar.
• Gatsby : GraphQL ile entegre statik sayfalar oluşturur.
• Nuxt.js : Vue.js için SSR ve SSG çözümü.
• Astro : Düşük JavaScript yüklü hızlı SSG.

TypeScript

• JavaScript’e statik tip ekleyerek geliştirici deneyimini iyileştirir.
• Angular, React ve Vue ile uyumludur.

WebAssembly (Wasm)

• C++, Rust gibi dillerle yazılan kodları tarayıcıda çalıştırmayı sağlar.
• Performans gerektiren uygulamalarda kullanılır.

Grafik ve Animasyon Kütüphaneleri

• Three.js : 3D grafikler için WebGL tabanlı kütüphane.
• D3.js : Veri görselleştirme için kullanılır.
• GSAP (GreenSock) : Yüksek performanslı animasyon kütüphanesi.
• Framer Motion : React için animasyon kütüphanesi.

Progressive Web Apps (PWA)

• Workbox : Service Worker’ları yönetmek için Google’ın kütüphanesi.
• Lighthouse : PWA performans metriği sağlar.

API İletişim Araçları

• Axios : HTTP istekleri için popüler bir kütüphane.
• Fetch API : Modern tarayıcıların sunduğu yerel API.
• GraphQL (Apollo Client, URQL) : REST alternatifi, veri çekmeyi optimize eder.
• tRPC : TypeScript ile end-to-end tip güvenli API’lar.

Mobil Geliştirme (Hybrid)

• React Native : JavaScript ile cross-platform mobil uygulama.
• Capacitor : Web teknolojilerini mobilde çalıştırmak için.
• Ionic : UI component’leri ile hybrid mobil çözüm.

Diğer Araçlar

• ESLint / Prettier : Kod kalitesi ve formatlama için.
• Babel : JavaScript’in yeni sürümlerini eski tarayıcılarda çalıştırır.
• Storybook : UI component’leri izole şekilde geliştirmek için.
• Micro Frontends : Büyük uygulamaları parçalara bölme mimarisi.