WEB / WEB-20.01

Monolith, three-tier ve SPA

Kodun nasıl yayımlandığı, rollerin nereye yerleştiği ve browser’ın görünümü nasıl kurduğu farklı sorulardır. Aynı public note için SSR ve SPA akışlarını karşılaştır.

CORE · RED · BLUE · ARTIFACT · PRACTICE

Hareket olmadan bütün senaryoları oku

SSR HTML

Page isteniyor
Browser public SSR page’i istemeye hazırlanır. Server request target’ını henüz bilmiyor.
Browser
Document yok / note isteği hazır
Application server
Target alınmadı
Yerel service
Service bekliyor
Data owner
Public Tea note hazır
Request hazır
GET target’ı browser’da hazırdır. Mesaj giderken server’ın önceki bilgisi korunur.
Browser
GET /server-note hazır
Application server
Target alınmadı
Yerel service
Service bekliyor
Data owner
Public Tea note hazır
Request server’a ulaştı
Server hedefi ancak request ulaştığında öğrenir. HTML sonucu henüz browser’a verilmemiştir.
Browser
GET /server-note hazır
Application server
GET /server-note alındı
Yerel service
Service bekliyor
Data owner
Public Tea note hazır
Service veriyi okudu
Server, service ve data owner’ı aynı process içinde çağırır. Bu yerel işlem başka tier’a ağ mesajı değildir.
Browser
GET /server-note hazır
Application server
GET /server-note alındı
Yerel service
Public note okuması
Data owner
Public Tea note hazır
HTML hazırlandı
Server title’ı HTML text olarak hazırlar. Browser yeni document içeriğini henüz almamıştır.
Browser
GET /server-note hazır
Application server
200 HTML Tea note hazır
Yerel service
Public note okuması
Data owner
Public Tea note hazır
HTML browser’a ulaştı
Sahnede body’nin tamamı browser’a ulaşır. DOM’u kurmak ve görünümü oluşturmak sonraki yerel adımdır.
Browser
200 HTML body alındı
Application server
200 HTML Tea note hazır
Yerel service
Public note okuması
Data owner
Public Tea note hazır
Görünüm oluşturuldu
Browser’ın görünüm modeli title’ı DOM text olarak gösterir. Kaynak HTML ile bu beklenen görünüm ayrı durumlar olarak tutulur.
Browser
DOM text modeli: Tea note
Application server
200 HTML Tea note hazır
Yerel service
Public note okuması
Data owner
Public Tea note hazır

SPA data/view

SPA başlangıcı tamam
İlk HTML gelmiştir ve Loading görünür. Note API sonucu henüz yoktur.
Browser
İlk HTML 200 alındı / Loading modeli
Application server
API target alınmadı
Yerel service
Service bekliyor
Data owner
Public note store seçildi
API request hazır
Frontend note API request’ini hazırlar. İlk HTML’in gelmesi note verisinin bulunduğunu söylemez.
Browser
Loading / GET /api/notes/tea hazır
Application server
API target alınmadı
Yerel service
Service bekliyor
Data owner
Public note store seçildi
API request server’a ulaştı
Backend istenen API target’ını öğrenir. Note verisinin bulunabilirliği backend’de belirlenir.
Browser
Loading / GET /api/notes/tea hazır
Application server
GET /api/notes/tea alındı
Yerel service
Service bekliyor
Data owner
Public note store seçildi
Note bulunabilirliği kontrol edildi
Service public note’u data owner’dan arar. Browser database’in kararını kendisi vermez.
Browser
Loading / GET /api/notes/tea hazır
Application server
GET /api/notes/tea alındı
Yerel service
Tea note bulundu
Data owner
Public note store seçildi
API response hazır
Backend status, media type ve body’yi hazırlar. Frontend henüz yeni veri almamıştır.
Browser
Loading / GET /api/notes/tea hazır
Application server
200 JSON Tea note hazır
Yerel service
Tea note bulundu
Data owner
Public note store seçildi
API response browser’da
Response body browser’a ulaşır. Response alınması ile başarılı HTTP status aynı sonuç değildir.
Browser
200 Response/body alındı / hâlâ Loading
Application server
200 JSON Tea note hazır
Yerel service
Tea note bulundu
Data owner
Public note store seçildi
Status ve note kabul edildi
Frontend 200 status ve beklenen note biçimini kabul eder. Note parse edilmiştir; DOM güncellemesi sonraki adımdır.
Browser
Status/body/schema kabul edildi / note parse edildi
Application server
200 JSON Tea note hazır
Yerel service
Tea note bulundu
Data owner
Public note store seçildi
Görünüm kararı uygulandı
Frontend, kabul edilen sonucu görünüm modeline yansıtır. API sonucu, status kontrolü ve DOM güncellemesi ayrı adımlar olarak izlenir.
Browser
DOM text modeli: Tea note
Application server
200 JSON Tea note hazır
Yerel service
Tea note bulundu
Data owner
Public note store seçildi

