Component-Based MVC
Server-Side MVC uygulamaları için modern component mimarisi
Component-Based MVC
Server-Side MVC uygulamaları için modern component mimarisi
https://www.pexels.com/photo/data-codes-through-eyeglasses-577585/
Modern frontend dünyasında büyük bundle dosyaları giderek yerini component tabanlı mimarilere bırakıyor.
React, Vue ve benzeri modern frontend framework’leri sayesinde artık şu yaklaşım yaygın:
- UI component’lerden oluşur
- her component kendi koduna sahiptir
- yalnızca gereken kod yüklenir
Ancak birçok server-side MVC uygulaması hâlâ eski yaklaşımı kullanıyor:
site.css
bundle.jsZamanla bu dosyalar büyür ve şu problemler ortaya çıkar:
- kullanılmayan CSS
- gereksiz JavaScript
- zor debug edilen global kod
- riskli refactor
Bu yazıda, MVC uygulamalarında bu problemi çözmek için basit bir yaklaşım anlatıyorum:
Component-Based MVC
Fikir
Component-Based MVC’de bir sayfa, layout ve UI component’lerinin birleşiminden oluşur.
Page = Layout + ComponentsHer component kendi HTML, CSS ve JS’ini içerir.
Ve önemli kural:
Component render edilmezse asset yüklenmez. Böylece gereksiz CSS ve JavaScript yüklenmez. HTML’i olmayan bir şeyin CSS ve JS’ine de ihtiyaç yoktur.
Basit Bir Component Örneği
@{
Html.RegisterStyle("/styles/components/gallery/gallery.css");
Html.RegisterScript("/scripts/gallery.js", ScriptLocation.Footer);
}
<div class="gallery">
<h2>Gallery</h2>
<div class="gallery-images">
<img src="/images/gallery1.jpg">
<img src="/images/gallery2.jpg">
<img src="/images/gallery3.jpg">
</div>
</div>Component kendi asset’lerini register eder.
Page Kullanımı
@{
Html.RegisterStyle("/styles/pages/home.css");
}
<h1>Homepage</h1>
@Html.Partial("~/Components/Gallery/Gallery.cshtml")
@Html.Partial("~/Components/Gallery/Gallery.cshtml")Gallery component iki kez çağrılmış olsa bile:
gallery.css → 1 kez yüklenir.
gallery.js → 1 kez yüklenir.SCSS Yapısı
Stiller basit bir klasör yapısıyla organize edilebilir:
/styles
/components
/gallery
gallery.scss
/pages
home.scss
article.scss
- components/ → tekrar kullanılabilir UI parçaları
- pages/ → sayfaya özel stiller
Layout
Asset’ler layout içinde render edilir.
<head>
@Html.RenderRegisteredStyles()
</head>
<body>
@RenderBody()
@Html.RenderRegisteredScripts(ScriptLocation.Footer)
</body>Render Sonucu
Sayfa çıktısı şöyle olur:
<html>
<head>
<link rel="stylesheet" href="/styles/pages/home.css">
<link rel="stylesheet" href="/styles/components/gallery/gallery.css">
</head>
<body>
<div class="gallery"></div>
<div class="gallery"></div>
<script src="/scripts/gallery.js"></script>
</body>
</html>Component iki kez render edilse bile asset’ler yalnızca bir kez yüklenir.
Neden Önemli?
Modern frontend mimarileri (React dahil) artık:
- component architecture
- code splitting
- on-demand assets
üzerine kurulu.
Component-Based MVC aynı prensibi server-side rendering dünyasına getirir.
MVC değişmez. Sadece View katmanı modernleşir.
Özet
Component-Based MVC şu prensiplere dayanır:
- UI component’lerden oluşur
- component kendi asset’inin sahibidir
- asset’ler yalnızca gerektiğinde yüklenir
메타데이터
- post_id
- 718da421ffba
- slug
- component-based-mvc-718da421ffba
- url
- https://medium.com/@cngzilhn/component-based-mvc-718da421ffba
- canonical_url
- https://medium.com/@cngzilhn/component-based-mvc-718da421ffba
- author_url
- https://medium.com/@cngzilhn
- status
- ok
- fetched_at
- 2026-07-13 06:23:13
