Frontend Nedir? Frontend Developer Ne Yapar?

Frontend’de Kullanılan Temel Teknolojiler

Her frontend developer üç temel teknolojiyle başlar. Bunların resmi ve güncel referansı MDN Web Docs sitesidir.

• HTML: Sayfanın yapısını tanımlar. Başlıklar, paragraflar, görseller ve formlar HTML ile kurulur.

• CSS: Sayfanın görünümünü belirler. Renk, yerleşim, yazı tipi ve animasyonlar CSS ile yönetilir.

• JavaScript: Sayfaya davranış kazandırır. Bir düğmeye basıldığında ne olacağını, formun nasıl doğrulanacağını ve verinin nasıl yükleneceğini JavaScript belirler.

Bu üçlünün üzerine, projeyi hızlandıran araçlar eklenir.

Frontend Frameworkleri

Framework, sık yapılan işleri hazır bir yapıyla çözen kod çerçevesidir. En çok kullanılanlar şunlardır:

• React: Meta’nın geliştirdiği, arayüzü bileşenlere bölen bir kütüphane. Geniş bir ekosistemi var.

• Next.js: React üzerine kurulu, sunucu taraflı render ve yönlendirme gibi özellikleri hazır sunan framework. React ile Next.js’in birlikte neden iyi çalıştığını bu yazımızda anlattık.

• Vue: Öğrenmesi görece kolay, esnek bir framework.

• Angular: Google’ın geliştirdiği, kurallı ve kapsamlı bir framework. Büyük kurumsal projelerde sık tercih edilir.

Hangisinin seçileceği projeye, ekibin deneyimine ve bakım planına bağlıdır. Tek bir “en iyi” framework yoktur.

Yardımcı Araçlar

TypeScript (JavaScript’e tip güvenliği ekler), Tailwind CSS (hızlı stil yazımı), Git (sürüm kontrolü) ve tasarım araçlarıyla çalışma (Figma gibi) modern frontend işinin parçasıdır.

Frontend ve Backend Farkı

İki katman birbirini tamamlar, ancak sorumlulukları farklıdır.

İki katman API’ler üzerinden konuşur. API’nin ne olduğunu merak ediyorsanız API nedir yazımıza bakabilirsiniz. Arka tarafın ayrıntılarını ise Node.js ile backend geliştirme yazımızda anlattık.

Hem frontend hem backend yazabilen yazılımcıya full stack developer denir. Küçük projelerde bu kişi işin tamamını yapabilir. Büyük projelerde ise iki alan ayrı uzmanlarla yürütülür.

Frontend Developer Nasıl Olunur?

Bu işe başlamak için bir üniversite diploması şart değildir, ancak sağlam temeller gerekir. Önerdiğimiz sıra şöyledir:

1. HTML ve CSS ile statik bir sayfa yapın. Sonra responsive hale getirin.

2. JavaScript’i temelden öğrenin: değişkenler, fonksiyonlar, DOM, olaylar ve asenkron işlemler.

3. Bir framework seçin (çoğu kişi için React) ve küçük bir proje yapın.

4. Git kullanmayı ve bir API’den veri çekmeyi öğrenin.

5. Erişilebilirlik ve performans temellerini ekleyin.

6. Gerçek projelerden oluşan bir portfolyo hazırlayın.

Bu yolda en çok işe yarayan şey, öğrendiğinizi küçük projelerle hemen uygulamaktır.

Mobil Uygulamada Frontend

Mobil uygulamada frontend, uygulamanın ekranlarını ve etkileşimlerini oluşturan katmandır. Burada seçenekler web’den biraz farklıdır:

• Native geliştirme: iOS için Swift, Android için Kotlin kullanılır. Platformun tüm özelliklerine tam erişim ve yüksek performans sağlar. iOS tarafı için Swift ile uygulama geliştirme yazımıza bakabilirsiniz.

• Çapraz platform geliştirme: Flutter ya da React Native ile tek kod tabanından iki platform için uygulama çıkarılır. Hız ve maliyet avantajı sunar. Flutter yaklaşımı için Flutter uygulama geliştirme stratejisi yazımız var.