SPA API404

SPA başlangıcı tamam
İlk HTML gelmiştir ve Loading görünür. Note API sonucu henüz yoktur.
Browser
İlk HTML 200 alındı / Loading modeli
Application server
API target alınmadı
Yerel service
Service bekliyor
Data owner
Public note store seçildi
API request hazır
Frontend note API request’ini hazırlar. İlk HTML’in gelmesi note verisinin bulunduğunu söylemez.
Browser
Loading / GET /api/notes/missing hazır
Application server
API target alınmadı
Yerel service
Service bekliyor
Data owner
Public note store seçildi
API request server’a ulaştı
Backend istenen API target’ını öğrenir. Note verisinin bulunabilirliği backend’de belirlenir.
Browser
Loading / GET /api/notes/missing hazır
Application server
GET /api/notes/missing alındı
Yerel service
Service bekliyor
Data owner
Public note store seçildi
Note bulunabilirliği kontrol edildi
Service public note’u data owner’dan arar. Browser database’in kararını kendisi vermez.
Browser
Loading / GET /api/notes/missing hazır
Application server
GET /api/notes/missing alındı
Yerel service
Public note bulunamadı
Data owner
Public note store seçildi
API response hazır
Backend status, media type ve body’yi hazırlar. Frontend henüz yeni veri almamıştır.
Browser
Loading / GET /api/notes/missing hazır
Application server
404 JSON not-found hazır
Yerel service
Public note bulunamadı
Data owner
Public note store seçildi
API response browser’da
Response body browser’a ulaşır. Response alınması ile başarılı HTTP status aynı sonuç değildir.
Browser
404 Response/body alındı / hâlâ Loading
Application server
404 JSON not-found hazır
Yerel service
Public note bulunamadı
Data owner
Public note store seçildi
404 note güncellemesini durdurdu
Frontend 404 Response’u alır, fakat status kontrolü başarılı note güncellemesini reddeder. Loading yerine hata görünümü sonraki adımda oluşturulur.
Browser
Status reddedildi / note başarı sonucu yok
Application server
404 JSON not-found hazır
Yerel service
Public note bulunamadı
Data owner
Public note store seçildi
Unavailable mesajı gösterildi
Frontend Note unavailable mesajını görünüm modeline yansıtır. Yeni note title yüklenmiş gibi gösterilmez; bu dal başarısız API sonucudur.
Browser
Görünüm mesajı: Note unavailable
Application server
404 JSON not-found hazır
Yerel service
Public note bulunamadı
Data owner
Public note store seçildi

ROLLER · STATE · VERİ AKIŞI

Monolith, layer ve tier hangi soruya cevap verir?

Monolith, uygulamanın temel davranışlarının birlikte geliştirilen ve yayımlanan bir deployment unit içinde bulunmasıdır. Bu birim birden fazla module veya project içerebilir; aynı birimin kopyaları farklı process ve makinelerde çalışabilir. Database ve diğer bağımlılıklar ayrı yerde olabilir. Bu yüzden monolith etiketinden bütün sistemin tek dosya, tek process veya tek makine olduğu sonucunu çıkarmayız.

Presentation, business logic ve data access, kodun üç farklı sorumluluğudur. Layer bu mantıksal ayrımı, tier ise fiziksel yerleşimi anlatır. Bir tier birkaç layer barındırabilir. Çizimde üç kutu görmen üç makine bulunduğu anlamına gelmez. Atlas örneğinde server, service ve data rolleri aynı process içinde çağrılır; kutular kimin hangi kararı verdiğini gösterir.

