Pisząc aplikacje webowe, szybko zauważysz powtarzające się elementy interfejsu użytkownika. Tworzenie za każdym razem tych samych fragmentów UI od zera byłoby nieefektywne i podatne na błędy. Na szczęście Blazor - framework webowy od Microsoftu wykorzystujący C# zamiast JavaScript opiera się na koncepcji komponentów. To właśnie komponenty są sercem Blazora, podstawowymi elementami, które pozwalają budować interfejs w sposób ponownie używalny, modułowy i łatwy w utrzymaniu. Dzięki komponentom możemy złożyć aplikację z mniejszych kawałków UI tak, jak buduje się konstrukcje z klocków.
W tym artykule opowiem, czym są komponenty w Blazorze, jak stworzyć własny komponent i jak wielokrotnie wykorzystywać go w różnych miejscach aplikacji.
Czym są komponenty w Blazorze?
Komponent Blazora to samodzielny fragment interfejsu użytkownika, który zawiera zarówno kod C#, jak i markup HTML. Innymi słowy, komponent jest jak miniaturowa stronka lub kontrolka, którą można wbudować w inne części aplikacji.
Charakteryzuje się następującymi cechami:
• Samowystarczalność: Komponent stanowi zamknięty fragment UI, posiada własny wygląd i zachowanie.
• Stan i logika: Każdy komponent utrzymuje własny stan (dane) oraz logikę renderowania, niezależnie od reszty aplikacji.
• Interaktywność: Komponent może obsługiwać zdarzenia użytkownika (np. kliknięcia), wiązać dane z interfejsem oraz zarządzać własnym cyklem życia.
• Reużywalność: Raz zdefiniowany komponent można wielokrotnie wstawiać w różnych miejscach aplikacji. Każda instancja może działać niezależnie, z własnymi danymi.
• Plik .razor: Komponent jest najczęściej definiowany w pojedynczym pliku .razor przy użyciu składni Razor (HTML zmieszany z kodem C#). Taki plik podczas kompilacji przekładany jest na klasę .NET o nazwie odpowiadającej nazwie pliku.
Dzięki komponentom tworzenie interfejsu w Blazorze staje się bardziej zorganizowane. Zamiast pisać monolityczne strony z ogromną ilością kodu HTML i C#, możemy podzielić UI na mniejsze części, co ułatwia pracę zespołową i testowanie.
Tworzenie własnego komponentu
Jak stworzyć komponent? W Blazorze to bardzo proste. Wystarczy dodać nowy plik .razor do projektu (na przykład w folderze Components lub Shared). Nazwa pliku będzie jednocześnie nazwą komponentu (czyli znacznika HTML, za pomocą którego go użyjemy).
We wnętrzu pliku .razor umieszczamy kod HTML opisujący wygląd komponentu oraz opcjonalny blok @code z logiką w C#. Możemy też skorzystać z tzw. code-behind, czyli umieścić logikę C# w osobnym pliku .cs powiązanym z komponentem, ale dla prostych przypadków wystarczy @code wewnątrz .razor.
Rozważmy prosty przykład. Załóżmy, że chcemy wielokrotnie wyświetlać w aplikacji komunikat w stylu bootstrapowego "alertu" (np. informujący o powodzeniu operacji). Zamiast kopiować za każdym razem ten sam fragment HTML, utworzymy komponent Alert:
<!-- Plik: Alert.razor -->
<div class="alert alert-info">
<strong>Info:</strong> @Message
</div>
@code {
[Parameter]
public string Message { get; set; }
}Powyższy komponent Alert wyświetla komunikat przekazany poprzez parametr Message wewnątrz niebieskiego pola (dzięki klasom Bootstrapa alert alert-info). Atrybut [Parameter] informuje Blazora, że właściwość Message ma być traktowana jako parametr komponentu, czyli coś, co można ustawić z zewnątrz podczas użycia komponentu. Wewnątrz komponentu korzystamy z @Message, aby wstawić przekazany tekst do markupu.
Teraz jak użyć nasz komponent? W dowolnym miejscu aplikacji (np. na stronie Razor lub w innym komponencie) możemy po prostu dodać znacznik:
<Alert Message="Dane zostały zapisane pomyślnie." />W ten sposób wstawiamy instancję naszego komponentu z konkretnym tekstem. Blazor zadba o to, by utworzyć osobny egzemplarz komponentu Alert dla każdej takiej deklaracji i przekazać do niego podany parametr.
Kilka uwag przy tworzeniu komponentów:
-Komponent może przyjmować wiele parametrów (wystarczy każdą publiczną właściwość oznaczyć [Parameter]). Parametry mogą mieć wartości domyślne, jeśli nie zostaną podane.
-Nazwa pliku (np. Alert.razor) staje się nazwą tagu (<Alert>). Upewnij się, że nazwy komponentów są unikalne i nie kolidują z istniejącymi tagami HTML.
-Jeśli komponent znajduje się w innym folderze lub projekcie, może być konieczne dodanie dyrektywy @using Namespace.Twojego.Komponentu na górze strony, aby Blazor go odnalazł.
Ponowne wykorzystanie komponentów w praktyce
Główną zaletą komponentów jest możliwość ich ponownego użycia. Gdy mamy już zdefiniowany komponent, możemy wstawić go w wielu miejscach aplikacji, nawet na różnych stronach, z różnymi parametrami. Przykładowo, komponent Alert możemy użyć zarówno po zapisaniu formularza użytkownika, jak i po udanej aktualizacji produktu, za każdym razem przekazując inny komunikat przez parametr Message.
Korzyści z reużywalnych komponentów:
-Mniej duplikacji kodu: Raz napisany komponent eliminuje potrzebę kopiowania i wklejania tych samych elementów HTML/C#. Zmniejsza to ryzyko błędów i ułatwia utrzymanie.
-Spójność UI: Jeśli zechcemy zmienić wygląd takiego elementu (np. dodać ikonę do naszego Alertu), wystarczy zmodyfikować kod komponentu, zmiana automatycznie odzwierciedli się wszędzie tam, gdzie komponent jest używany.
-Czytelność i modułowość: Strony złożone z komponentów są bardziej przejrzyste. Każdy komponent realizuje odrębną funkcjonalność, więc kod jest podzielony na logiczne kawałki. Nowym programistom w projekcie łatwiej zrozumieć strukturę aplikacji.
-Wygodna iteracja: Możemy rozwijać lub poprawiać komponent w jednym miejscu, mając pewność, że wszystkie instancje skorzystają na ulepszeniu. To przyspiesza rozwój dużych aplikacji.
Warto pamiętać, że komponenty Blazora mogą także komunikować się między sobą. Rodzic może przekazywać dane do komponentu dziecka (przez parametry), a komponent dziecka może powiadamiać rodzica o zdarzeniach. Służą do tego m.in. mechanizmy takie jak parametr typu EventCallback, dzięki któremu nasz komponent może wywołać zdarzenie zwrotne w kodzie rodzica. Przykładowo, można stworzyć komponent CustomButton, który przyjmuje parametr OnClick typu EventCallback. Wewnątrz takiego komponentu wywołujemy OnClick.InvokeAsync() w odpowiedzi na kliknięcie przycisku, co spowoduje wykonanie logiki zdefiniowanej w miejscu użycia komponentu. To jednak temat na osobny artykuł, kluczowe jest to, że nawet w kwestii interakcji komponenty pozwalają zachować czystość architektury: komponent skupia się na swoim zadaniu, a zewnętrzny kod decyduje, co robić po wystąpieniu danego zdarzenia.
Na koniec dodajmy, że komponenty można grupować w biblioteki i paczki NuGet. Oznacza to, że możesz stworzyć własny zestaw uniwersalnych komponentów (np. przyciski, tabelki, modalne okienka), a następnie wielokrotnie wykorzystywać je w różnych projektach. Blazor umożliwia utworzenie Razor Class Library, w której umieścisz swoje komponenty i udostępnisz je innym aplikacjom. To potężna opcja, gdy budujesz większe systemy lub chcesz dzielić się komponentami między zespołami.
Podsumowanie
Komponenty w Blazorze to fundament tworzenia aplikacji webowych w C#. Pozwalają pisać kod interfejsu raz i wykorzystywać go wielokrotnie, co znacząco przyspiesza pracę i poprawia jakość kodu. W praktyce oznacza to mniej powtarzalnej pracy, bardziej spójny wygląd aplikacji oraz łatwiejsze dodawanie nowych funkcjonalności poprzez łączenie gotowych "klocków" UI.
Jeśli zaciekawiło Cię podejście Blazora, czyli tworzenie frontendu w całości w C# bez użycia JavaScript, to warto pójść o krok dalej. W moim szkoleniu online Szkoła Blazora pokazuję krok po kroku, jak tworzyć nowoczesne aplikacje webowe właśnie z wykorzystaniem komponentów i C#. W szkoleniu pokazuje, jak zostać full-stack developerem nie wychodząc z ekosystemu .NET, budując zarówno część kliencką, jak i serwerową w jednym języku. Jeśli chcesz poszerzyć swoją wiedzę i nabrać praktyki w Blazorze, serdecznie zapraszam do dołączenia do Szkoły Blazora.
