DEV Community

cengiz ilhan
cengiz ilhan

Posted on

Component-Based MVC

#mvc #webdev #frontend #architecture

Modern component architecture for server-side MVC applications

In the modern frontend world, large bundle files are gradually being replaced by component-based architectures.

Thanks to modern frontend frameworks like React and Vue, the following approach has become common:

  • UI is built from components
  • each component owns its own code
  • only the necessary code is loaded

However, many server-side MVC applications still follow the older approach:

site.css
bundle.js
Enter fullscreen mode Exit fullscreen mode

Over time these files grow larger and create several problems:

  • unused CSS
  • unnecessary JavaScript
  • hard-to-debug global code
  • risky refactoring

In this article, I will describe a simple approach to solve this problem in MVC applications:

Component-Based MVC

The Idea

In Component-Based MVC, a page is composed of a layout and UI components.

Page = Layout + Components
Enter fullscreen mode Exit fullscreen mode

Each component contains its own HTML, CSS, and JavaScript.

And the most important rule:

If a component is not rendered, its assets are not loaded.

This prevents unnecessary CSS and JavaScript from being loaded.

If there is no HTML, there is no need for its CSS or JS.

A Simple Component Example 

@{
    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>
Enter fullscreen mode Exit fullscreen mode

The component registers its own assets.

Page Usage 

@{
    Html.RegisterStyle("/styles/pages/home.css");
}

<h1>Homepage</h1>

@Html.Partial("~/Components/Gallery/Gallery.cshtml")
@Html.Partial("~/Components/Gallery/Gallery.cshtml")
Enter fullscreen mode Exit fullscreen mode

Even if the gallery component is called twice:

gallery.css → loaded once
gallery.js → loaded once
Enter fullscreen mode Exit fullscreen mode

SCSS Structure

Styles can be organized with a simple folder structure:

/styles
  /components
    /gallery
      gallery.scss
  /pages
    home.scss
    article.scss
Enter fullscreen mode Exit fullscreen mode
  • components/ → reusable UI elements
  • pages/ → page-specific styles

Layout

Assets are rendered in the layout.

<head>
    @Html.RenderRegisteredStyles()
</head>

<body>

@RenderBody()

    @Html.RenderRegisteredScripts(ScriptLocation.Footer)

</body>
Enter fullscreen mode Exit fullscreen mode

Rendered Output

The final HTML output looks like this:

<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>
Enter fullscreen mode Exit fullscreen mode

Even if the component is rendered multiple times, its assets are loaded only once.

Why It Matters

Modern frontend architectures (including React) are built around:

  • component architecture
  • code splitting
  • on-demand assets

Component-Based MVC brings the same idea to the server-side rendering world.

MVC does not change.

Only the View layer becomes modernized.

Summary

Component-Based MVC is based on a few simple principles:

  • UI is built from components
  • components own their assets
  • assets are loaded only when needed

MVC is not dead.

It just needed to evolve with modern component architecture.

Top comments (0)