Frontend, browser içindeki etkileşimi ve görünümü yönetir. Backend, endpoint ve veri kararlarını yürütür. Browser’ın formu doğrulaması veya JSON alması, server’ın permission ve veri tutarlılığı kararlarının yerini almaz. Aynı server hem SSR HTML hem JSON API sunabilir. SPA seçimi de backend’in microservices olması gerektiğini söylemez: deployment, fiziksel yerleşim ve arayüz davranışı ayrı seçimlerdir.

İlk HTML, API sonucu ve DOM aynı şey değildir

SSR akışında server, Tea note verisini okuyup title’ı HTML içindeki h1 alanına yerleştirir. Browser bu HTML geldikten sonra DOM’u kurar. Buradaki SPA başlangıcı ise bir note container ve Loading metni getirir; veriyi sonra ister. Bu yalnız seçtiğimiz başlangıç biçimidir. Bir SPA server rendering veya hydration da kullanabilir ve ilk HTML anlamlı içerik taşıyabilir.

Başlangıç HTML’inin gelmesi note API’nin başarılı olduğu anlamına gelmez. Frontend GET /api/notes/tea isteğini hazırlar; server hedefi ancak request ulaştığında öğrenir. Server JSON hazırladığında browser hâlâ Loading gösterir. Response’un ulaşması, body’nin okunması, JSON’un beklenen biçime uyması ve DOM’un güncellenmesi ayrı adımlardır. Fetch, 404 gibi bir HTTP status için de Response döndürebilir; örnekte status kontrolü note title güncellemesini durdurur.

Sahne, body’nin tamamen gelmesini tek adımda gösterir; gerçek Fetch akışında headers body tamamlanmadan kullanılabilir. Sonraki yerel adımlar status ve veri biçimini kontrol eder, ardından title düz metin olarak DOM’a yazılır. Bu ayrım, “response aldım” ile “kullanıcı doğru sonucu gördü” arasındaki boşluğu açıklar. Her adımda hangi bilginin browser’a gerçekten ulaştığını izle.

Hareket olmadan bütün senaryoları oku

200, sonra 404

Başlangıç document’i başarılı
ApiFailure dalında startupStatus=200. Bu, başlangıç document’inin HTTP sonucudur; ayrıca istenen missing not için API status’unu belirlemez.
Document örneği
startupStatus=200
API sonucu
API sonucu henüz incelenmedi
Görünüm kararı
Not görünümü henüz yok
API isteği başka bir sonuç taşıyor
ApiTarget=/api/notes/missing ve apiStatus=404. Document’in önceki 200 sonucu, bu resource için başarılı not representation’ı üretmez.
Document örneği
startupStatus=200
API sonucu
apiStatus=404 / not-found
Görünüm kararı
Başarı koşulu karşılanmadı
Fulfilled Response neyi söylüyor?
Fetch Promise modeli fulfilled Response’dır. HTTP 404, response’un alındığı bu durumda network rejection olmak zorunda değildir. HTTP status ayrıca değerlendirilir.
Document örneği
startupStatus=200
API sonucu
fulfilled Response / status=404
Görünüm kararı
HTTP sonucu ayrı tutulur
Başarılı not olarak parse edilmedi
NoteParsed=false. Uygulama hata representation’ını başarılı note sözleşmesiyle tüketmiyor; error alanı title yerine kullanılmıyor.
Document örneği
startupStatus=200
API sonucu
body: error=not-found
Görünüm kararı
noteParsed=false
Görünüm kendi hata kararını verir
ProjectedSuccessfulNoteCommitted=false ve mesaj Note unavailable. Document başarısı korunurken not görünümünün başarısız sonucu ayrı gösterilir.
Document örneği
startupStatus=200
API sonucu
apiStatus=404
Görünüm kararı
Note unavailable / success=false
Önceki 200’den permission de çıkmaz
Document’in gelmesi veya SPA olması object authorization kanıtı değildir. Bu örneğin sorusu ayrı request sonuçlarıdır; kullanıcı izni ilgili resource’un server kararına dayanır.
Document örneği
document delivered
API sonucu
Eksik resource’un sonucu ayrı tutulur
Görünüm kararı
Startup success != object permission

Source / data

