Front end developer ne iş yapar, projenize gerekli mi?
Ekip kurarken ya da teklif alırken hangi rolün ne yaptığını bilmek gerekiyor. Front end, back end ve full stack farkı, projenize hangisinin gerektiği ve arama görünürlüğünün neden büyük ölçüde bu tarafta belirlendiği.
Neden bu rolü bilmek gerekiyor?
Yazılım ekibi kurarken ya da teklif alırken karşınıza çıkan başlıklar birbirine benziyor: front end, back end, full stack.
İşletme tarafında bunları ayırt etmek teknik merak değil, pratik bir ihtiyaç. Yanlış rolü aramak hem zaman hem para kaybettiriyor.
Bu yazı geliştirici olmak isteyenler için değil, geliştiriciyle çalışacak olanlar için.
Front end ne yapıyor?
Front end developer, kullanıcının gördüğü ve dokunduğu her şeyi geliştiriyor.
Somut olarak:
- Tasarımı çalışan bir sayfaya çevirmek
- Düzenin her ekran boyutunda düzgün görünmesini sağlamak
- Formlar, düğmeler ve menülerin çalışmasını yazmak
- Sayfanın hızlı açılmasını sağlamak
- Klavye ve ekran okuyucularla kullanılabilirliği kurmak
Bir sipariş formu örneğinde: alanların görünmesi, doğrulama uyarıları, adım geçişleri ve düğmenin tepki vermesi front end işi.
Back end ne yapıyor?
Görünmeyen taraf.
- Verinin nerede ve nasıl saklandığı
- İş kurallarının işletilmesi
- Kullanıcı yetkilendirmesi ve güvenlik
- Diğer sistemlerle entegrasyon
- Performans ve ölçeklenme
Aynı sipariş formunda: siparişin kaydedilmesi, stoktan düşülmesi, faturanın oluşturulması ve e-postanın gönderilmesi back end işi.
Soru | Sorumlu taraf |
|---|---|
Buton neden çalışmıyor? | Front end |
Sipariş neden kaydedilmedi? | Back end |
Sayfa neden yavaş açılıyor? | Genellikle front end |
Sistem neden yoğunlukta çöküyor? | Back end |
Mobilde neden bozuk görünüyor? | Front end |
Veri neden yanlış hesaplanıyor? | Back end |
Bu tablo, sorun bildirirken doğru kişiye gitmeyi sağlıyor.
Full stack ne demek?
İkisini birden yapan kişi.
Avantajı: Koordinasyon maliyeti yok. Bir özellik baştan sona tek kişide bitiyor ve arada bekleme olmuyor.
Kısıtı: Her iki tarafta da uzmanlaşmış birine göre derinlik daha az olabiliyor.
Küçük ve orta ölçekli projelerde full stack genellikle daha verimli. Büyük ve uzun soluklu projelerde ayrışma kalite getiriyor.
Küçük bir işletmenin projesinde iki ayrı kişi çalıştırmak, çoğu zaman gereksiz koordinasyon yükü üretiyor.
İpucu — Teklif alırken kaç kişinin çalışacağını değil, işi kimin fiilen yapacağını sorun. Bu soruyu yazılım firması seçerken sorulacak sorular listesine de koyduk.
Projeme gerçekten gerekli mi?
Cevap arayüzün karmaşıklığına bağlı.
Genellikle gerekmiyor:
- Hazır tema üzerine kurulan kurumsal site
- Standart blog
- Basit e-ticaret kurulumu
Genellikle gerekiyor:
- Özel tasarımlı arayüz
- Çok adımlı form ve hesaplama ekranları
- Panel ve yönetim ekranları
- Veri görselleştirme
- Saha kullanımına özel ekranlar
İkinci gruptaki işlerde hazır çözümleri zorlamak, özel geliştirmeden pahalıya çıkabiliyor. Üretim işletmelerinde sık karşılaştığımız bir durum bu; fabrikalar için yazılım yazısında aynı ayrımı yaptık.
Arama görünürlüğü front end'de belirleniyor
Bu, işletme tarafında en az bilinen ama en çok karşılığı olan nokta.
Sıralamayı etkileyen birçok karar front end tarafında veriliyor:
Ölçülerin tanımı ve eşikleri web.dev üzerinde yayımlanıyor; Google'ın başlangıç rehberi de teknik temelleri özetliyor.
Sayfa hızı. Görsellerin nasıl yüklendiği, hangi dosyaların ne zaman indirildiği. Ölçümün nasıl okunacağını PageSpeed Insights yazısında anlattık.
Başlık hiyerarşisi. Sayfada kaç H1 olduğu ve alt başlıkların doğru seviyede kurulup kurulmadığı.
Mobil davranış. Masaüstünde olup mobilde olmayan içerik Google için yok sayılıyor; sebebini mobil öncelikli indeksleme yazısında yazdık.
İçeriğin nerede üretildiği. Bu, listenin en kritik maddesi ve ayrı bir başlığı hak ediyor.
Sunucuda mı tarayıcıda mı?
Modern arayüz çerçevelerinde içerik iki farklı yerde üretilebiliyor.
Sunucu tarafında. Sayfa hazır HTML olarak geliyor. Googlebot içeriği doğrudan görüyor. Güvenli yol.
Tarayıcı tarafında. Sunucudan neredeyse boş bir HTML geliyor, içerik JavaScript ile üretiliyor. Googlebot bunu görebiliyor ama gecikmeli ve bazen eksik.
Teklif alırken sorulacak en pratik soru bu: içerik sunucu tarafında mı oluşturulacak?
Cevap "tarayıcıda" ise arama tarafında ek risk var demektir ve bunun bilinçli bir karar olması gerekiyor.
Örnek senaryo — Bir işletme modern bir arayüzle site yaptırıyor. Site hızlı ve güzel görünüyor. Aylar sonra iç sayfaların arama sonuçlarında hiç çıkmadığı fark ediliyor. İnceleme yapıldığında içeriğin tamamen tarayıcıda üretildiği ve Googlebot'un çoğu sayfayı boş gördüğü anlaşılıyor. Sunucu tarafı oluşturma eklendiğinde sorun çözülüyor ama aylar kaybedilmiş oluyor.
Ekip mi ajans mı?
Üç seçenek var ve üçünün de yeri farklı.
Kendi ekibiniz. Sürekli geliştirme varsa mantıklı. Tek bir proje için işe alım pahalı ve yavaş.
Serbest çalışan. Tek bir proje için uygun. Risk süreklilikte: kişi ayrıldığında devir sorunu doğuyor.
Ajans. Süreklilik ve devir güvencesi var. Karşılığında saat ücreti daha yüksek.
Hangisi olursa olsun sorulacak sorular aynı ve en kritiği kaynak kod sahipliği; ayrı bir yazıda tek tek listeledik.
Değerlendirme yaparken
Teknik bilginiz olmadan da yapabileceğiniz üç kontrol var.
1. Daha önce yaptığı bir işi mobilde açın. Hız ve düzen gözle görülüyor.
2. O sayfanın hız skorunu ölçün. Ücretsiz ve bir dakika sürüyor.
3. Sayfa kaynağında içeriği arayın. Tarayıcıda sayfa kaynağını açıp bir cümleyi arayın. Bulamıyorsanız içerik tarayıcıda üretiliyor demektir.
Üçüncü kontrol, en teknik görünen ama en çok bilgi veren adım ve hiçbir bilgi gerektirmiyor.
Tasarımcı ile geliştirici farkı
Sık karıştırılan bir başka ayrım.
Tasarımcı sayfanın nasıl görüneceğine karar veriyor: düzen, renk, tipografi, akış. Çıktısı bir tasarım dosyası.
Front end geliştirici o tasarımı çalışan bir sayfaya çeviriyor.
İkisi aynı kişi olabiliyor ama farklı beceriler. Yalnızca tasarımcıyla çalışıp geliştirici olmadan ilerlenemiyor; yalnızca geliştiriciyle çalışıldığında ise tasarım kararlarını birinin vermesi gerekiyor.
Teklif alırken hangisinin dahil olduğunu netleştirmek, sonradan çıkan "tasarım kimde" sorusunu önlüyor.
Erişilebilirlik
Az konuşulan ama hem yasal hem pratik karşılığı olan bir başlık.
Sayfanın klavyeyle kullanılabilmesi, ekran okuyucuların içeriği okuyabilmesi, renk kontrastının yeterli olması.
Bunlar front end tarafında kuruluyor ve sonradan eklenmesi zor. Arama tarafında doğrudan bir sıralama ölçüsü olmasa da, erişilebilir bir sayfa genellikle daha temiz kodlanmış oluyor ve bu dolaylı olarak yardımcı.
Devir ve dokümantasyon
Geliştiriciyle yollar ayrıldığında ortaya çıkan sorunların çoğu baştan önlenebiliyor.
İstenmesi gerekenler:
- Kaynak kodun sizin hesabınızda olması
- Kurulum belgesi — proje başka bir makinede nasıl çalıştırılır
- Kullanılan üçüncü taraf servislerin listesi
- Tasarım dosyalarının teslimi
Bu dördü sözleşmede yazılı değilse, ayrılma anında pazarlık konusu oluyor. Konuyu yarım kalan yazılım projesi yazısında ayrıntılandırdık.
Sonuç — Front end, "sitenin görünen kısmı" olarak anlatılıyor ama işletme açısından karşılığı daha geniş: sitenin hızı, mobil davranışı ve arama motorunda görünüp görünmemesi büyük ölçüde burada belirleniyor.
Site ve arayüz geliştirmeyi web sitesi geliştirme, kurumsal site kurulumunu kurumsal web tasarım, uçtan uca projeleri yazılım geliştirme kapsamında yürütüyoruz.
Bu konuyla ilgili
- PWA — Arayüz tarafındaki ileri seçenek.
