Views a Components

Jaka jest różnica pomiędzy views a components? Dla mnie w wielu przypadkach to kwestia bardzo sporna, czy mógłby ktoś w miarę dokładanie i przejrzyście wytłumaczyć różnicę?

Jakie views oraz jakie components? Chodzi Ci o jakiś framework?

To podepnę się z pytaniem.
W MVC miałem Views i klasę Component. Tak naprawdę ta klasa wyciągała dane, które równie dobrze można było wyciągnąć w kontrolerze.
W widoku umieściłem plik widoku Components, a mogłem dać PartialView. Jaka jest tak naprawdę między nimi różnica?
Żeby zobrazować:

Klasa komponentu:

public class NavigationMenuViewComponent : ViewComponent
{
    private readonly IAdvertRepository repository;

    public NavigationMenuViewComponent(IAdvertRepository repository)
    {
       this.repository = repository;
    }

    public IViewComponentResult Invoke()
    {
        ViewBag.SelectedCategory = RouteData?.Values["category"];
        return View(repository.Adverts
            .Select(x => x.Category)
            .Distinct()
            .OrderBy(x => x));
    }
}

Vidok komponentu wygląda tak:

@model IEnumerable<string>

@if(Model.Count() == 0)
{
    @:<h6 class="text-center">Brak kategorii</h6>
}
else
{
    @foreach (string category in Model)
    {
        <a class="btn btn-block @(category == ViewBag.SelectedCategory ? "btn-secondary" : "btn-primary")"
           asp-action="List" asp-controller="Advert" asp-route-category="@category" asp-route-productPage="1">
            @category
        </a>
    }
}

I w _Layout taki fragment:

<div class="row m-1 p-1">
    <div id="categories" class="col-2">
        <h4 class="text-center">Kategorie</h4>
        <hr />
        @await Component.InvokeAsync("NavigationMenu")
    </div>            
    <div class="col-8">
        @RenderBody()
    </div>
</div>

Nindzia napisał(a):

Jaka jest różnica pomiędzy views a components? Dla mnie w wielu przypadkach to kwestia bardzo sporna, czy mógłby ktoś w miarę dokładanie i przejrzyście wytłumaczyć różnicę?

To zależy od kontekstu, w jakim ktoś używa tych słów. Ale jak ktoś przeciwstawia ze sobą view a component, to pewnie ma na myśli:

1. view jako cały widok, np. całą podstronę "logowanie"
2. component jako jeden mały komponent, np. przycisk do logowania, pole do wpisania hasła, pole do wpisania nazwy użytkownik itp.

i o ile kiedyś robiło się stronę bardziej na widokach/podstronach - myślało się o stronach internetowych jako systemie podstron, i w ten sposób się to projektowało i implementowało (czyli podejście top-down. Od ogółu do szczegółu) - to teraz coraz częściej się myśli w kategoriach komponentów i składa się komponenty w całość (czyli podejście bottom-up - od szczegółu do ogółu).

Jednak problem z nazewnictwem view/component jest taki, że jest to strasznie niejednoznaczne. Pojęcia view używa się też w innych kontekstach - widok jako ta część aplikacji, która jest odpowiedzialna za wyświetlanie (a nie np. za logikę), mamy takie wzorce jak choćby MVC (model, view, controller) i generalnie jak ktoś powie po prostu "view", to może się to kojarzyć właśnie z tamtą koncepcją (która jest zupełnie odmienna, bo w MVC chodzi o abstrakcyjną warstwę aplikacji, a nie o dzielenie czegoś na podstrony).

Więc dla mnie zamiast nazywać podstrony "widokami" lepiej używać określeń podstrona, layout, czy innych, żeby uniknąć nieporozumień.

Słowo komponent też jest wieloznaczne. Szczególnie, że implementując to np. w React zarówno "view" jak i "component" byłoby jakimś tam komponentem (inne biblioteki/frameworki mogą mieć inne nazewnictwo specyficzne dla nich, a ja pisałem przez ostatnie kilka lat głównie w React, więc o React wspominam).

No i w takim React widok mi się kojarzy bardziej z koncepcją presentational component. Czyli taki komponent, który nie zawiera logiki, a sam wygląd.