SPA source’unda Loading var
Spa.sourceNoteText=Loading. Başlangıç source’unu inceleyen kişi, notun daha sonra hangi data’dan üretileceğini henüz görmemiştir.
Document örneği
sourceNoteText=Loading
API sonucu
Note data henüz incelenmedi
Görünüm kararı
Final başlık henüz yok
Not ayrı JSON representation’ında
API body, id=tea, title=Tea note ve version=1 alanlarını taşır. Bu alanlar başlangıç HTML’inde Loading yazmasından ayrı bir girdidir.
Document örneği
sourceNoteText=Loading
API sonucu
id=tea / title=Tea note / version=1
Görünüm kararı
View sözleşmesi henüz değerlendirilmedi
JSON parse ile görünüm kararı farklı
Body’nin JSON olarak yorumlanabilmesi not görünümünün bütün koşullarını karşılamaz. Hangi alanın beklenen title olduğu ve hangi resource’a ait olduğu consumer sözleşmesinde belirlenir.
Document örneği
Başlangıç source’u ayrı tutulur
API sonucu
JSON representation mevcut
Görünüm kararı
Representation != admitted view
Başlık kabul edilen alandan seçilir
Bu örnekte doğrulama sonrası projectedDomTextAfterValidation=Tea note seçilir. Başlangıç source’taki Loading ile final görünümün farklı olması olağandır.
Document örneği
sourceNoteText=Loading
API sonucu
title=Tea note
Görünüm kararı
projectedDomText=Tea note
Server-rendered örnek farklı başlangıç verir
SSR sourceNoteText=Tea note: not başlığı zaten başlangıç HTML’indedir. İki örneğin aynı başlığı göstermesi aynı veri yolunu izlediklerini söylemez.
Document örneği
SSR sourceNoteText=Tea note
API sonucu
SPA’nın ayrı API representation’ı
Görünüm kararı
Same title != same path
Data’nın nereden geldiğini kaybetme
İncelemede source HTML’i, API representation’ını ve tüketilen title alanını ayrı tut. SPA veya SSR etiketi bu alanların permission ya da güvenli tüketim koşullarını kendiliğinden sağlamaz.
Document örneği
Source ile API kaydı ayrı tutulur
API sonucu
Representation sahibi biliniyor
Görünüm kararı
View sözleşmesi açık kalır

VARSAYIM · SINIR · KONTROL

Çizimdeki kutu bir güven sınırını kanıtlamaz

Frontend, backend ve data kutuları çizmek, authorization’ın server’da uygulandığını veya database’in ağda izole olduğunu göstermez. Aynı process içindeki service çağrısı ile başka server’a giden request farklı mekanizmalardır. Atlas’ın yerel service ve data çağrılarında packet hareketi yoktur; browser ile server arasındaki mesajlar ayrı gösterilir.

Monolith veya SPA etiketine bakarak verinin doğruluğunu kimin belirlediğine karar verme. Browser’daki note kopyası görüntü içindir; backend’in veri kararı yerine geçmez. İncelemede kodun nasıl paketlendiği ile işlemin nerede yürütüldüğünü ayrı sor. Bu örnekte public Tea note okunur; çizimin öğretmek istediği sınır veri ve karar sorumluluğudur.

Başarılı başlangıç, başarısız API’yi gizlemesin

SPA shell ulaştığında Loading görünmesi normaldir. Sonraki note API 404 dönerse başlangıç document’ı yine gelmiştir, fakat note sonucu kullanılamaz. Promise’in fulfilled olması başarılı HTTP status veya geçerli note verisi demek değildir. Beklenen note nesnesi bulunmadan title’ı başarıyla yüklenmiş gibi sunmak bu iki sonucu karıştırır.

Kaynak HTML’deki h1 ile canlı DOM aynı gözlem değildir. Script içeriği değiştirmiş, API hatası Loading metnini bırakmış veya kullanıcı sonraki bir işlem yapmış olabilir. İlk HTML, alınan response ve DOM değişikliğini ayrı oku. Title’ın hangi request sonucundan üretildiğini bilmeden yalnız ekrandaki metinden backend davranışı çıkarılamaz.

Hareket olmadan bütün senaryoları oku

Source / görünüm