Mobil arayüzün iyi çalışması için tasarım tarafı da önemlidir. Mobil uygulama tasarımı rehberimiz ve UI/UX tasarım süreci yazımız bu konuya odaklanır. Ekibin arayüzde tutarlılık kurması için tasarım sistemi yol haritası da işe yarar.

Frontend Teknolojisi Seçerken Dikkat Edilecekler

• Ekip deneyimi: Ekibin bildiği teknoloji, yeni ve popüler olandan çoğu zaman daha hızlı sonuç verir.

• Performans ihtiyacı: Çok hızlı etkileşim ya da yoğun animasyon gerekiyorsa native bir yaklaşım düşünülür.

• Arama motoru görünürlüğü: Sayfaların Google’da bulunması önemliyse sunucu taraflı render sunan çözümler (Next.js gibi) avantaj sağlar.

• Bakım ve işe alım: Seçilen teknolojide geliştirici bulmak ve kodu yıllarca sürdürmek mümkün olmalıdır.

• Ürünün ömrü: Kısa ömürlü bir kampanya sayfası ile yıllarca büyüyecek bir ürün aynı kararı gerektirmez.

React ve Next.js tabanlı web projeleri için React web geliştirme ve Next.js geliştirme sayfalarımıza göz atabilirsiniz.

Frontend Performansı ve Erişilebilirlik

İyi frontend işini ortalamadan ayıran iki konu vardır.

Performans. Kullanıcılar yavaş sayfayı terk eder. Geliştiriciler görselleri sıkıştırarak, kodu yalnızca gerektiğinde yükleyerek, dosyaları önbelleğe alarak ve gereksiz yeniden çizimleri önleyerek hızı artırır. Hız aynı zamanda arama görünürlüğünü de etkiler, yani yalnızca mühendislik değil pazarlama konusudur.

Erişilebilirlik. Erişilebilir bir arayüz, ekran okuyucu, klavye ya da sesli komut kullanan kişiler için de çalışır. Bunun için anlamlı HTML, yeterli renk kontrastı, görünür odak durumu ve görseller için metin alternatifleri gerekir. Erişilebilirlik çoğu zaman hukuki ve etik bir gerekliliktir, ayrıca herkes için kullanılabilirliği artırır.

Modern Frontend Mimarisi

Büyük arayüzler tek bir dosyada yazılmaz. Modern frontend şu fikirler üzerine kurulur:

• Bileşenler: Arayüz, yeniden kullanılabilir küçük parçalara bölünür. Bir düğme ya da kart bir kez yazılır, her yerde kullanılır.

• Durum yönetimi (state): Ekranda gösterilen verinin nerede tutulacağı ve nasıl güncelleneceği baştan düşünülür.

• Veri çekme: Backend’den gelen veri önbelleğe alınır, yüklenme ve hata durumları tasarlanır.

• Test: Kritik akışlar, örneğin giriş yapma ve ödeme, otomatik testlerle korunur.

Sık Yapılan Frontend Hataları

• Mobili yok saymak: Önce masaüstünü tasarlayıp sonra telefona sığdırmak çoğunlukla başarısız olur.

• Erişilebilirliği atlamak: Sonradan eklemek, baştan düşünmekten pahalıdır.

• Gereğinden ağır araçlar seçmek: Basit bir sayfaya büyük bir framework eklemek yavaşlatır.

• Farklı tarayıcı ve cihazlarda test etmemek: Bir makinede çalışan sayfa başka birinde bozulabilir.

• Sayfa ağırlığını takip etmemek: Sayfa boyutu fark edilmeden büyür ve deneyim bozulur.

Frontend Developer Kariyeri ve Ekipteki Yeri

