Web Geliştirme

Bir web projesinin maliyeti ilk teslimde değil, sonradan belli olur. İlk sürüm herkeste çalışır; fark, siteye yeni bir dil eklendiğinde, içerik ekibi bir sayfayı geliştirici beklemeden güncellemek istediğinde ya da adres yapısı değiştiğinde çıkar. O maliyeti üç karar belirliyor: hangi sayfanın ne zaman üretildiği, veri sınırında tip güvenliğinin kurulup kurulmadığı ve içeriği kimin yönetebildiği. Üçü de baştan verilmezse sonradan eklenmez, yeniden yazılır.

Web geliştirme tanımımız

Bizde web geliştirme, tanıtım sayfası kurmak değil, veritabanına bağlı ve yönetilebilir bir uygulama üretmek anlamına geliyor. Ortada birbirine benzeyen üç ayrı iş var. Birincisi içeriği yılda birkaç kez değişen, on sayfalık kurumsal tanıtım sitesi: hazır bir tema genellikle yeterlidir ve bize ihtiyacınız yoktur, bunu ilk görüşmede söylüyoruz. İkincisi, çok dilli olan, yüzlerce sayfaya yayılan ve arama motorlarından trafik alan bir içerik platformu. Üçüncüsü ise kullanıcı hesabı, ödeme akışı ve dış sistem entegrasyonları barındıran bir uygulama. Son ikisinde render stratejisi, tip güvenliği ve içerik modeli baştan karar ister. Web'in belge formatından uygulama platformuna dönüşümünü web geliştirmenin hikayesi yazımızda anlattık.

Bir web projesinde verilen altı karar

Aşağıdaki altı başlık, bir web projesinde geri dönüşü en pahalı olan kararları kapsıyor. İlk ikisi sitenin hızını belirliyor: sayfanın ne zaman üretildiği ve performansın nerede ölçüldüğü. Üçüncüsü, kodun zaman içinde hâlâ değiştirilebilir kalmasıyla ilgilidir. Dördüncüsü ve beşincisi ise kaç dilde yayın yapıldığını ve içeriğe kimin dokunabildiğini belirler. Altıncısı ise yalnızca ortada devralınan eski bir site varsa devreye girer.

Render stratejisi: hangi sayfa ne zaman üretilir

Üç seçenek var. Statik üretimde sayfa derleme anında hazırlanır; adres kümesi belliyse en hızlı ve en ucuz yol budur. Sunucu tarafında render'da sayfa istek anında üretilir; kullanıcıya özel veya sürekli değişen içerik bunu gerektirir. Artımlı yeniden üretimde sayfa statik durur, içerik değiştiğinde tazelenir. Kritik ayrıntı sonuncusunda: tazeleme zamana değil olaya bağlanmalı. Okumakta olduğunuz sitede yönetim panelinden yapılan her kayıt yalnızca ilgili önbellek etiketini düşürüyor, yeniden derleme gerekmiyor. bebekistiyorum.com'un 66 tıbbi makale, yüzlerce video sayfası ve uzman profilinden oluşan arşivi, Next.js App Router ve React Server Components ile sunucu tarafında render edilen MongoDB destekli bir platformda yayınlanıyor.

Core Web Vitals ve gerçek kullanıcı ölçümü

Laboratuvar skoru ile saha verisi aynı şey değil. Lighthouse tek cihazda, tek bağlantı profilinde ve boş önbellekle ölçer; Google'ın kullandığı veri gerçek ziyaretçilerin tarayıcısından gelir. Bu yüzden yeşil bir skor teslim etmiyoruz, sahadan üç metriği izliyoruz: en büyük içeriğin boyanma süresi, etkileşimden sonraki boyamaya kadar geçen gecikme ve düzen kaymasının birikimi. Bu üçünü bozan küme dardır: boyutu belirtilmemiş görsel, geç yüklenen yazı tipi, gereğinden büyük JavaScript paketi ve mount sonrası eleman ölçüp hemen stil değiştiren kod. Sonuncusu tarayıcıyı zorunlu yeniden yerleşime sokar; bu yüzden ziyaretçiye giden sayfalarda ölçüm değerini ResizeObserver geri çağrımından okumayı kural edindik. bebekistiyorum.com'un eski ASP.NET sürümünde mobil performans bilinen sorunlardandı; yeni platformda Core Web Vitals odaklı performans çalışması yapıldı.

TypeScript ile tip güvenliği ve sürdürülebilirlik