İki source örneğini ayır
Source text’i yerel HTML üreticisi ve HTMLParser okuması sağlar; API status/body kaydı aynı örneğin ayrı representation’ıdır. Bu alanlar canlı browser DOM veya packet capture kaydı değildir. SSR sourceNoteText=Tea note, SPA sourceNoteText=Loading. İkisi de başlangıç document’ine ait gözlemdir; final browser görüntüsü ayrı kanıt ister.
Source gözlemi
SSR: Tea note / SPA: Loading
Response gözlemi
API response henüz incelenmedi
Kanıt sınırı
Final browser görünümü bilinmiyor
SPA’nın API body’sini eşleştir
Spa.apiTarget=/api/notes/tea ve apiStatus=200. Body’de Tea note bulunması, seçilen data resource’un sonucunu gösterir; DOM’a uygulandığını tek başına kanıtlamaz.
Source gözlemi
SPA startup: Loading
Response gözlemi
API 200 / title=Tea note
Kanıt sınırı
DOM’a uygulandığı gözlenmedi
Modelin view sonucunu doğru adlandır
ProjectedDomTextAfterValidation=Tea note, bu örneğin doğrulama sonrası beklenen görünümüdür. Native parser’ın source okuması gerçek browser DOM veya paint ölçümü değildir.
Source gözlemi
SPA source: Loading
Response gözlemi
API title=Tea note
Kanıt sınırı
projectedDomTextAfterValidation=Tea note
Source’u final DOM yerine koyma
Loading source’ta kalabilirken application code canlı DOM’u değiştirebilir. Source ve final DOM’u karşılaştırırken aynı document ve aynı observation zamanı gerektiğini koru.
Source gözlemi
sourceNoteText=Loading
Response gözlemi
API sonucu ayrı tutulur
Kanıt sınırı
Source != live DOM observation
Eksik görünüm kaydı unknown bırakır
Yalnız API response kaydı varsa UI’ın hangi başlığı gösterdiğini kesinleştiremezsin. Başka örneğin projected view alanını eksik browser gözleminin yerine taşıma.
Source gözlemi
startup/API observations
Response gözlemi
View gözlemi eksik
Kanıt sınırı
Final canlı görünüm hâlâ bilinmiyor
Kontrolü bağımlılık sırasına bağla
Document, ayrı API result, consumer doğrulaması ve view uygulamasını aynı yol için eşleştir. Herhangi bir aşamanın başarısı sonrakilerin kanıtı değildir.
Source gözlemi
Aynı document bağlamı gerekir
Response gözlemi
Aynı API resource’u gerekir
Kanıt sınırı
Her aşama kendi gözlemini gerektirir

Layer / tier

Rol haritasını önce oku
Source text’i yerel HTML üreticisi ve HTMLParser okuması sağlar; API status/body kaydı aynı örneğin ayrı representation’ıdır. Bu alanlar canlı browser DOM veya packet capture kaydı değildir. Frontend burada browser presentation, backend ise endpoint/render, application service ve data owner sorumluluklarıdır. Bunlar logical rollerin adlarıdır.
Source gözlemi
Frontend: browser görünümü
Response gözlemi
Backend: endpoint / service / data
Kanıt sınırı
Deployment yerleşimi henüz bilinmiyor
Yerel function call ağ değildir
Roles.serverCalls=in-process. Endpoint’in service’i çağırması burada aynı process içindedir; her layer için yeni HTTP exchange çizilmez.
Source gözlemi
presentation responsibility
Response gözlemi
serverCalls=in-process
Kanıt sınırı
Logical boundary != network hop
Physical tier başka bir boyuttur
Layer sorumluluk ve dependency’yi ayırır; tier fiziksel deployment ayrımını anlatır. Birden fazla layer aynı tier’da bulunabilir.
Source gözlemi
Logical roller ayrı tutulur
Response gözlemi
Bu örnekte aynı process
Kanıt sınırı
layersArePhysicalTiers=false
Monolith tek zorunlu process demek değil
Artifact monolithIsOneMandatoryBinaryOrProcess=false tutar. Mimariyi yalnız process sayısından sınıflandırmak deployment ile application organizasyonunu karıştırır.
Source gözlemi
Görünüm / backend rolleri
Response gözlemi
Fiziksel deployment ayrı boyuttur
Kanıt sınırı
monolithIsOneMandatoryBinaryOrProcess=false
SPA etiketi backend topolojisini belirlemez
SPA browser’ın document ve navigation yaklaşımını tarif eder. Aynı frontend, farklı backend layer veya service deployment’larıyla konuşabilir; source HTML bunu tam göstermez.
Source gözlemi
SPA document davranışı
Response gözlemi
Backend topolojisi buradan çıkarılmaz
Kanıt sınırı
Frontend label != full architecture
Haritaya yalnız bilinen sınırları ekle
Bu örnekte bilinenler logical roller ve in-process server call’larıdır. Cloud physical tier, runtime process veya ayrı service sayısı için deployment gözlemi gerekir.
Source gözlemi
roles observed
Response gözlemi
In-process çağrılar tanımlı
Kanıt sınırı
Fiziksel yerleşim için gözlem gerekir