Frontend geliştiriciler genellikle junior, mid ve senior seviyelerde ilerler. Junior seviyede amaç, verilen bir tasarımı doğru ve erişilebilir şekilde koda dökmektir. Orta seviyede geliştirici, bileşen yapısını ve performansı kendisi düşünür. Üst seviyede ise teknoloji seçimi, mimari ve ekibe rehberlik devreye girer. Frontend geliştirici, bir ürün ekibinde tasarımcı, backend geliştirici, ürün yöneticisi ve test uzmanıyla yakın çalışır. Bu yüzden teknik beceri kadar iletişim ve geri bildirim alma becerisi de kariyerde belirleyicidir.

Frontend ve Tasarım Sistemleri

Ürün büyüdükçe arayüzde tutarlılığı korumak zorlaşır. Tasarım sistemi bu sorunu çözer: renkler, yazı tipleri, aralıklar ve bileşenler tek bir yerde tanımlanır, hem tasarımcılar hem geliştiriciler aynı kaynağı kullanır. Frontend tarafında bu, bir bileşen kütüphanesi anlamına gelir. Bir düğmenin görünümünü değiştirmek istediğinizde tek yerde değişiklik yapar, her ekran güncellenir. Küçük projelerde gereksiz görünse de, birden fazla geliştiricinin çalıştığı her üründe zaman kazandırır.

Frontend Test Yaklaşımı

Frontend testleri üç katmanda düşünülür. Birim testleri küçük bileşenlerin tek başına doğru çalıştığını doğrular. Entegrasyon testleri bileşenlerin birlikte çalışmasını kontrol eder. Uçtan uca testler ise gerçek bir kullanıcı gibi tarayıcıda akışları dener: giriş yap, ürünü sepete ekle, ödemeyi tamamla. Her şeyi test etmeye çalışmak yerine, bozulursa en çok zarar verecek akışlarla başlamak daha verimlidir.

Frontend İçin Öğrenme Kaynakları ve Pratik Önerileri

Öğrenmeye başlarken tek bir kaynağa bağlı kalmak yerine, resmi dokümantasyonu bir proje ile birleştirmek en verimli yoldur. Bir kavramı okuduktan hemen sonra küçük bir sayfada denemek, bilgiyi kalıcı hale getirir. Kendi başınıza yapmak yerine, açık kaynak bir projede küçük bir düzeltme göndermek ya da bir arkadaşınızın sitesini yeniden tasarlamak, gerçek geri bildirim almanın iyi yollarıdır. Ayrıca kodunuzu başkalarına gösterin. Kod incelemesi, bir frontend geliştiricinin en hızlı geliştiği alanlardan biridir.

Frontend ve SEO

Arama motorlarında görünmesi gereken sayfalar için frontend kararları önemlidir. Sayfa içeriğinin tarayıcıda geç oluştuğu uygulamalarda arama motorları içeriği eksik görebilir. Sunucu taraflı render (SSR) ya da önceden oluşturma (static generation) bu sorunu çözer ve Next.js gibi framework’ler bunu hazır sunar. Anlamlı başlık yapısı, açıklayıcı bağlantı metinleri ve görsel alternatif metinleri hem erişilebilirliği hem aranabilirliği iyileştirir. Sayfanın hızlı yüklenmesi ve düzenin kaymaması da arama sıralamasını etkileyen deneyim ölçütleridir.

Frontend Güvenliği

Güvenlik yalnızca backend’in işi değildir. En yaygın frontend riski XSS, yani bir saldırganın sayfaya kötü niyetli kod yerleştirmesidir. Kullanıcıdan gelen metni ekrana basmadan önce temizlemek, framework’lerin sunduğu güvenli yöntemleri kullanmak ve dışarıdan gelen script’lere dikkat etmek temel önlemlerdir. Hassas verileri, örneğin erişim anahtarlarını, tarayıcıda açıkta tutmamak da gerekir. Kullanılan paketlerin güncel olması da önemlidir, çünkü açık bir paket tüm sayfayı riske atabilir.

Web ya da mobil projeniz için frontend ve backend’i birlikte planlamak isterseniz web uygulama geliştirme hizmetimizi inceleyebilirsiniz.