TypeScript'in değeri yazarken değil değiştirirken çıkar. Bir alanı yeniden adlandırdığınızda derleyici ona dokunan her yeri gösterir; tip yoksa aynı işi arama yapıp umut ederek yaparsınız. Bu güvencenin üç koşulu var. Katı kip: örtük any kapalı olmalı, yoksa tip sistemi süse döner. Veri sınırı: veritabanından, dış servisten ve formdan gelen veri tip iddiasıyla değil çalışma zamanı şemasıyla doğrulanmalı, çünkü tipler derlemede silinir ve yanlış şekilli bir cevabı hiçbir arayüz tanımı durduramaz. Üçüncüsü tip kontrolünün insan disiplinine değil boru hattına bağlanması. Mimari kararların uzun vadeli etkisini yazılım mimarisi yazımızda ayrıntılandırdık.

Çok dilli mimari ve RTL

Çok dillilik bir çeviri dosyası meselesi değil, adres ve düzen meselesi. Her dilin kendi adresi olmalı, diller arasındaki bağ hreflang ile bildirilmeli ve yol parçaları da çevrilebilmeli. Okumakta olduğunuz sitede adresin kendisi yerelleşiyor: aynı sayfa Türkçede hizmetlerimiz, Rusçada услуги, Arapçada خدماتنا altında yaşıyor. Sağdan sola yazılan diller ikinci katmanı ekliyor; Arapça yalnızca metnin yönünü değil kenar boşluklarını, ikon yönünü ve form hizalamasını da ters çeviriyor. Bunu sol ve sağ yerine mantıksal CSS özellikleriyle kurmazsanız her bileşeni iki kez yazarsınız. bebekistiyorum.com Türkçe, İngilizce, Rusça ve Arapça yayın yapıyor ve Arapça için tüm bileşenler sağdan sola çalışacak şekilde tasarlandı. Sık yapılan hataları yerelleştirme püf noktaları yazımızda topladık.

İçerik yönetimi ve editör bağımsızlığı

Bir sitenin gerçek sahibi içeriği değiştirebilen kişidir. Her metin değişikliği geliştirici gerektiriyorsa site zamanla güncellenmeyi bırakır. Bu yüzden içerik modelini sayfa değil alan düzeyinde kuruyoruz: başlık, özet, gövde, medya ve meta alanları ayrı tanımlanır, böylece editör düzeni bozmadan içerik girer. Zengin metin editöründen gelen HTML sunucuda izinli etiket listesine göre temizlenir; tarayıcıda yapılan temizlik temizlik sayılmaz. bebekistiyorum.com'da Tiptap zengin metin editörü ve toplu içerik aktarımı içeren özel bir yönetim paneli geliştirildi. Eski sürümde her içerik güncellemesi teknik destek gerektiriyordu; yeni yapıda içerik ekibi geliştirici desteği olmadan yayın yapıyor ve bunun için CMS lisansı ödemiyor.

Migrasyon ve URL değerinin korunması

Var olan bir siteyi yenilerken en pahalı hata, adres yapısını sessizce değiştirmektir. Yıllarca biriken arama motoru değeri sayfada değil adreste durur; adres kaybolursa değer de kaybolur. Sıra şudur: eski sitenin tüm adresleri site haritasından, sunucu kayıtlarından ve arama konsolundan çıkarılır, her biri yeni bilgi mimarisinde bir karşılığa eşlenir, eşleme kalıcı yönlendirme olarak yayına alınır. Toplu olarak ana sayfaya yönlendirmek eşleme değildir ve değer taşımaz. bebekistiyorum.com'da eski ASP.NET sitesindeki 1.200'den fazla adres yeni bilgi mimarisine eşlendi ve veritabanı tabanlı bir 301 katmanıyla korundu. Haritayı veritabanında tutmayı tercih ediyoruz: yayından sonra ortaya çıkan eksik adresler yeni bir dağıtım beklemeden eklenebiliyor. Sonrasındaki indeksleme takibi SEO hizmetimizin kapsamında.

Devraldığımız projelerde ilk baktığımız yerler

Başkasının yazdığı bir projeyi devralırken ilk hafta kod okumakla değil, altı soruyu cevaplamakla geçiyor. Proje temiz bir makinede kuruluyor ve derleme geçiyor mu; kurulum belgesi yoksa devralınan şey kod değil bilmecedir. Tip kontrolü ve lint kaç hata veriyor; bu sayı düzeltmeden önce baz çizgisi olarak yazılır, böylece sonraki her değişiklikte artıp artmadığı görünür olur. Bağımlılıklar kaç ana sürüm geride kaldı ve bilinen bir güvenlik uyarısı taşıyor mu; depoda gerçek bir anahtar veya parola duruyor mu, duruyorsa iş kodla değil o anahtarın değiştirilmesiyle başlar. Liste sayfaları kaç sorgu atıyor, bu sorguların karşılığında bir indeks var mı; trafik hangi adreslerde yoğunlaşıyor ve yönlendirme yapısı ne durumda. Bulguları tek sayfalık bir nota yazıyoruz: şimdi düzeltilecekler, sürüm planına girecekler ve bilinçli olarak öyle bırakılacaklar.