UYGULAMA · GÜVENLİK KONTROLÜ · DOĞRULAMA

Kod sorumluluğunu fiziksel yerleşimden ayır

Source text’i yerel HTML üreticisi ve HTMLParser okuması sağlar; API status/body kaydı aynı örneğin ayrı representation’ıdır. Bu alanlar canlı browser DOM veya packet capture kaydı değildir. Her rolün kararını yaz: browser görünümü oluşturur; server endpoint’i ve ilk HTML’i üretir; service uygulama davranışını yürütür; data owner kaydı sağlar. Sonra bu rollerin hangi process ve deployment unit içinde olduğunu ayrıca kaydet. Aynı process içindeki çağrıları ağ isteği gibi çizmek hem gecikmeyi hem güven sınırını yanlış anlatır.

Frontend/backend contract için method, target, status, media type ve veri biçimini birlikte tanımla. Bilinen public note title ve version döndürür; bulunmayan note 404 üretir. Backend verinin bulunabilirliğini, frontend sonucun nasıl gösterileceğini belirler. JSON’un parse edilebilmesi, note contract’ının kabul edildiği anlamına gelmez.

SPA’nın title alanı düz metinse, kabul edilen string’i hedef node’un textContent alanına yaz; API body’sini innerHTML ile yeniden parse etme. Bu tercih HTML içerik üretme ihtiyacı olmayan bir text node içindir; URL, attribute veya script bağlamına otomatik güvenlik sağlamaz. Browser regression’ında aynı request’in doğrulanmış title’ı ile node.textContent’i karşılaştır, 404 dalında başarı title’ının yazılmadığını doğrula. Dersin yerel HTML parser kontrolü bu canlı DOM adımını ölçmez.

Mesajın ulaşmasını ve görünümün değişmesini ayrı izle

Request hazırlanırken hedefi browser bilir; server ancak mesaj ulaştığında öğrenir. Response hazırlanırken browser’ın Loading durumu korunur. Response ulaştıktan sonra status, body ve note biçimi kontrol edilir; en son DOM text değişir. 404 dalında response ulaşır fakat note title güncellemesi yapılmaz. Hareketi kapattığında da aynı durumları ve sonucu okuyabilmelisin.

SSR kaynak title’ı, SPA Loading kaynak metni ve API’nin note shape/status alanları ayrı gözlemlerdir. Projected DOM text, seçilmiş frontend contract’ının beklenen sonucudur; canlı browser’da gösterildiği anlamına gelmez. Gerçek UI sonucunu açıklamak için response receipt, validation ve DOM update’in aynı request’e ait olduğuna dair ayrıca gözlem gerekir.

ŞİMDİ VAKAYA UYGULA

Başlangıç document’i ile daha sonra istenen notun sonucu hangi kanıtlarla ayrılır?

Duru Atlas not kartını açıyor. Server-rendered örnekte Tea note başlangıç HTML’inde bulunur. SPA örneğinde aynı yerde Loading vardır ve not ayrıca API’den alınır. Document’in açılması bu ikinci isteğin başarılı olduğunu göstermez.

Vakadaki response’a hangi component’ler katkıda bulunuyor? UI, service, platform ve dış provider sonuçlarının hangi hop’ta tamamlandığını ayrı göster.

Bağlı vaka dosyasını aç ↗

ÖRNEĞİ BİRLİKTE OKUYALIM

Server, SPA ve ekran kaydı

Bir alan seç; hangi sonucu desteklediğini ve nerede yetersiz kaldığını incele.

Ham kaydı ve alan açıklamalarını oku

{
  "roles": {
    "frontend": "Browser presentation",
    "backend": [
      "endpoint/render",
      "application service",
      "data owner"
    ],
    "serverCalls": "in-process, no fake wire",
    "selectedDeployment": "own local fixture, no cloud physical tiers",
    "monolithIsOneMandatoryBinaryOrProcess": false,
    "layersArePhysicalTiers": false
  },
  "ssr": {
    "target": "/server-note",
    "status": 200,
    "contentType": "text/html; charset=utf-8",
    "sourceHtml": "<!doctype html><html lang=\"en\"><body><h1 id=\"note\">Tea note</h1></body></html>",
    "sourceNoteText": "Tea note",
    "projectedDomText": "Tea note"
  },
  "spa": {
    "startupTarget": "/spa-note",
    "startupStatus": 200,
    "sourceHtml": "<!doctype html><html lang=\"en\"><body><h1 id=\"note\">Loading</h1></body></html>",
    "sourceNoteText": "Loading",
    "apiTarget": "/api/notes/tea",
    "apiStatus": 200,
    "apiContentType": "application/json",
    "body": "{\"id\":\"tea\",\"title\":\"Tea note\",\"version\":1}",
    "representation": {
      "id": "tea",
      "title": "Tea note",
      "version": 1
    },
    "projectedDomTextAfterValidation": "Tea note"
  },
  "apiFailure": {
    "startupStatus": 200,
    "apiTarget": "/api/notes/missing",
    "apiStatus": 404,
    "body": "{\"error\":\"not-found\"}",
    "fetchPromiseModel": "fulfilled Response with status404, not network rejection",
    "noteParsed": false,
    "projectedSuccessfulNoteCommitted": false,
    "projectedMessage": "Note unavailable"
  },
  "limits": {
    "native": "own HTML/JSON builders + independent Python HTMLParser only",
    "realHttpServerExecuted": false,
    "browserFetchExecuted": false,
    "browserDomExecuted": false,
    "frameworkExecuted": false
  },
  "selector": {
    "language": "XPath",
    "xml": "<audit><view apiStatus=\"404\" noteSuccessCommitted=\"false\"/></audit>",
    "xpath": "count(/audit/view[@apiStatus='404' and @noteSuccessCommitted='true'])",
    "expected": 0,
    "positiveFixtureXml": "<audit><view apiStatus=\"404\" noteSuccessCommitted=\"true\"/></audit>",
    "positiveExpected": 1,
    "scope": "Only authored protocol-decision observations, not product log field names or a live HTTP capture.",
    "missingFieldBehavior": "Missing observation is insufficient evidence; zero matches is not proof of correct runtime behavior."
  }
}

roles: Frontend, backend ve data owner sorumluluklarını ayırır; logical layer sayısı fiziksel tier sayısı değildir.
ssr/spa: SSR ilk HTML’e title koyar; seçilen SPA önce Loading gösterir, sonra API representation’ını kullanır.
apiFailure: Startup HTML başarılı olsa da note API 404 dönebilir. Response gelmesi başarılı note parsing’i değildir.
limits/selector: Kaynak HTML/JSON ve beklenen görünüm modeliyle sınırlıdır; gerçek HTTP, Fetch veya DOM çalıştırma kaydı değildir.

Bu örnek public note’un SSR HTML ve SPA JSON akışlarını karşılaştırır. Kutular sorumlulukları, oklar bilginin ulaştığı adımı gösterir; gerçek ağ capture’ı değildir. Gösterilen title ve hata görünümü seçilmiş state’lerdir, bütün framework davranışını temsil etmez.

İki yanlış kanı

Monolith, three-tier ve SPA birbirini dışlayan üç architecture’dır.

Deployment unit, physical placement ve UI behavior farklı eksenlerdir; aynı application bunları birlikte kullanabilir.

SPA initial HTML200 veya Fetch fulfill note’un DOM’da hazır olduğunu kanıtlar.

Startup, status, body/schema ve DOM commit ayrı stages’dir; HTTP404 Response ile fulfill olabilir.

SIRA SENDE

Bu hikâyeyi sen çöz.

Sonucu tahmin et, kanıtın sınırını bul ve nedenini kendi cümlenle anlat.

SPA başlangıcında HTML 200 döndü, fakat note API’si 404 döndü. Başarılı note state’i DOM’a uygulanır mı?

Hayır. noteParsed=false; başarılı note state’i uygulanmaz.
Evet. HTML 200 sonraki bütün API sonuçlarını başarılı yapar.