Performans bütçesi nasıl konur

Performans bütçesi, kod yazılmadan önce yazıya dökülen üst sınırlardır: sayfa türü başına JavaScript boyutu, görsel ağırlığı, üçüncü taraf script sayısı ve hedeflenen saha metrikleri. Bütçe yoksa sayfa ağırlığı tek yönlü artar, çünkü hiçbir tek değişiklik siteyi tek başına yavaşlatmaz; yavaşlatan birikimdir. Bütçeyi işler kılan iki kural var. Ölçüm boru hattında olmalı: sınır aşıldığında bunu aylar sonra bir kullanıcı değil, değişikliği yapan kişi aynı gün görmeli. Bütçe yasak değil pazarlık masası olmalı: aşan bir değişiklik reddedilmez, karşılığında neyin çıkacağı yazılır ve karar sizde kalır. En sık aşım kaynağı da bellidir ve çoğu zaman geliştirme değildir: sohbet balonu, etiket yöneticisi, ısı haritası ve reklam kodları.

Siteyi kim yönetecek sorusu

Bu soruyu tasarıma başlamadan önce soruyoruz, çünkü cevabı mimariyi değiştiriyor: siteye kim, hangi sıklıkla, hangi yetkiyle dokunacak? Üç tipik cevap var. İçeriği yılda birkaç kez değişen bir site için ayrı yönetim paneli gereksiz maliyettir; metin kodda durabilir. Haftada birkaç kez içerik giren küçük bir ekip için özel panel doğru cevaptır, çünkü alanlar o ekibin işine göre tanımlanır ve öğrenme süresi kısa olur. Onlarca editörün, onay adımlarının ve çeviri iş akışının olduğu yapıda ise hazır bir başsız CMS almak daha doğrudur; bunu söylemekten çekinmiyoruz. Hangi cevap çıkarsa çıksın üç şey teslimin parçası: rol ayrımı, önizleme ve panelin nasıl kullanıldığını anlatan yazılı not. bebekistiyorum.com'da cevap özel paneldi ve ölçütü şuydu: içerik ekibi geliştirici desteği olmadan yayın yapabiliyor.

Teslim paketindeki beş kalem

Proje bittiğinde beş şey sizde kalıyor. Birincisi kod deposu: tüm sürüm geçmişiyle sizin hesabınızda durur, sıkıştırılmış bir klasör olarak değil. İkincisi altyapı: sunucu, veritabanı ve alan adı sizin adınıza açılmış hesaplarda kurulur, böylece ayrılık ayrı bir taşıma projesine dönüşmez. Üçüncüsü içerik: veritabanı şeması ve içeriğin dışa aktarılabilir hali elinizde kalıyor. Dördüncüsü adres kaydı: yönlendirme haritası ve site haritası, migrasyon yapıldıysa eski adreslerin karşılıklarıyla birlikte teslim ediliyor. Beşincisi devir notu: projenin yerelde nasıl ayağa kalktığı, nasıl yayına alındığı, panelin nasıl kullanıldığı ve hangi kararın neden verildiği.

Tek projede hepsi bir arada

Bu sayfadaki kararların çoğu tek bir projede bir arada görülebiliyor: Eurofertil Tüp Bebek Merkezi'nin bebekistiyorum.com sitesi, eski ASP.NET WebForms altyapısından dört dilli bir Next.js platformuna geçti. Aşağıdaki ilk beş madde o projenin kendi sayfasında yazılı, altıncısı okumakta olduğunuz sitenin kendisi.

• Render ve veri: Next.js App Router ve React Server Components ile sunucu tarafında render edilen, MongoDB destekli bir platform.
• Migrasyon: Eski sitedeki 1.200'den fazla adres yeni bilgi mimarisine eşlendi, veritabanı tabanlı bir 301 yönlendirme katmanıyla korundu.
• Çok dillilik: Türkçe, İngilizce, Rusça ve Arapça yayın; Arapça için tüm bileşenler sağdan sola tasarlandı, dil sürümleri hreflang ile bildiriliyor.
• İçerik yönetimi: Tiptap editörü ve toplu içerik aktarımı içeren özel panel; içerik ekibi CMS lisansına ihtiyaç duymadan tüm siteyi yönetiyor.
• Teknik SEO: Sayfa bazlı dinamik metadata, otomatik site haritası, schema.org yapılandırılmış veri ve Core Web Vitals odaklı performans çalışması.
• detartech.com: Bu site de aynı mimaride: Next.js App Router, dört dil, yerelleşen adres parçaları ve Arapçada sağdan sola düzen.