Gerekçeli cevabı oku

Hayır. noteParsed=false; başarılı note state’i uygulanmaz. — Başlangıç HTML’inin gelmesi kitabın bulunduğunu göstermez. Örnek bu durumda Note unavailable mesajını öngörür; kitap başlığını kabul etmez.

Üç backend role’u çizilmesi, üç fiziksel host bulunduğunu kanıtlar mı?

Dersten seçilen artifact alanları; öğretim örneği

roles: {"frontend":"Browser presentation","backend":["endpoint/render","application service","data owner"],"serverCalls":"in-process, no fake wire","selectedDeployment":"own local fixture, no cloud physical tiers","monolithIsOneMandatoryBinaryOrProcess":false,"layersArePhysicalTiers":false}

Evet. Her layer ayrı bir network host gerektirir.
Hayır. Bu örnekte server çağrıları aynı process içindedir.

Gerekçeli cevabı oku

Hayır. Bu örnekte server çağrıları aynı process içindedir. — Endpoint, service ve data owner ayrı mantıksal layer’lar olabilir. Bu yerel örnek cloud’daki fiziksel tier sayısını ölçmez.

SSR source içinde Tea note var. SPA source içinde Loading var, fakat sonraki view Tea note olarak öngörülüyor. Bu fark neyi öğretir?

Gerekçeli cevabı oku

SSR source, note metnini başlangıç HTML’inde taşır. SPA’da data request sonrasında doğrulanan body’nin view’a uygulanması gerekir. Artifact, yerel HTML üreticilerini ve HTMLParser kullanır; gerçek browser fetch veya DOM işlemi çalıştırılmaz (browserFetchExecuted=false, browserDomExecuted=false). Sonraki view bir model öngörüsüdür; gerçek browser rendering veya framework SSR/hydration testi değildir.

□ Başlangıç source ile sonraki view state’ini ayırdım.

□ Model öngörüsünü gerçek browser veya framework çalışması saymadım.

Uygulama konsolunu aç · request / response / browser

Request, URL, cookie ve DOM örneklerini ayrıca aç

Kaynaklar ve kapsam

Microsoft Learn — Common web application architecturesWhat is a monolithic application? · What are layers? · Traditional N-Layer architecture applications
Microsoft Learn — N-tier architecture styleN-tier architecture style · Opening paragraphs: logical layers and physical tiers · Challenges
MDN — SPA glossarySPA (Single-page application)
MDN — Using the Fetch APICanceling a request · Handling the response · Checking response status · Reading the response body
MDN — Node.textContentValue · Differences from innerHTML
RFC 9110 — HTTP Semantics3.1 Resources · 3.2 Representations · 8.3 Content-Type · 8.6 Content-Length · 9.2.1 Safe Methods · 9.2.2 Idempotent Methods · 9.3.1 GET · 9.3.2 HEAD · 12.5.1 Accept · 15.5.5 404 Not Found · 15.5.6 405 Method Not Allowed · 15.5.7 406 Not Acceptable

KENDİ NOTUN / BU TARAYICIDA

Monolith, three-tier ve SPA

1. Core · Mekanizma

SSR HTML

SPA data/view

SPA API404

Monolith, layer ve tier hangi soruya cevap verir?

İlk HTML, API sonucu ve DOM aynı şey değildir

2. Red · Güven ve etki

200, sonra 404

Source / data

Çizimdeki kutu bir güven sınırını kanıtlamaz

Başarılı başlangıç, başarısız API’yi gizlemesin

3. Blue · Güvenli geliştirme ve savunma

Source / görünüm

Layer / tier

Kod sorumluluğunu fiziksel yerleşimden ayır

Mesajın ulaşmasını ve görünümün değişmesini ayrı izle

Başlangıç document’i ile daha sonra istenen notun sonucu hangi kanıtlarla ayrılır?

İki yanlış kanı

SPA başlangıcında HTML 200 döndü, fakat note API’si 404 döndü. Başarılı note state’i DOM’a uygulanır mı?

Üç backend role’u çizilmesi, üç fiziksel host bulunduğunu kanıtlar mı?

SSR source içinde Tea note var. SPA source içinde Loading var, fakat sonraki view Tea note olarak öngörülüyor. Bu fark neyi öğretir?

Kaynaklar ve kapsam